@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,800;0,9..144,900;1,9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swapfamily=JetBrains+Mono:wght@500;700&family=JetBrains+Mono:wght@500;700&display=swapfamily=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=JetBrains+Mono:wght@500;700&display=swapdisplay=swap');

:root,
body {
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --ink: #EDF3FB;
  --ink-soft: #9DB2C9;
  --ink-faint: #5d738c;

  --navy-900: #02101f;
  --navy-800: #05172c;
  --navy-700: #0a2540;
  --navy-600: #0e2a49;
  --navy-900-rgb: 2, 16, 31;
  --navy-800-rgb: 5, 23, 44;
  --navy-700-rgb: 10, 37, 64;
  --navy-600-rgb: 14, 42, 73;

  --sea-500: #1A6FD1;
  --sea-300: #6DD7FF;

  --gold: #E7B23E;
  --gold-rgb: 231, 178, 62;
  --brass-300: #F7E3B0;
  --brass-300-rgb: 247, 227, 176;
  --brass-metal: linear-gradient(100deg, #A06E1F, #E7B23E 28%, #F7E3B0 46%, #D49635 64%, #A06E1F);
  --brass-text: linear-gradient(92deg, #C8901F, #F2D27A 50%, #C8901F);

  --line: rgba(150, 190, 235, 0.14);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 18px 40px -16px rgba(15, 23, 42, 0.14), 0 6px 14px rgba(15, 23, 42, 0.04);
}

:root[data-theme="empire"],
body[data-theme="empire"] {
  --bg: #F8F1DF;
  --bg-tint: #F0E6CC;
  --surface: #FFFBF1;
  --surface-2: #F6EDD6;
  --surface-3: #EDE1C2;

  --ink-day: #0B1828;
  --ink-mute: #44516A;
  --ink-day-soft: #7C8497;

  --line-soft: #EFE5C9;
  --line-strong: #C9B888;

  --primary: var(--navy-700);
  --primary-deep: var(--navy-900);
  --primary-tint: #DFE4EE;
  --primary-fg: #FBF3DE;

  --accent: var(--gold);
  --accent-deep: #A06E1F;
  --accent-tint: var(--brass-300);
  --accent-fg: var(--navy-700);

  --secondary: #A8412F;
  --secondary-tint: #EFD3CB;

  --good: #4A6F4E;
  --good-tint: #D8E4D5;
  --warn: #B98427;
  --warn-tint: #F4E2B8;
  --bad: #A8412F;
  --bad-tint: #EFD3CB;
  --info: #2A5680;
  --info-tint: #DCE5EF;

  --paper-grain:
    radial-gradient(circle at 20% 20%, rgba(168, 65, 47, 0.02) 0, transparent 60%),
    radial-gradient(circle at 80% 60%, rgba(var(--gold-rgb), 0.025) 0, transparent 60%);

  --hex-fill: var(--primary);
  --hex-stroke: var(--accent);
  --hex-letter: var(--accent);
  --hex-bg: var(--surface);

  --jersey-blue: var(--primary);
  --jersey-gold: var(--accent);
  --bg-light: var(--bg);
  --shell-bg: var(--bg);
  --shell-card: var(--surface);
  --shell-border: var(--line-soft);

  --ha-navy: var(--navy-700);
  --ha-navy-rgb: var(--navy-700-rgb);
  --ha-ink: var(--ink-day);
  --ha-blue: var(--sea-500);
  --ha-blue-soft: #EFF6FF;
  --ha-gold: var(--gold);
  --ha-gold-rgb: var(--gold-rgb);
  --ha-gold-deep: var(--accent-deep);
  --ha-gold-soft: var(--brass-300);
  --ha-shell: #F8FAFC;
  --ha-white: #FFFFFF;
  --ha-line: #DBEAFE;
  --ha-muted: #475569;
  --ha-green: #16A34A;
  --ha-red: #DC2626;
  --ha-shadow: 0 16px 38px rgba(15, 23, 42, 0.11);
  --ha-soft-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

[data-theme="empire"] {
  background: var(--bg);
  background-image: var(--paper-grain);
}

/* ====================================================================
   THEME B - Granite & Tide (cool minimalist, deep teal). CR0304.
   Overrides BOTH semantic tokens AND base navy/gold/sea/brass palette so
   ~150 direct var(--navy)/var(--gold) consumers + derived --je- and --ha-
   families shift to Granite automatically. Hardcoded brand-hex literals in
   component CSS are swept separately (CR0304).
   ==================================================================== */
body[data-theme="empire"]:not(.player-play-app) {
  --navy-900: #0B404E;
  --navy-800: #0B404E;
  --navy-700: #145C6E;
  --navy-600: #1A6B80;
  --navy-900-rgb: 11, 64, 78;
  --navy-800-rgb: 11, 64, 78;
  --navy-700-rgb: 20, 92, 110;
  --navy-600-rgb: 26, 107, 128;

  --sea-500: #2F6E8A;
  --sea-300: #6DA9C4;

  --gold: #B6864E;
  --gold-rgb: 182, 134, 78;
  --brass-300: #E9D9B8;
  --brass-300-rgb: 233, 217, 184;
  --brass-metal: linear-gradient(100deg, #8E6638, #B6864E 30%, #E9D9B8 50%, #B6864E 70%, #8E6638);
  --brass-text: linear-gradient(92deg, #9C7140, #C9A063 50%, #9C7140);

  --line: #DFE2DC;

  --bg: #F4F5F1;
  --bg-tint: #ECEEEA;
  --surface: #FFFFFF;
  --surface-2: #F8F9F5;
  --surface-3: #ECEEEA;

  --ink-day: #131820;
  --ink-mute: #56606E;
  --ink-day-soft: #8A93A1;

  --line-soft: #ECEEEA;
  --line-strong: #C9CFC6;

  --primary: #145C6E;
  --primary-deep: #0B404E;
  --primary-tint: #DDEAEE;
  --primary-fg: #F4F5F1;

  --accent: #6E8B6A;
  --accent-deep: #4F6A4D;
  --accent-tint: #DDE6D8;
  --accent-fg: #FFFFFF;

  --secondary: #B6864E;
  --secondary-tint: #F0E2C8;

  --good: #4F7A55;
  --good-tint: #DCE9D6;
  --warn: #B6864E;
  --warn-tint: #F0E2C8;
  --bad: #A8453F;
  --bad-tint: #F0D3CE;
  --info: #2F6E8A;
  --info-tint: #D8E7EE;

  --paper-grain:
    radial-gradient(circle at 20% 20%, rgba(20, 92, 110, 0.02) 0, transparent 60%),
    radial-gradient(circle at 80% 60%, rgba(110, 139, 106, 0.02) 0, transparent 60%);

  --hex-fill: var(--primary);
  --hex-stroke: var(--accent);
  --hex-letter: var(--bg);
  --hex-bg: var(--surface);

  --jersey-blue: var(--primary);
  --jersey-gold: var(--secondary);
  --bg-light: var(--bg);
  --shell-bg: var(--bg);
  --shell-card: var(--surface);
  --shell-border: var(--line-soft);

  --ha-navy: var(--primary);
  --ha-navy-rgb: 20, 92, 110;
  --ha-ink: var(--ink-day);
  --ha-blue: var(--info);
  --ha-blue-soft: var(--info-tint);
  --ha-gold: var(--secondary);
  --ha-gold-rgb: 182, 134, 78;
  --ha-gold-deep: #8E6638;
  --ha-gold-soft: var(--secondary-tint);
  --ha-shell: var(--surface-2);
  --ha-white: #FFFFFF;
  --ha-line: var(--line-soft);
  --ha-muted: var(--ink-mute);
  --ha-green: var(--good);
  --ha-red: var(--bad);
  --ha-shadow: 0 16px 38px rgba(15, 23, 42, 0.11);
  --ha-soft-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);

  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
}

body[data-theme="empire"]:not(.player-play-app) {
  background: var(--bg);
  background-image: var(--paper-grain);
}