/* =====================================================================
   DC4AI — theme tokens
   ---------------------------------------------------------------------
   Shared by the console, the documentation and the status page so a
   palette change lands in one place. Light is the base :root; dark
   arrives from prefers-color-scheme (guarded so an explicit light
   choice still wins) and again from data-theme="dark".
   ===================================================================== */
:root{
  /* ---- Type & metrics (theme independent) ---- */
  --font-display:"Archivo",system-ui,sans-serif;
  --font-body:"Instrument Sans",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --radius:14px;
  --radius-sm:10px;
  --sidebar:252px;
  --topbar:60px;
  /* Shared content measure: the page and the top bar align on it. */
  --measure:1560px;

  /* ---- Fixed surfaces: these panels stay dark in both themes ----
     Code blocks read as terminals and the auth aside is a brand panel,
     so their colours must not follow the theme. */
  --code-bg:#0A0A24;
  --code-fg:#C9D1E4;
  --code-key:#18CD8E;
  --code-str:#9FD0FF;
  --code-num:#F0A868;
  --code-com:#7B84A8;
  --code-line:rgba(255,255,255,.09);
  --aside-1:#0A0A26;
  --aside-2:#0E0E30;
  --aside-3:#0A1F2E;
  --aside-text:#E7EAF6;
  --aside-text-2:#AEB4CD;
  --aside-muted:#6F78A0;
  --aside-accent:#18CD8E;

  /* ---- Light palette (the base) ----
     Neutrals carry a slight ink bias so greys read as chosen, not default. */
  color-scheme:light;
  --bg:#F4F6FB;
  --bg-nav:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F1F3F9;
  --surface-3:#E7EBF5;
  --chip:#EFF2F9;
  --field:#FAFBFE;
  --field-focus:#FFFFFF;
  --hover:rgba(8,8,32,.045);
  --hover-2:rgba(8,8,32,.075);

  --text:#080820;
  --text-2:#3B4462;
  --muted:#55607D;
  --muted-2:#626B88;
  --placeholder:#767E99;

  --line:rgba(8,8,32,.11);
  --line-2:rgba(8,8,32,.17);
  --line-strong:rgba(8,8,32,.30);

  /* Emerald fails contrast as text on white (1.9:1), so brand text is pine
     (4.9:1) while fills stay emerald with dark type on top. */
  --brand:#0A6B4A;
  --brand-fill:#18CD8E;
  --brand-fill-hover:#13BC80;
  --brand-on:#06121A;
  --brand-soft:rgba(24,205,142,.16);
  --brand-soft-2:rgba(24,205,142,.26);
  --brand-line:rgba(10,107,74,.32);
  --brand-line-strong:rgba(10,107,74,.58);
  --ring:rgba(24,205,142,.28);

  --warn:#8A5B00;
  --warn-strong:#5C3D00;
  --warn-soft:rgba(255,176,32,.18);
  --warn-line:rgba(138,91,0,.30);

  --danger:#C0272E;
  --danger-soft:rgba(192,39,46,.10);
  --danger-line:rgba(192,39,46,.35);
  --ring-danger:rgba(192,39,46,.18);
  --sold:#B3242B;
  --sold-bg:rgba(192,39,46,.09);

  --scrim:rgba(8,8,32,.45);
  --nav-bg:rgba(255,255,255,.86);
  --shadow-card:0 1px 2px rgba(8,8,32,.05),0 10px 24px -20px rgba(8,8,32,.45);
  --shadow-pop:0 16px 40px -14px rgba(8,8,32,.30);
  --shadow-side:0 0 60px rgba(8,8,32,.20);
}

/* Dark comes from the OS unless the user explicitly picked light... */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#080820;
    --bg-nav:#0C0C29;
    --surface:#101030;
    --surface-2:#15153A;
    --surface-3:#1B1B45;
    --chip:rgba(255,255,255,.06);
    --field:#101030;
    --field-focus:#15153A;
    --hover:rgba(255,255,255,.055);
    --hover-2:rgba(255,255,255,.08);

    --text:#E7EAF6;
    --text-2:#AEB4CD;
    --muted:#8A93B3;
    --muted-2:#7E87A8;
    --placeholder:#5C6484;

    --line:rgba(255,255,255,.09);
    --line-2:rgba(255,255,255,.15);
    --line-strong:rgba(255,255,255,.32);

    --brand:#18CD8E;
    --brand-fill:#18CD8E;
    --brand-fill-hover:#31DBA0;
    --brand-on:#06121A;
    --brand-soft:rgba(24,205,142,.11);
    --brand-soft-2:rgba(24,205,142,.20);
    --brand-line:rgba(24,205,142,.28);
    --brand-line-strong:rgba(24,205,142,.45);
    --ring:rgba(24,205,142,.16);

    --warn:#FFD07A;
    --warn-strong:#FFFFFF;
    --warn-soft:rgba(255,176,32,.10);
    --warn-line:rgba(255,176,32,.30);

    --danger:#FF5C63;
    --danger-soft:rgba(255,92,99,.10);
    --danger-line:rgba(255,92,99,.40);
    --ring-danger:rgba(255,92,99,.14);
    --sold:rgba(255,120,126,.92);
    --sold-bg:rgba(255,92,99,.07);

    --scrim:rgba(4,4,16,.72);
    --nav-bg:rgba(8,8,32,.86);
    --shadow-card:none;
    --shadow-pop:0 16px 40px -14px rgba(0,0,0,.70);
    --shadow-side:0 0 60px rgba(0,0,0,.50);
  }
}

/* ...and the explicit choice wins in the other direction too. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#080820;
  --bg-nav:#0C0C29;
  --surface:#101030;
  --surface-2:#15153A;
  --surface-3:#1B1B45;
  --chip:rgba(255,255,255,.06);
  --field:#101030;
  --field-focus:#15153A;
  --hover:rgba(255,255,255,.055);
  --hover-2:rgba(255,255,255,.08);

  --text:#E7EAF6;
  --text-2:#AEB4CD;
  --muted:#8A93B3;
  --muted-2:#7E87A8;
  --placeholder:#5C6484;

  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.15);
  --line-strong:rgba(255,255,255,.32);

  --brand:#18CD8E;
  --brand-fill:#18CD8E;
  --brand-fill-hover:#31DBA0;
  --brand-on:#06121A;
  --brand-soft:rgba(24,205,142,.11);
  --brand-soft-2:rgba(24,205,142,.20);
  --brand-line:rgba(24,205,142,.28);
  --brand-line-strong:rgba(24,205,142,.45);
  --ring:rgba(24,205,142,.16);

  --warn:#FFD07A;
  --warn-strong:#FFFFFF;
  --warn-soft:rgba(255,176,32,.10);
  --warn-line:rgba(255,176,32,.30);

  --danger:#FF5C63;
  --danger-soft:rgba(255,92,99,.10);
  --danger-line:rgba(255,92,99,.40);
  --ring-danger:rgba(255,92,99,.14);
  --sold:rgba(255,120,126,.92);
  --sold-bg:rgba(255,92,99,.07);

  --scrim:rgba(4,4,16,.72);
  --nav-bg:rgba(8,8,32,.86);
  --shadow-card:none;
  --shadow-pop:0 16px 40px -14px rgba(0,0,0,.70);
  --shadow-side:0 0 60px rgba(0,0,0,.50);
}