/* ═══════════════════════════════════════════════════════════════════
   ArcShare Design Tokens — single source of truth (design/arcshare-v8)
   Load FIRST on every page:
   <link rel="stylesheet" href="/assets/css/tokens.css">
   Legacy aliases at the bottom keep existing pages rendering correctly
   during migration. New code must use --as-* names only.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── Surfaces (dark) — tuned to logo chrome #24272c ── */
  --as-bg:        #1a1d21;
  --as-surface-1: #24272c;   /* cards, nav — matches logo bg */
  --as-surface-2: #2c3036;   /* nested panels, inputs */
  --as-surface-3: #343840;   /* hover states */
  --as-surface-4: #3c414a;   /* active states */

  /* ── Borders ── */
  --as-border-1: rgba(255,255,255,0.06);
  --as-border-2: rgba(255,255,255,0.11);
  --as-border-3: rgba(255,255,255,0.18);
  --as-border-4: rgba(255,255,255,0.28);

  /* ── Text ── */
  --as-text-1: #f0f2ff;      /* primary */
  --as-text-2: #d8dcf0;      /* strong secondary */
  --as-text-3: #9ea8c8;      /* muted */
  --as-text-4: #6878a8;      /* faint / meta */

  /* ── Accent (ArcShare blue, logo-derived) ── */
  --as-accent:        #3361be;
  --as-accent-bright: #5b8de8;
  --as-accent-bg:     rgba(51,97,190,0.12);
  --as-accent-ring:   rgba(91,141,232,0.30);

  /* ── Status — muted per v8 brief (replaces neon #06ffa5) ── */
  --as-success:      #34b27b;
  --as-success-bg:   rgba(52,178,123,0.10);
  --as-success-ring: rgba(52,178,123,0.28);
  --as-warning:      #d99a2b;
  --as-warning-bg:   rgba(217,154,43,0.10);
  --as-warning-ring: rgba(217,154,43,0.28);
  --as-danger:       #e5484d;
  --as-danger-bg:    rgba(229,72,77,0.10);
  --as-danger-ring:  rgba(229,72,77,0.28);

  /* ── Type ── */
  --as-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --as-font-mono: 'JetBrains Mono', 'Fira Mono', monospace;
  --as-fs-title:   30px;   /* page title  (brief: 28–34) */
  --as-fs-section: 18px;   /* section title (17–20) */
  --as-fs-body:    14px;
  --as-fs-helper:  12.5px;
  --as-fs-meta:    11px;
  --as-lh-body:    1.5;

  /* ── Spacing (4px base) ── */
  --as-sp-1: 4px;  --as-sp-2: 8px;  --as-sp-3: 12px; --as-sp-4: 16px;
  --as-sp-5: 20px; --as-sp-6: 24px; --as-sp-8: 32px; --as-sp-10: 40px;

  /* ── Radii ── */
  --as-r-lg: 14px; --as-r-md: 10px; --as-r-sm: 7px; --as-r-xs: 5px;
  --as-r-pill: 999px;

  /* ── Elevation ── */
  --as-shadow-1: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px var(--as-border-1);
  --as-shadow-2: 0 4px 20px rgba(0,0,0,0.6), 0 0 0 1px var(--as-border-1);
  --as-shadow-modal: 0 24px 60px rgba(0,0,0,0.6);

  /* ── Motion (brief: 120–200ms) ── */
  --as-t-fast: 130ms ease;
  --as-t-med:  180ms ease;

  /* ── Chrome ── */
  --as-nav-h: 60px;
  --as-nav-bg: #24272c;      /* exact logo bg — do not change */
  --as-content-max: 1280px;
  --as-touch-min: 44px;
}

