/**
 * SPID.js — Sovereign Passport · Vine Engine
 * public/css/tokens.css
 *
 * All design tokens as CSS custom properties.
 * Every color, spacing, font, and animation timing lives here.
 * Change one variable — it cascades everywhere.
 *
 * Also defines the --name-* variables which map to the vine's
 * custom display names (grape, cluster, vine, vineyard, etc.)
 * These are overwritten at runtime by config.js when the vine
 * admin has set custom names.
 */

:root {

  /* ── COLOR PALETTE ──────────────────────────────────────────── */

  /* Gold — trust, identity, sovereignty */
  --gold:           #c9a84c;
  --gold-light:     #e8d08a;
  --gold-dim:       #6b5420;
  --gold-faint:     rgba(201, 168, 76, 0.08);
  --gold-glow:      rgba(201, 168, 76, 0.20);
  --gold-pulse:     rgba(201, 168, 76, 0.40);

  /* Green — grounded, secure, living systems */
  --green-deep:     #0d150d;
  --green-dark:     #111a11;
  --green-mid:      #1a2e1a;
  --green-soft:     #2a4a2a;
  --green-accent:   #3d6b3d;

  /* Ink — text hierarchy */
  --ink:            #f0ebe0;
  --ink-mid:        #c8c0a8;
  --ink-dim:        #8a8070;
  --ink-faint:      #2e2d20;

  /* Status colors */
  --green-status:   #27ae60;
  --amber-status:   #f39c12;
  --red-status:     #c0392b;
  --blue-status:    #2980b9;

  /* ── BACKGROUNDS ────────────────────────────────────────────── */

  --bg:             #080f08;
  --bg-card:        #0d150d;
  --bg-lift:        #131f13;
  --bg-elevated:    #1a2e1a;
  --bg-overlay:     rgba(8, 15, 8, 0.92);

  /* ── TYPOGRAPHY ─────────────────────────────────────────────── */

  --font-display:   Georgia, 'Times New Roman', serif;
  --font-ui:        'Courier New', Courier, monospace;
  --font-label:     'Palatino Linotype', Palatino, Georgia, serif;

  --text-xs:        10px;
  --text-sm:        12px;
  --text-base:      14px;
  --text-md:        16px;
  --text-lg:        20px;
  --text-xl:        28px;
  --text-2xl:       40px;
  --text-display:   clamp(32px, 6vw, 64px);

  /* ── SPACING ────────────────────────────────────────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;

  /* ── BORDERS ────────────────────────────────────────────────── */

  --border-faint:   1px solid var(--ink-faint);
  --border-gold:    1px solid var(--gold-dim);
  --border-status:  1px solid var(--green-status);
  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      12px;
  --radius-full:    9999px;

  /* ── SHADOWS ────────────────────────────────────────────────── */

  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:    0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-lg:    0 24px 64px rgba(0, 0, 0, 0.8);
  --shadow-gold:  0 0 32px rgba(201, 168, 76, 0.15);
  --shadow-glow:  0 0 64px rgba(201, 168, 76, 0.08);

  /* ── ANIMATION ──────────────────────────────────────────────── */

  --ease:           cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --duration-fast:  150ms;
  --duration-base:  300ms;
  --duration-slow:  600ms;
  --duration-pulse: 3000ms;

  /* ── ORBITAL DASHBOARD ──────────────────────────────────────── */

  /* Ring dimensions */
  --ring-1-r:       80px;    /* inner glow ring */
  --ring-2-r:       140px;   /* module orbit ring */
  --ring-3-r:       200px;   /* outer status ring */
  --ring-4-r:       250px;   /* fragment/peer ring */
  --phoenix-size:   120px;   /* center phoenix */
  --node-size:      56px;    /* orbital module nodes */
  --dashboard-size: 560px;   /* total dashboard diameter */

  /* ── DISPLAY NAMES ──────────────────────────────────────────── */
  /*
   * These CSS variables mirror the NAMES config in config.js.
   * They are overwritten at runtime via JavaScript when the vine
   * has custom names configured.
   * Used in CSS content: properties for pure-CSS labels.
   */

  --name-identity:   'Grape';
  --name-node:       'Cluster';
  --name-network:    'Vine';
  --name-registry:   'Vineyard';
  --name-referral:   'Touch';
  --name-session:    'Gathering';
  --name-invited:    'Seedling';
  --name-candidate:  'Visitor';
  --name-approved:   'Member';
  --name-suspended:  'Paused';
  --name-revoked:    'Removed';
  --name-temporary:  'Guest';

  /* ── VINE STATE ─────────────────────────────────────────────── */
  /*
   * These toggle the UI between first-run (dimmed) and
   * active (glowing) states. Set by dashboard.js on load.
   */

  --vine-opacity:       0.8;    /* 0.8 = first run attractor, 1.0 = active */
  --vine-glow-opacity:  0.6;    /* 0.6 = first run attractor, 1.0 = active */
  --vine-ring-opacity:  0.7;    /* ring visibility */
}

/* ── ACTIVE VINE STATE ────────────────────────────────────────── */
/* Applied to <html> by dashboard.js when vine is configured */

html.vine-active {
  --vine-opacity:       1;
  --vine-glow-opacity:  1;
  --vine-ring-opacity:  1;
}

/* ── SECURE MODE STATE ────────────────────────────────────────── */
/* Applied when vault is locked (secure mode) */

html.vault-locked {
  --gold:        #8a7040;
  --gold-light:  #a08850;
  --gold-glow:   rgba(138, 112, 64, 0.15);
}