/* ============================================================
   TOKENS : the only place colors live. (D-002: light is default)
   ============================================================ */

:root {
  --font: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* surfaces : warm cream cozy */
  --bg: #F5EEDF;
  --bg-2: #EFE6D2;
  --panel: #FBF7ED;
  --card: #FFFFFF;
  --card-2: #FDFAF2;

  /* ink */
  --ink: #33301F;
  --ink-soft: #5C5644;
  --muted: #9A917B;
  --line: #E7DCC5;
  --line-soft: #F0E8D6;

  /* brand + semantic */
  --accent: #3E9B4F;          /* primary action (green, cozy) */
  --accent-ink: #FFFFFF;
  --accent-soft: #E4F1E0;
  --success: #3E9B4F;
  --danger: #DE5A40;
  --danger-soft: #FAE3DA;
  --warm: #E4573D;            /* tomato, Japan side, hearts */
  --warm-soft: #FBE6DF;
  --blue: #3F6FD8;            /* Italy side, links, trains */
  --blue-soft: #E4EBFA;
  --gold: #DFAF35;
  --gold-soft: #F9EFD2;
  --violet: #8B5CF6;
  --violet-soft: #EDE7FB;

  /* elevation */
  --shadow-1: 0 1px 2px rgba(92, 76, 40, .05), 0 4px 14px rgba(92, 76, 40, .08);
  --shadow-2: 0 2px 6px rgba(92, 76, 40, .07), 0 14px 34px rgba(92, 76, 40, .13);
  --shadow-pop: 0 3px 0 rgba(92, 76, 40, .12);

  /* drop halos : screens use these for filter: drop-shadow(...) and small
     tinted box-shadow accents (flags, glass insets), warm in light (D-024) */
  --shadow-warm-1: rgba(92, 76, 40, .18);
  --shadow-warm-2: rgba(92, 76, 40, .24);
  --drop-1: drop-shadow(0 2px 2px var(--shadow-warm-1));
  --drop-2: drop-shadow(0 4px 5px var(--shadow-warm-2));

  /* internal hairline for flag liserets */
  --line-hairline: rgba(0, 0, 0, .12);

  /* radius */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  color-scheme: light;
}

/* Dark : Spider-Verse / Entergalactic DNA, deliberately softened (D-002) */
:root[data-theme="dark"] {
  --bg: #131126;
  --bg-2: #171432;
  --panel: #1C1840;
  --card: #231F4D;
  --card-2: #282358;

  --ink: #EFECFF;
  --ink-soft: #CBC5EC;
  --muted: #8D86BB;
  --line: #332D63;
  --line-soft: #2A2555;

  --accent: #E85D75;          /* softened neon rose */
  --accent-ink: #FFFFFF;
  --accent-soft: rgba(232, 93, 117, .16);
  --success: #4CC38A;
  --danger: #FF6B5E;
  --danger-soft: rgba(255, 107, 94, .16);
  --warm: #F0566E;
  --warm-soft: rgba(240, 86, 110, .16);
  --blue: #7A6CFF;
  --blue-soft: rgba(122, 108, 255, .18);
  --gold: #F2C14E;
  --gold-soft: rgba(242, 193, 78, .15);
  --violet: #A78BFA;
  --violet-soft: rgba(167, 139, 250, .17);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .25), 0 4px 14px rgba(0, 0, 0, .35);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .3), 0 14px 34px rgba(0, 0, 0, .5);
  --shadow-pop: 0 3px 0 rgba(0, 0, 0, .35);

  --shadow-warm-1: rgba(0, 0, 0, .35);
  --shadow-warm-2: rgba(0, 0, 0, .5);
  --drop-1: drop-shadow(0 2px 2px var(--shadow-warm-1));
  --drop-2: drop-shadow(0 4px 5px var(--shadow-warm-2));

  color-scheme: dark;
}