[data-theme="light"]{
  --as-bg:        #ecedf0;
  --as-surface-1: #f8f8f4;   /* matches light logo bg */
  --as-surface-2: #ebebeb;
  --as-surface-3: #dadada;
  --as-surface-4: #cacaca;

  --as-border-1: rgba(0,0,0,0.05);
  --as-border-2: rgba(0,0,0,0.12);
  --as-border-3: rgba(0,0,0,0.20);
  --as-border-4: rgba(0,0,0,0.32);

  --as-text-1: #0a0c10;
  --as-text-2: #141828;
  --as-text-3: #2a3458;
  --as-text-4: #485078;

  --as-accent:        #3361be;
  --as-accent-bright: #2450a0;
  --as-accent-bg:     rgba(51,97,190,0.09);
  --as-accent-ring:   rgba(51,97,190,0.25);

  --as-success:      #0e7a52;
  --as-success-bg:   rgba(14,122,82,0.09);
  --as-success-ring: rgba(14,122,82,0.25);
  --as-warning:      #935b0e;
  --as-warning-bg:   rgba(147,91,14,0.08);
  --as-warning-ring: rgba(147,91,14,0.25);
  --as-danger:       #c8192e;
  --as-danger-bg:    rgba(200,25,46,0.08);
  --as-danger-ring:  rgba(200,25,46,0.25);

  --as-shadow-1: 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px var(--as-border-1);
  --as-shadow-2: 0 4px 20px rgba(0,0,0,0.12), 0 0 0 1px var(--as-border-1);
  --as-shadow-modal: 0 24px 60px rgba(0,0,0,0.25);

  --as-nav-bg: #f8f8f4;
}

