/* Design tokens. Every colour, size and timing used by the site lives here. */

@layer reset, base, layout, components, content, pages, utilities;

:root {
    color-scheme: light;

    /* Colour: brand */
    --brand: #e44d2e;
    --brand-dark: #c83e22;
    --brand-text: #c83e22;
    --brand-soft: #fdede8;
    --green: #2f7a66;
    --green-dark: #24604f;
    --green-soft: #e6f2ee;
    --gold: #f5a524;

    /* Colour: neutrals */
    --page: #ffffff;
    --surface: #ffffff;
    --surface-muted: #f6f7f9;
    --heading: #272c39;
    --text: #454b5a;
    --text-muted: #5f6676;
    --warm: #faf7f5;
    --warm-strong: #f2ebe7;
    --border: #e7e9ee;
    --border-strong: #d5d9e1;
    --dark: #12151d;
    --dark-surface: #1b1f2a;
    --dark-text: #e9ebf0;
    --dark-muted: #a3a9b6;

    /* Colour: feedback */
    --success: #2f7a66;
    --warning: #9a6a12;
    --error: #c0262d;
    --info: #3563a8;

    /* Translucent surface for the header and bottom bar */
    --bar-bg: rgb(255 255 255 / 0.78);
    --bar-bg-solid: #ffffff;
    --bar-blur: blur(16px) saturate(1.6);

    /* Type */
    --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Type scale. Fixed sizes, no fluid scaling: every size on the site comes
       from one of these steps. Only the three largest change on a wider screen,
       and they change once, at the breakpoint below. Body copy never changes. */
    --text-xs: 0.8125rem;   /* 13px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.375rem;   /* 22px */
    --text-3xl: 1.5rem;     /* 24px */
    --text-4xl: 2.75rem;    /* 44px */

    --leading-tight: 1.12;
    --leading-snug: 1.35;
    --leading: 1.7;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Spacing (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 5rem;
    --section-space: clamp(3.5rem, 2.25rem + 5vw, 6.5rem);
    --gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);

    /* Layout */
    --width: 1200px;
    --width-narrow: 760px;
    --measure: 66ch;
    --header-height: 4.25rem;
    --bottom-bar-height: 4.25rem;

    /* Shape */
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-full: 999px;
    --line: 1px solid var(--border);

    /* Depth */
    --shadow-sm: 0 1px 2px rgb(18 21 29 / 0.05);
    --shadow: 0 12px 32px -12px rgb(18 21 29 / 0.14), 0 2px 6px rgb(18 21 29 / 0.04);
    --shadow-lg: 0 30px 60px -20px rgb(18 21 29 / 0.25);

    /* Motion */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --fast: 150ms;
    --base: 250ms;
    --slow: 900ms;
    --menu-time: 900ms;
    --sheet-time: 700ms;
    /* One curve and one duration for anything arriving on screen: the hero,
       the scroll reveal and the menus. --stagger is the gap between items
       in a group, so a row of cards arrives one after another. */
    --sheet-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --enter: 1200ms;
    --stagger: 120ms;

    /* Stacking */
    --z-header: 50;
    --z-menu: 60;
    --z-bar: 70;
    --z-float: 80;
    --z-toast: 90;
}

/* The one step up in the type scale, at the same breakpoint the reference uses */
@media (min-width: 768px) {
    :root {
        --text-2xl: 1.5rem;     /* 24px */
        --text-3xl: 1.75rem;    /* 28px */
        --text-4xl: 3rem;       /* 48px */
    }
}