@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=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);
  --chance: #3B82F6;
  --community: #F59E0B;

  --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.12);
  --ha-soft-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

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