/* Rookery Isles design tokens.
   Eyedroppered from the official splash art.
   Components reference these variables, never raw hex. */

:root {
  /* Backgrounds: deep wine / plum range */
  --bg-primary:    #1a0e14;
  --bg-secondary:  #2a1620;
  --bg-tertiary:   #3a1f2c;
  --bg-mist:       #4a2d3e;

  /* Cream: wordmark + phoenix highlights */
  --cream-bright:  #f4ead2;
  --cream-primary: #e8dcc0;
  --cream-muted:   #b8a888;

  /* Gold: warm, never yellow */
  --gold-primary:  #c8a878;
  --gold-bright:   #d8bc8c;
  --gold-deep:     #8a6b40;

  /* Wine: plume, cape, deep sails */
  --wine-primary:  #6b1f2a;
  --wine-bright:   #8a2e38;
  --wine-deep:     #4a121a;

  /* Text */
  --text-primary:  #e0d5b8;
  --text-bright:   #f4ead2;
  --text-muted:    #a89890;
  --text-dim:      #786860;

  /* Borders */
  --border-subtle: #3d2230;
  --border-gold:   #6a4830;

  /* Status indicators */
  --status-online:  #5aa84b;
  --status-offline: #a84b5a;

  /* Shadows */
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-deep: 0 12px 32px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 28px rgba(200, 168, 120, 0.20);

  /* Typography */
  --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --font-body:    'EB Garamond', 'Garamond', 'Georgia', serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Spacing scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 9rem;

  /* Layout */
  --max-w-content: 1280px;
  --max-w-prose:   72ch;
  --header-h:      80px;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
}

/* Container widens on large monitors so 4K and ultrawide users don't see
   a narrow centered column floating in dead space. Phone and laptop sizes
   keep the 1280 default that the rest of the design is tuned for. */
@media (min-width: 1800px) {
  :root { --max-w-content: 1480px; }
}
@media (min-width: 2400px) {
  :root { --max-w-content: 1720px; }
}
@media (min-width: 3200px) {
  :root { --max-w-content: 2000px; }
}