/*
 * ELVORA design tokens
 * Quiet luxury, expressed through warm neutrals, precise type and measured space.
 */

:root {
    color-scheme: light;

    /* Colour */
    --color-canvas: #f6f2ec;
    --color-canvas-deep: #eee8e0;
    --color-surface: #ffffff;
    --color-surface-soft: #fbf9f6;
    --color-ink: #15120f;
    --color-ink-strong: #0c0b0a;
    --color-ink-soft: #514a43;
    --color-ink-muted: #756d65;
    --color-metal: #a87550;
    --color-metal-soft: #c9a78d;
    --color-metal-deep: #6f452f;
    --color-line: #ddd6ce;
    --color-line-strong: #beb4a9;
    --color-charcoal: #171614;
    --color-charcoal-soft: #24211e;
    --color-metal-black: #151719;
    --color-metal-black-soft: #292c2f;
    --surface-metal-black: linear-gradient(118deg, #111214 0%, #24272a 24%, #121315 48%, #303337 68%, #151719 100%);
    --surface-metal-black-soft: linear-gradient(132deg, #202225 0%, #303337 36%, #1b1d20 63%, #292c30 100%);
    --color-success: #245b45;
    --color-danger: #9f3e38;
    --color-focus: #805337;
    --color-white: #ffffff;

    /* Type */
    --font-ui: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Baskerville, Georgia, serif;
    --font-size-2xs: 0.6875rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-body: clamp(0.96875rem, 0.92rem + 0.15vw, 1.0625rem);
    --font-size-lg: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
    --font-size-h3: clamp(1.5rem, 1.25rem + 0.65vw, 2rem);
    --font-size-h2: clamp(2.25rem, 1.75rem + 1.75vw, 3.75rem);
    --font-size-h1: clamp(2.875rem, 2.1rem + 3vw, 5.75rem);
    --font-size-hero: clamp(4rem, 2.5rem + 6.25vw, 9rem);
    --leading-tight: 0.94;
    --leading-heading: 1.04;
    --leading-body: 1.68;
    --tracking-tight: -0.045em;
    --tracking-heading: -0.025em;
    --tracking-label: 0.18em;

    /* 4/8 based spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-28: 7rem;
    --space-32: 8rem;
    --space-36: 9rem;

    /* Layout */
    --shell-max: 90rem;
    --shell-gutter: clamp(1rem, 3.25vw, 3rem);
    --reading-max: 46rem;
    --section-space: clamp(4.5rem, 8.5vw, 9rem);
    --section-space-compact: clamp(3rem, 5vw, 5.5rem);
    --announcement-height: 2.25rem;
    --header-height: 5rem;
    --header-offset: calc(var(--announcement-height) + var(--header-height));

    /* Shape and depth */
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-round: 999px;
    --shadow-lift: 0 1.5rem 4rem rgba(30, 22, 17, 0.09);
    --shadow-panel: 0 2rem 5rem rgba(20, 16, 13, 0.18);

    /* Motion */
    --duration-fast: 160ms;
    --duration-base: 220ms;
    --duration-slow: 320ms;
    --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-exit: cubic-bezier(0.4, 0, 1, 1);

    /* Layers */
    --z-header: 40;
    --z-menu: 45;
    --z-overlay: 80;
    --z-toast: 100;
}

@media (max-width: 63.99rem) {
    :root {
        --announcement-height: 2rem;
        --header-height: 4.5rem;
        --shell-gutter: clamp(1rem, 3.5vw, 2rem);
    }
}

@media (max-width: 47.99rem) {
    :root {
        --shell-gutter: clamp(1rem, 4.8vw, 1.25rem);
        --section-space: clamp(3.75rem, 17vw, 5.5rem);
        --section-space-compact: clamp(2.5rem, 11vw, 4rem);
    }
}