@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root,
body {
  --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);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

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

  --primary: #0A2540;
  --primary-deep: #03132A;
  --primary-tint: #DFE4EE;
  --primary-fg: #FBF3DE;

  --accent: #D49635;
  --accent-deep: #A06E1F;
  --accent-tint: #F7E3B0;
  --accent-fg: #0A2540;

  --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;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', SFMono-Regular, monospace;
  --paper-grain:
    radial-gradient(circle at 20% 20%, rgba(168, 65, 47, 0.02) 0px, transparent 60%),
    radial-gradient(circle at 80% 60%, rgba(212, 150, 53, 0.025) 0px, transparent 60%);

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

  --jersey-blue: var(--primary);
  --gold: var(--accent);
  --bg: #F8F1DF;
  --shell-bg: var(--bg);
  --surface: var(--surface);
  --chance: #3b82f6;
  --community: #f59e0b;
  --line-soft: var(--line);
}

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