/**
 * Editorial Serenity — design tokens
 * Light/dark: same layout; only color, shadow, and tonal layers change.
 */

/* Shared: spacing, radii, motion, font stacks (not mode-specific) */
:root {
    --font-heading: "Noto Serif", Georgia, "Times New Roman", serif;
    --font-body: "Manrope", Inter, system-ui, -apple-system, sans-serif;
    --font-ui: "Manrope", Inter, system-ui, -apple-system, sans-serif;

    --space-base: 8px;
    --space-xs: 4px;
    --space-sm: 12px;
    --space-md: 24px;
    --space-lg: 48px;
    --space-xl: 80px;
    /* Site-wide section rhythm (tour / music / gallery / about) */
    --space-section-y: 4.25rem;
    --space-section-y-lg: 6rem;
    --space-section-title-gap: 1.75rem;
    --space-section-title-gap-lg: 2rem;
    --space-gutter: 24px;
    --space-grid-margin: 40px;
    --container-max: 1280px;

    --radius-default: 4px;
    --radius-card: 8px;
    --radius-button: 4px;
    --radius-input: 4px;
    --radius-media: 0px;

    --duration-fast: 200ms;
    --duration-normal: 240ms;
    --duration-slow: 300ms;
    --ease-premium: ease;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.9rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 1.75rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    --font-size-5xl: clamp(2.25rem, 5vw, 3rem);
    --font-size-6xl: clamp(2.5rem, 6vw, 3.5rem);

    --text-h1-size: clamp(2.25rem, 5vw, 3.5rem);
    --text-h1-line: 1.15;
    --text-h1-track: -0.02em;
    --text-h2-size: clamp(1.75rem, 4vw, 2.5rem);
    --text-h2-line: 1.25;
    --text-h2-track: -0.01em;
    --text-h3-size: clamp(1.35rem, 3vw, 1.75rem);
    --text-h3-line: 1.35;
    --text-body-lg-size: 1.125rem;
    --text-body-lg-line: 1.6;
    --text-body-md-size: 1rem;
    --text-body-md-line: 1.6;
    --text-label-size: 0.75rem;
    --text-label-line: 1.2;
    --text-label-track: 0.12em;

    /* Hero overlay text (high contrast on photography) */
    --color-hero-foreground: #f5f5f5;

    --transition: color var(--duration-normal) var(--ease-premium),
        background-color var(--duration-normal) var(--ease-premium),
        border-color var(--duration-normal) var(--ease-premium),
        box-shadow var(--duration-normal) var(--ease-premium),
        transform var(--duration-normal) var(--ease-premium);

    /* Legacy font aliases (body UI = Manrope) */
    --font-primary: var(--font-ui);
    --font-secondary: var(--font-body);
}

[data-theme="dark"] {
    --color-background: #131313;
    --color-surface: #131313;
    --color-surface-container: #20201f;
    --color-surface-container-high: #2a2a2a;
    --color-surface-container-highest: #353535;
    --color-on-surface: #e5e2e1;
    --color-on-surface-variant: #c4c7c7;
    --color-outline: #444748;
    --color-placeholder: #a8a5a2;
    --color-primary: #c9c6c5;
    --color-on-primary: #313030;
    --color-accent: #e2c19b;
    --color-on-accent: #291801;
    --color-error: #ffb4ab;

    --color-btn-primary-hover-bg: #c9c6c5;
    --color-btn-primary-hover-fg: #131313;
    --color-secondary-btn-hover-bg: #2a2a2a;

    --shadow-card: none;
    --shadow-elevated: none;

    /* Legacy / bridge tokens */
    --bg-primary: var(--color-background);
    --bg-secondary: var(--color-surface);
    --text-primary: var(--color-on-surface);
    --text-secondary: var(--color-on-surface-variant);
    --text-color: var(--color-on-surface);
    --header-bg: var(--color-surface);
    --border-color: var(--color-outline);
    --card-bg: var(--color-surface-container);
    --accent-color: var(--color-accent);
    --accent-hover: var(--color-btn-primary-hover-bg);
    --primary-color: var(--color-accent);
    --primary-color-rgb: 226, 193, 155;
    --hover-bg: var(--color-surface-container-high);
    --overlay-color: rgba(19, 19, 19, 0.82);
    --shadow-color: rgba(0, 0, 0, 0.12);

    /* Old palette names used in a few rules */
    --color-dark: #131313;
    --color-grey: var(--color-surface-container-high);
    --color-light: var(--color-hero-foreground);
    --color-orange: var(--color-accent);
    --color-orange-hover: var(--color-btn-primary-hover-bg);
}

[data-theme="light"] {
    --color-background: #f9f9f9;
    --color-surface: #ffffff;
    --color-surface-container: #f3f3f3;
    --color-surface-container-high: #eeeeee;
    --color-surface-container-highest: #e2e2e2;
    --color-on-surface: #1a1c1c;
    --color-on-surface-variant: #444748;
    --color-outline: #c4c7c8;
    --color-placeholder: #5c5a58;
    --color-primary: #5d5f5f;
    --color-on-primary: #ffffff;
    --color-accent: #c5a059;
    --color-on-accent: #ffffff;
    --color-error: #ba1a1a;

    --color-btn-primary-hover-bg: #a98236;
    --color-btn-primary-hover-fg: #ffffff;
    --color-secondary-btn-hover-bg: #f3f3f3;

    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.03);
    --shadow-elevated: 0 10px 30px rgba(0, 0, 0, 0.03);

    --bg-primary: var(--color-background);
    --bg-secondary: var(--color-surface);
    --text-primary: var(--color-on-surface);
    --text-secondary: var(--color-on-surface-variant);
    --text-color: var(--color-on-surface);
    --header-bg: var(--color-surface);
    --border-color: var(--color-outline);
    --card-bg: var(--color-surface-container);
    --accent-color: var(--color-accent);
    --accent-hover: var(--color-btn-primary-hover-bg);
    --primary-color: var(--color-accent);
    --primary-color-rgb: 197, 160, 89;
    --hover-bg: var(--color-secondary-btn-hover-bg);
    --overlay-color: rgba(26, 28, 28, 0.65);
    --shadow-color: rgba(0, 0, 0, 0.06);

    --color-dark: #1a1c1c;
    --color-grey: var(--color-surface-container-high);
    --color-light: var(--color-hero-foreground);
    --color-orange: var(--color-accent);
    --color-orange-hover: var(--color-btn-primary-hover-bg);
}