/* ==========================================================================
   Design tokens
   --------------------------------------------------------------------------
   The single source of truth for every global visual value. Components consume
   these variables; they never hardcode colours, sizes, spacing, radii, shadows
   or timings of their own.

   Light theme only, by design (DESIGN.md 2.1). There is no dark palette and no
   theme switcher.
   ========================================================================== */

:root {
    color-scheme: light;

    /* ----------------------------------------------------------------------
       Colour — warm neutrals so photography sits on paper, not on a screen.
       Contrast is verified by apps/core/tests/test_design_tokens.py; changing
       a value here without checking that test will break the build.
       ---------------------------------------------------------------------- */

    --color-bg-primary: #f7f3ee;      /* warm off-white — default page ground */
    --color-bg-secondary: #efe8de;    /* alternating bands, quieter sections */
    --color-surface: #ffffff;         /* cards, raised surfaces */
    --color-surface-sunken: #f1e9e0;  /* insets, image placeholders, accent wash */

    --color-text-primary: #1f1c18;    /* headings and body copy — 15.4:1 */
    --color-text-secondary: #6f685f;  /* supporting copy, metadata — 4.97:1 */
    --color-text-on-accent: #ffffff;
    /* Type and controls laid over photography. Not the same idea as a brand
       colour: it has to hold against whatever the photograph happens to be. */
    --color-on-image: #ffffff;
    --color-on-image-veil: rgb(255 255 255 / 0.14);
    --color-on-image-edge: rgb(255 255 255 / 0.55);

    --color-border: #d8d0c5;          /* hairlines and dividers (decorative) */
    --color-border-strong: #978771;   /* interactive boundaries — 3.16:1 */

    /* The brand accent reads beautifully as a fill but only reaches 4.42:1 on
       the page ground, so accent-coloured *text* uses the darker variant.
       Two tokens, so a component cannot accidentally pick the failing one. */
    --color-accent: #8b6b4a;          /* fills, rules, decorative marks */
    --color-accent-hover: #6f5438;    /* fill hover — 7.0:1 with white text */
    --color-accent-text: #6f5438;     /* accent text and links — 6.3:1 */
    --color-accent-subtle: #f1e9e0;   /* tinted wash behind accent content */

    --color-success: #4a6b4f;
    --color-error: #9b3b32;

    /* Overlays for hero imagery and drawers. */
    --color-overlay: rgb(31 28 24 / 0.52);
    --color-overlay-strong: rgb(31 28 24 / 0.86);
    /* Scrim for type laid over photography. It never falls below 0.45, because
       a pale sky is the worst case and white text needs ~4.8:1 against it —
       a gradient that fades to transparent looks better and fails WCAG. */
    --gradient-image-scrim: linear-gradient(
        to top,
        rgb(31 28 24 / 0.88) 0%,
        rgb(31 28 24 / 0.74) 38%,
        rgb(31 28 24 / 0.58) 70%,
        rgb(31 28 24 / 0.45) 100%
    );

    /* ----------------------------------------------------------------------
       Typography
       Cormorant Garamond carries the editorial voice; Inter does the reading.
       Both are self-hosted variable fonts — see fonts.css.
       ---------------------------------------------------------------------- */

    --font-display: "Cormorant Garamond", ui-serif, Georgia, "Times New Roman", serif;
    --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Small sizes are fixed for legibility; larger ones scale with the
       viewport so headings never step awkwardly at a breakpoint. */
    --font-size-xs: 0.8125rem;   /* 13px — metadata floor, never smaller */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem);
    --font-size-2xl: clamp(1.5rem, 1.34rem + 0.7vw, 1.9rem);
    --font-size-3xl: clamp(1.875rem, 1.55rem + 1.4vw, 2.75rem);
    --font-size-4xl: clamp(2.25rem, 1.72rem + 2.3vw, 3.75rem);
    --font-size-5xl: clamp(2.75rem, 1.9rem + 3.7vw, 5rem);
    /* Cormorant has a small x-height, so display type is set larger than a
       sans-serif would need at the same optical weight. */
    --font-size-display: clamp(3rem, 1.85rem + 5vw, 6.5rem);

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

    --line-height-display: 1.02;  /* large Cormorant settings */
    --line-height-tight: 1.12;
    --line-height-snug: 1.26;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.75;  /* long-form property descriptions */

    --letter-spacing-display: -0.022em;
    --letter-spacing-tight: -0.015em;
    --letter-spacing-snug: -0.008em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.04em;
    --letter-spacing-eyebrow: 0.16em;  /* uppercase labels above headings */

    /* ----------------------------------------------------------------------
       Spacing — 4px base scale
       ---------------------------------------------------------------------- */

    --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-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Section rhythm. Pages alternate these instead of repeating one value, so
       the page reads as composed rather than stacked (DESIGN.md 40). */
    --section-spacing-sm: clamp(var(--space-10), 6vw, var(--space-16));
    --section-spacing-md: clamp(var(--space-16), 9vw, var(--space-24));
    --section-spacing-lg: clamp(var(--space-20), 12vw, var(--space-32));

    /* ----------------------------------------------------------------------
       Layout
       ---------------------------------------------------------------------- */

    --container-max: 1440px;
    --container-default: 1280px;
    --container-narrow: 960px;
    --container-prose: 68ch;

    /* 20px on small phones, up to 64px on desktop. */
    --container-gutter: clamp(1.25rem, 5vw, 4rem);

    --header-height: 4.5rem;      /* 72px */
    --header-height-lg: 5.5rem;   /* 88px */

    /* ----------------------------------------------------------------------
       Borders and radii — restrained, architectural (DESIGN.md 21, 22)
       ---------------------------------------------------------------------- */

    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-full: 9999px;

    --border-width: 1px;
    --border-width-thick: 2px;
    --border-subtle: var(--border-width) solid var(--color-border);
    --border-emphasis: var(--border-width) solid var(--color-border-strong);

    /* Shadows are a last resort behind whitespace, contrast and hairlines. */
    --shadow-xs: 0 1px 2px rgb(31 28 24 / 0.04);
    --shadow-sm: 0 1px 3px rgb(31 28 24 / 0.06), 0 1px 2px rgb(31 28 24 / 0.04);
    --shadow-md: 0 6px 20px rgb(31 28 24 / 0.08);
    --shadow-lg: 0 18px 48px rgb(31 28 24 / 0.14);  /* drawers and modals only */

    /* ----------------------------------------------------------------------
       Focus — accent ring clears 3:1 on every background (WCAG 1.4.11)
       ---------------------------------------------------------------------- */

    --focus-ring-width: 2px;
    --focus-ring-offset: 3px;
    --focus-ring-color: var(--color-accent);

    /* ----------------------------------------------------------------------
       Motion (DESIGN.md 25: 120–250ms micro, 200–400ms UI)
       ---------------------------------------------------------------------- */

    --duration-instant: 100ms;
    --duration-fast: 160ms;
    --duration-base: 260ms;
    --duration-slow: 420ms;
    --duration-editorial: 700ms;  /* section reveals; never blocks content */

    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    --transition-fast: var(--duration-fast) var(--ease-standard);
    --transition-base: var(--duration-base) var(--ease-standard);
    --transition-slow: var(--duration-slow) var(--ease-out);

    /* ----------------------------------------------------------------------
       Z-index layers — never write a raw z-index in a component
       ---------------------------------------------------------------------- */

    --z-below: -1;
    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 100;
    --z-header: 200;
    --z-drawer: 300;
    --z-overlay: 400;
    --z-modal: 500;
    --z-toast: 600;

    /* ----------------------------------------------------------------------
       Media aspect ratios (DESIGN.md 29)
       ---------------------------------------------------------------------- */

    --aspect-card: 4 / 3;
    --aspect-editorial: 3 / 2;
    --aspect-wide: 16 / 10;
    --aspect-hero: 16 / 9;
    --aspect-portrait: 4 / 5;

    /* ----------------------------------------------------------------------
       Breakpoints
       Recorded here as the canonical scale and for JavaScript to read. CSS
       custom properties cannot be used inside media query conditions, so
       @media rules repeat these literal values.

         sm  640px   large mobile
         md  768px   tablet
         lg 1024px   laptop
         xl 1280px   desktop
        2xl 1536px   large desktop
       ---------------------------------------------------------------------- */

    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}