/* ============================================================
   אספן — Design tokens
   קונספט: מגש של צורף. ה-UI נסוג, הקלפים הם הצבע.
   ============================================================ */

:root{
  /* ---- surfaces (light: cool paper, deliberately not cream) ---- */
  --bg:#EEF1F6;
  --surface:#FFFFFF;
  --surface-2:#F5F7FA;
  --surface-3:#EBEFF5;
  --line:#DCE2EB;
  --line-soft:#E8ECF2;
  --card-well:#E3E8EF;

  /* ---- ink ---- */
  --ink:#141A22;
  --ink-2:#4A5666;
  --ink-3:#7C8798;

  /* ---- accent: gold = rarity, value, grading ---- */
  --gold:#A9761B;
  --gold-2:#C79236;
  --gold-soft:#F6E9CE;
  --gold-ink:#7A540F;
  --on-gold:#FFFFFF;

  /* ---- semantic (separate from accent) ---- */
  --good:#1E7F5F;   --good-bg:#DFF2EA;
  --warn:#9A6A10;   --warn-bg:#FBF0D8;
  --bad:#B44A3B;    --bad-bg:#FBE4E0;
  --info:#2A5F94;   --info-bg:#E2ECF7;

  /* ---- elevation ---- */
  --shadow:0 1px 2px rgba(20,26,34,.06), 0 8px 24px rgba(20,26,34,.08);
  --shadow-lift:0 2px 6px rgba(20,26,34,.10), 0 18px 48px rgba(20,26,34,.16);
  --shadow-card:0 8px 24px rgba(20,26,34,.16);
  --ambient:radial-gradient(1200px 700px at 50% -10%, #FFFFFF 0%, #E4E9F1 60%, #D9DFE9 100%);

  /* ---- type ---- */
  --f-display:'Secular One', system-ui, sans-serif;
  --f-body:'Assistant', system-ui, 'Segoe UI', sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* ---- geometry ---- */
  --r-sm:7px; --r-md:11px; --r-lg:14px; --r-xl:18px; --r-pill:999px;
  --shell:480px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1117;
    --surface:#161C25;
    --surface-2:#1D242F;
    --surface-3:#232B38;
    --line:#2A323F;
    --line-soft:#222A35;
    --card-well:#0B0F15;

    --ink:#E9EEF5;
    --ink-2:#A6B2C2;
    --ink-3:#717F91;

    --gold:#F2B441;
    --gold-2:#D99B2C;
    --gold-soft:rgba(242,180,65,.13);
    --gold-ink:#F5C86E;
    --on-gold:#141A22;

    --good:#3FBF8F;  --good-bg:rgba(63,191,143,.13);
    --warn:#E2AE4A;  --warn-bg:rgba(226,174,74,.13);
    --bad:#E4796A;   --bad-bg:rgba(228,121,106,.13);
    --info:#6FA8DC;  --info-bg:rgba(111,168,220,.13);

    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
    --shadow-lift:0 2px 8px rgba(0,0,0,.55), 0 24px 60px rgba(0,0,0,.55);
    --shadow-card:0 10px 30px rgba(0,0,0,.55);
    --ambient:radial-gradient(1100px 700px at 50% -5%, #18202B 0%, #0F141B 55%, #090C11 100%);
  }
}

:root[data-theme="dark"]{
  --bg:#0D1117; --surface:#161C25; --surface-2:#1D242F; --surface-3:#232B38;
  --line:#2A323F; --line-soft:#222A35; --card-well:#0B0F15;
  --ink:#E9EEF5; --ink-2:#A6B2C2; --ink-3:#717F91;
  --gold:#F2B441; --gold-2:#D99B2C; --gold-soft:rgba(242,180,65,.13);
  --gold-ink:#F5C86E; --on-gold:#141A22;
  --good:#3FBF8F;  --good-bg:rgba(63,191,143,.13);
  --warn:#E2AE4A;  --warn-bg:rgba(226,174,74,.13);
  --bad:#E4796A;   --bad-bg:rgba(228,121,106,.13);
  --info:#6FA8DC;  --info-bg:rgba(111,168,220,.13);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.4);
  --shadow-lift:0 2px 8px rgba(0,0,0,.55), 0 24px 60px rgba(0,0,0,.55);
  --shadow-card:0 10px 30px rgba(0,0,0,.55);
  --ambient:radial-gradient(1100px 700px at 50% -5%, #18202B 0%, #0F141B 55%, #090C11 100%);
}