html {
  /* Brand — deep forest / parchment / gold */
  --color-1: #d4b45a;
  --color-2: #6dbf8a;

  --color-primary-surface: #0f1410;
  --color-primary-surface-raised: #172019;
  --color-primary-surface-overlay: #243028;
  --color-primary-text: #efe8d6;
  --color-primary-text-muted: #a39b88;
  --color-primary-text-bold: #d4b45a;

  --color-secondary-surface: #1a241c;
  --color-secondary-text: #efe8d6;
  --color-secondary-text-muted: #8f8776;

  --color-accent: #6dbf8a;
  --color-error: #ff6b5a;
  --color-danger: #e84a3a;
  --color-warning: #f0c14b;
  --color-success: #4caf7a;
  --color-illegal: #ff8a65;
  --color-parchment: #f4e7c4;
  --color-ink: #1c1812;

  --size-8x: 300px;
  --size-7x: 250px;
  --size-6x: 200px;
  --size-5x: 150px;
  --size-4x: 100px;
  --size-3x: 60px;
  --size-2x: 48px;
  --size-xl: 32px;
  --size-large: 20px;
  --size-medium: 12px;
  --size-small: 8px;
  --size-tiny: 4px;

  --font-xl: 28px;
  --font-large: 22px;
  --font-medium: 16px;
  --font-small: 14px;
  --font-tiny: 12px;
  --line-height: 1.55;
  --font-family: "Inter", system-ui, sans-serif;
  --font-family-display: "Cinzel", Georgia, serif;

  --border-normal: 1px solid rgba(212, 180, 90, 0.16);
  --border-active: 1px solid var(--color-1);
  --border-radius-small: 8px;
  --border-radius-medium: 14px;
  --border-radius-large: 22px;

  --shadow-normal: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-active: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 24px rgba(212, 180, 90, 0.14);

  --time-fast: 180ms;
  --time-normal: 320ms;
  --content-width: 1100px;
  --touch-min: 44px;

  margin: 0;
  padding: 0;
  background-color: var(--color-primary-surface);
  color-scheme: dark;
  scrollbar-color: var(--color-primary-text-muted) var(--color-primary-surface);
}

html[data-theme="light"] {
  --color-1: #8a6a1f;
  --color-2: #2f7d52;
  --color-primary-surface: #f6f0e2;
  --color-primary-surface-raised: #fffaf0;
  --color-primary-surface-overlay: #ebe2cd;
  --color-primary-text: #1c1812;
  --color-primary-text-muted: #5c5648;
  --color-primary-text-bold: #8a6a1f;
  --color-secondary-surface: #efe6d2;
  --color-secondary-text: #1c1812;
  --color-secondary-text-muted: #6a6354;
  --border-normal: 1px solid rgba(138, 106, 31, 0.2);
  color-scheme: light;
}

body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(212, 180, 90, 0.08), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(109, 191, 138, 0.06), transparent 50%), var(--color-primary-surface);
  color: var(--color-primary-text);
  font-size: var(--font-medium);
  font-family: var(--font-family);
  line-height: var(--line-height);
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

* {
  box-sizing: border-box;
}

a {
  color: var(--color-1);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-1);
  outline-offset: 2px;
}

@media print {
  body {
    background: white;
    color: black;
  }
  legendary-app {
    --print-mode: 1;
  }
}