/* =============================================================================
   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;

  /* Section rhythm — alternating band backgrounds (see site.css .section--*) */
  --color-section: var(--color-background);   /* base band  */
  --color-section-alt: #EFEBE1;               /* deeper warm tint band */

  /* Contrast band — inverted dark block in light theme (see .section--contrast).
     In dark theme these remap to an elevated panel instead of an inversion. */
  --color-contrast-bg: #1C1B18;
  --color-contrast-surface: #24221E;
  --color-contrast-text: #F2EFE8;
  --color-contrast-text-2: #A8A39A;
  --color-contrast-border: rgba(242, 239, 232, 0.14);
  --color-contrast-accent: #4FC6BC;           /* brightened teal, AA on the dark band */
  --color-contrast-accent-hover: #69D6CD;
  --color-contrast-on-accent: #0B1413;

  /* Gradients — hero + occasional emphasis sections (see .section--gradient).
     -glow layers a faint teal wash in one corner over the neutral gradient. */
  --gradient-hero: radial-gradient(120% 120% at 100% 0%, #FDFCFA 0%, #F2EEE5 55%, #ECE7DC 100%);
  --gradient-hero-glow:
    radial-gradient(90% 80% at 88% 8%, color-mix(in srgb, var(--color-accent) 7%, transparent) 0%, transparent 55%),
    var(--gradient-hero);

  /* Elevation — used by the header mega-menu panels */
  --shadow-elevated: 0 18px 50px -24px rgba(20, 18, 14, 0.30);

  /* Layout scale */
  --maxw: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-y: clamp(4rem, 9vw, 7rem);
  --radius: 4px;
}
@media (min-width: 1280px) {
    :root {
        --gutter: 0;
    }
}

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

  /* Section rhythm — in dark, the alt band steps LIGHTER (toward surface) */
  --color-section: var(--color-background);
  --color-section-alt: #1B1A17;

  /* Contrast band — remaps to an elevated panel (a dark band can't stand out
     on an already-dark page), so it reads as "raised" rather than inverted */
  --color-contrast-bg: #24221E;
  --color-contrast-surface: #2E2C27;
  --color-contrast-text: #F2EFE8;
  --color-contrast-text-2: #A8A39A;
  --color-contrast-border: rgba(242, 239, 232, 0.10);
  --color-contrast-accent: #4FC6BC;
  --color-contrast-accent-hover: #69D6CD;
  --color-contrast-on-accent: #0B1413;

  /* Gradients — deeper stops; the teal glow carries stronger on dark */
  --gradient-hero: radial-gradient(120% 120% at 100% 0%, #1E1C18 0%, #16150F 60%, #100F0C 100%);
  --gradient-hero-glow:
    radial-gradient(90% 80% at 88% 8%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 55%),
    var(--gradient-hero);

  --shadow-elevated: 0 20px 54px -22px rgba(0, 0, 0, 0.66);
}

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

    --color-section: var(--color-background);
    --color-section-alt: #1B1A17;

    --color-contrast-bg: #24221E;
    --color-contrast-surface: #2E2C27;
    --color-contrast-text: #F2EFE8;
    --color-contrast-text-2: #A8A39A;
    --color-contrast-border: rgba(242, 239, 232, 0.10);
    --color-contrast-accent: #4FC6BC;
    --color-contrast-accent-hover: #69D6CD;
    --color-contrast-on-accent: #0B1413;

    --gradient-hero: radial-gradient(120% 120% at 100% 0%, #1E1C18 0%, #16150F 60%, #100F0C 100%);
    --gradient-hero-glow:
      radial-gradient(90% 80% at 88% 8%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 55%),
      var(--gradient-hero);

    --shadow-elevated: 0 20px 54px -22px rgba(0, 0, 0, 0.66);
  }
}