/* ── Reduced motion (brief requirement) ── */
@media (prefers-reduced-motion: reduce){
  :root{ --as-t-fast: 0ms; --as-t-med: 0ms; }
  *,*::before,*::after{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   LEGACY ALIASES — keep existing inline page CSS rendering while pages
   migrate. Each alias maps an old variable name onto the new token.
   Delete this block only after ALL pages have migrated (phase 8).
   ═══════════════════════════════════════════════════════════════════ */
:root, [data-theme="light"]{
  /* Gen-2 names (homepage / transfer / f) */
  --bg:var(--as-bg); --s1:var(--as-surface-1); --s2:var(--as-surface-2);
  --s3:var(--as-surface-3); --s4:var(--as-surface-4);
  --b1:var(--as-border-1); --b2:var(--as-border-2);
  --b3:var(--as-border-3); --b4:var(--as-border-4);
  --t0:var(--as-text-1); --t1:var(--as-text-2);
  --t2:var(--as-text-3); --t3:var(--as-text-4); --t4:var(--as-text-4);
  --acc:var(--as-accent); --acc2:var(--as-accent-bright);
  --acb:var(--as-accent-bg); --acr:var(--as-accent-ring);
  --go:var(--as-success); --gob:var(--as-success-bg); --gor:var(--as-success-ring);
  --red:var(--as-danger); --reb:var(--as-danger-bg); --rer:var(--as-danger-ring);
  --amb:var(--as-warning); --ambb:var(--as-warning-bg); --ambr:var(--as-warning-ring);
  --blue:var(--as-accent-bright); --blb:var(--as-accent-bg); --blr:var(--as-accent-ring);
  --sans:var(--as-font-sans); --mono:var(--as-font-mono);
  --ra:20px; --rb:var(--as-r-lg); --rc:var(--as-r-md);
  --rd:var(--as-r-sm); --re:var(--as-r-xs);
  --sh:var(--as-shadow-1); --sh2:var(--as-shadow-2);
  --nav-bg:var(--as-nav-bg);
  /* Gen-1 names (webtools / tools / admin / chat / go / get) */
  --border:var(--as-border-2); --border2:var(--as-border-3); --border3:var(--as-border-4);
  --text:var(--as-text-1); --text2:var(--as-text-3);
  --text3:var(--as-text-4); --text4:var(--as-text-4);
  --bg2:var(--as-surface-1); --bg3:var(--as-surface-2);
  --bg4:var(--as-surface-3); --bg5:var(--as-surface-4);
  --r:var(--as-r-lg); --r-sm:var(--as-r-sm); --r-lg:var(--as-r-lg);
  --blue-dim:var(--as-accent-bg); --blue-txt:var(--as-accent-bright);
  --green:var(--as-success); --green-bg:var(--as-success-bg);
  --green-br:var(--as-success-ring); --green-txt:var(--as-success);
  --red-bg:var(--as-danger-bg); --red-br:var(--as-danger-ring);
  --amber:var(--as-warning); --amber-bg:var(--as-warning-bg);
  --amber-br:var(--as-warning-ring); --amber-dim:var(--as-warning-bg);
  --go-bg:var(--as-success-bg); --surface:var(--as-surface-1);
}

/* ═══ v8 FINAL palette (phase 3) — overrides the phase-1 provisionals ═══ */
:root{
  --as-accent:        #3d7fdb;
  --as-accent-bright: #5b8de8;
  --as-accent-teal:   #2bb673;   /* gradient partner + success share family */
  --as-accent-bg:     rgba(61,127,219,0.14);
  --as-accent-ring:   rgba(61,127,219,0.30);
  --as-gradient:      linear-gradient(90deg,#5b8de8,#2bb673);

  /* surfaces — slightly deeper, matches the mockups the user approved */
  --as-bg:        #0d0f14;
  --as-surface-1: #161a21;   /* cards, nav */
  --as-surface-2: #1e232c;   /* raised / hover / icon-tile bg */
  --as-surface-3: #262c37;
  --as-surface-4: #2f3642;

  /* fixed text contrast */
  --as-text-1: #f0f3f9;
  --as-text-2: #c4cad6;   /* secondary — lifted for legibility */
  --as-text-3: #949cad;   /* muted mono / meta */
  --as-text-4: #7d8598;

  /* semantic — status/meaning ONLY */
  --as-success:      #2bb673;  --as-success-bg: rgba(43,182,115,0.13);  --as-success-ring: rgba(43,182,115,0.30);
  --as-warning:      #e0a63c;  --as-warning-bg: rgba(224,166,60,0.13);  --as-warning-ring: rgba(224,166,60,0.30);
  --as-danger:       #e05563;  --as-danger-bg:  rgba(224,85,99,0.13);   --as-danger-ring:  rgba(224,85,99,0.30);

  /* component tokens */
  --as-card-pad: 16px 18px;
  --as-card-radius: 12px;
  --as-icon-tile: 38px;
  --as-icon-tile-radius: 9px;
}
[data-theme="light"]{
  --as-accent:#3d7fdb; --as-accent-bright:#2450a0; --as-accent-teal:#0e7a52;
  --as-accent-bg:rgba(61,127,219,0.09); --as-accent-ring:rgba(61,127,219,0.22);
  /* page = pure white; cards/tiles = bluish-gray so they read as distinct
     surfaces; nav = exact logo-chip color so the logo blends in */
  --as-bg:#ffffff;
  --as-surface-1:#eef1f7;   /* card / tile fill */
  --as-surface-2:#e4e9f2;   /* nested panel, hover */
  --as-surface-3:#d8dfec;
  --as-surface-4:#c9d2e3;
  --as-nav-bg:#f8f8f4;      /* exact logo chip bg — brand constraint, do not change */
  --as-border-1:rgba(15,20,35,0.07); --as-border-2:rgba(15,20,35,0.12);
  --as-border-3:rgba(15,20,35,0.18); --as-border-4:rgba(15,20,35,0.26);
  --as-text-1:#0d1220; --as-text-2:#33405c; --as-text-3:#5a6782; --as-text-4:#8592ab;
  --as-success:#0e7a52; --as-success-bg:rgba(14,122,82,0.09); --as-success-ring:rgba(14,122,82,0.20);
  --as-warning:#9a6511; --as-warning-bg:rgba(154,101,17,0.09); --as-warning-ring:rgba(154,101,17,0.20);
  --as-danger:#c0303c; --as-danger-bg:rgba(192,48,60,0.08); --as-danger-ring:rgba(192,48,60,0.20);
  --as-shadow-1: 0 1px 2px rgba(15,20,35,0.05);
  --as-shadow-2: 0 4px 16px rgba(15,20,35,0.07);
}
/* explicit page-vs-card split for pages using legacy var names */
[data-theme="light"] body{background:var(--as-bg)}
[data-theme="light"] .r-card,
[data-theme="light"] .as-card,
[data-theme="light"] .script-card{background:var(--as-surface-1);border-color:var(--as-border-2)}