/* =============================================================================
   Avielon Studio · Design tokens (canonical)
   Mirrors avielon-studio-theme-tokens.md. This is the single source of truth for
   colour + type + layout scale. Never hardcode a hex — reference the token.
   Load this BEFORE site.css.
============================================================================= */
:root {
  /* Typefaces */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Colour — light (default) */
  --color-background: #F7F5F0;
  --color-surface: #FDFCFA;
  --color-surface-elevated: #FFFFFF;
  --color-text-primary: #1C1B18;
  --color-text-secondary: #56534C;
  --color-border: #D9D5C9;
  --color-accent: #0C6E6A;
  --color-accent-hover: #095753;
  --color-on-accent: #FFFFFF;
  --color-focus-ring: #0C6E6A;

  /* Layout scale */
  --maxw: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --radius: 4px;
}

/* Manual override (set by the toggle, persisted, applied pre-paint in _Layout) */
:root[data-theme='dark'] {
  --color-background: #131210;
  --color-surface: #1B1A17;
  --color-surface-elevated: #24221E;
  --color-text-primary: #F2EFE8;
  --color-text-secondary: #A8A39A;
  --color-border: #2E2C27;
  --color-accent: #4FC6BC;
  --color-accent-hover: #69D6CD;
  --color-on-accent: #0B1413;
  --color-focus-ring: #4FC6BC;
}

/* OS preference, only until the user has chosen explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-background: #131210;
    --color-surface: #1B1A17;
    --color-surface-elevated: #24221E;
    --color-text-primary: #F2EFE8;
    --color-text-secondary: #A8A39A;
    --color-border: #2E2C27;
    --color-accent: #4FC6BC;
    --color-accent-hover: #69D6CD;
    --color-on-accent: #0B1413;
    --color-focus-ring: #4FC6BC;
  }
}