/* Parallax — the tokens and its own base rules: the family's DNA (../.claude/DESIGN-SYSTEM.md) with Parallax's own
   colours, decided in THEME.md. The family's base (the reset, the focus ring, the reduced-motion rule, the layout
   primitives) and its type pair come from AD.Ui (_content/AD.Ui/base.css and fonts.css), which read these tokens
   (AD.Ui.TokenContract). Every colour of the interface is a token here: no literal anywhere else. Contrast ratios
   are measured on the tightest surface each colour sits on. */

/* ── Light theme ─────────────────────────────────────────────────────────────────────────────────────────────── */
:root {
    color-scheme: light;

    /* Grounds. The page is the family's warm paper; content sits on white cards. The band is a CREAM, the third colour's
       welcome (hue 85, the gold's), never a ground: a notice, a counted figure, an inset. */
    --clr-bg: oklch(0.978 0.006 90);
    --clr-surface: oklch(1 0 0);
    --clr-band: oklch(0.955 0.03 85);
    /* Neutral fill: skeletons, an inactive chip. No muted text on it (4.3:1). */
    --clr-fill: oklch(0.93 0.008 80);

    /* Borders: neutral, 1 px. A field's border is the only edge of the field, so it reaches 3:1 (3.6 on white). */
    --clr-border: oklch(0.905 0.006 100);
    --clr-border-strong: oklch(0.80 0.008 95);
    --clr-field-border: oklch(0.62 0.008 80);

    /* Ink. Primary 14.4:1, secondary 7.4:1, muted 4.6:1 on the band, the tightest surface. */
    --clr-text: oklch(0.24 0.009 55);
    --clr-text-secondary: oklch(0.42 0.009 60);
    --clr-text-muted: oklch(0.53 0.008 70);

    /* The accent — RASPBERRY, hue 355 (THEME.md). It acts: the primary button, links, the active place, the focus
       ring, the signature stroke. Text value 7.4:1 on the ground, 7.9 on white, 6.8 on the band; the fill carries
       white at 6.9:1, its hover at 8.9. */
    --clr-accent: oklch(0.46 0.17 355);
    --clr-accent-fill: oklch(0.49 0.18 355);
    --clr-accent-fill-hover: oklch(0.43 0.17 355);
    --clr-text-on-accent: oklch(1 0 0);

    /* The frame — a RASPBERRY INK, nearly black, hue 340 (THEME.md; Sami kept it on 2026-11-06 among an ink blue and a
       charcoal): the top bar, the bottom tab bar, the footer, an event's cover, an icon tile. Text 14.8:1, muted text
       9.1:1. On it, and only on it, the highlight is a GOLD (hue 85), Atlas Digital's: 10.8:1 on the frame, 8.5:1 on
       its raised step (the current place). */
    --clr-frame: oklch(0.23 0.05 340);
    --clr-frame-raised: oklch(0.31 0.06 340);
    --clr-frame-text: oklch(0.95 0.01 340);
    --clr-frame-text-muted: oklch(0.80 0.03 340);
    --clr-highlight: oklch(0.85 0.12 85);

    /* Atlas Digital's own colours (its docs/BRAND.md), for its wordmark in the endorsement on the frame only: a
       logotype, the logo's red and gold. Never another use. */
    --clr-atlas-red: #D12628;
    --clr-atlas-gold: #DAB975;

    /* The framing axis's nuances, from the first pole (sand) to the second (magenta plum), through clay, rose and
       orchid: a mark takes the step of its position (THEME.md). Marks, not text: 3.7, 4.4, 5.1, 6.1 and 7.4:1 on a
       card, 3.2 to 6.5 on the band. */
    --clr-axis-1: oklch(0.62 0.05 80);
    --clr-axis-2: oklch(0.58 0.07 50);
    --clr-axis-3: oklch(0.55 0.09 15);
    --clr-axis-4: oklch(0.51 0.12 345);
    --clr-axis-5: oklch(0.47 0.15 335);

    /* A refusal: under a field, a toast's rule. A vermilion, 45° from the raspberry so that a refusal never reads as
       the accent, and always with its words. 6.4:1 on white. Parallax judges no figure: no gain green, and the gold
       never says advice (it only lights the frame). */
    --clr-danger: oklch(0.50 0.15 40);

    /* Shadows detach in light only: in the dark their colours are transparent and the surfaces separate by their
       lightness. The accent's glow sits under a primary button and nowhere else. */
    --clr-shadow: oklch(0.2 0.02 340 / 0.08);
    --clr-shadow-deep: oklch(0.2 0.04 340 / 0.16);
    --clr-accent-glow: oklch(0.49 0.18 355 / 0.3);
    /* A card that answers the pointer: white in light, where its shadow lifts it; one step lighter in the dark. */
    --clr-surface-hover: oklch(1 0 0);

    /* ── Elevation: the resting card, the lifted card, the frame's bar over the page, the primary button. ── */
    --shadow-rest: 0 1px 2px var(--clr-shadow), 0 2px 8px var(--clr-shadow);
    --shadow-lift: 0 6px 16px var(--clr-shadow), 0 14px 36px var(--clr-shadow-deep);
    --shadow-bar: 0 2px 14px var(--clr-shadow-deep);
    --shadow-accent: 0 3px 10px var(--clr-accent-glow);
    --shadow-accent-lift: 0 8px 22px var(--clr-accent-glow);

    /* What the focus ring and the signature stroke take: the accent on the ground, the highlight on the frame. */
    --clr-focus: var(--clr-accent);
    --clr-signature: var(--clr-accent);
    /* The stroke in LumoHub's and Atlas Digital's proportions: a slash as high as the line, as wide as the focus ring,
       slanted like a rising arrow (AD.Ui's .signature reads these). */
    --signature-width: var(--ring-width);
    --signature-height: 1em;
    --signature-gap: var(--space-12);

    /* ── Type ── */
    --font-sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
    --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.25rem;

    /* ── Spacing, named by its pixel value at the 16 px root ── */
    --space-2: 0.125rem;
    --space-4: 0.25rem;
    --space-6: 0.375rem;
    --space-8: 0.5rem;
    --space-12: 0.75rem;
    --space-16: 1rem;
    --space-20: 1.25rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-40: 2.5rem;
    --space-48: 3rem;
    --space-64: 4rem;

    /* ── Geometry ── */
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-pill: 999px;
    --ring-width: 3px;
    --target: 44px;
    /* The family's button (AD.Ui) lifts Parallax's primary on its accent glow. */
    --btn-primary-shadow: var(--shadow-accent);
    --btn-primary-shadow-hover: var(--shadow-accent-lift);

    /* ── Layout ── */
    --page-max: 72rem;
    --reading-max: 68ch;
    --bar-height: 3.5rem;
    --bar-shadow: var(--shadow-bar);
    --bar-link-current-animation: pop var(--dur-3) var(--ease-spring);
    --avatar-large-radius: var(--radius-xl);
    --avatar-large-animation: pop var(--dur-4) var(--ease-spring) backwards;
    /* A notice (AD.Ui) lies on the band, the line a hidden section leaves. */
    --notice-background: var(--clr-band);
    /* The tab bar (AD.Ui) on the frame: muted words, the highlight on the current place. */
    --tabbar-color: var(--clr-frame-text-muted);
    --tabbar-active-color: var(--clr-highlight);

    /* ── Motion ── */
    --dur-1: 0.1s;
    --dur-2: 0.18s;
    --dur-3: 0.28s;
    /* A skeleton's slow breath: long enough to read as waiting, not as a blink. */
    --dur-pulse: 1.4s;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    /* A page's sections and a list's cards rising in one after the other. */
    --dur-4: 0.42s;
    --stagger: 0.05s;
    /* An answer that springs back past its rest: a reaction pressed, a pill chosen, the signature drawn. */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Dark theme: the same hues, only the lightness moves. Never #000. Chosen with the switch of the bar, as LumoHub's
   (light by default): the server writes it on <html data-theme> from the theme's cookie, before the first paint and
   without a script. ──────────────────────────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* The grounds and the band take the frame's hue: a cream has no dark of its own on a raspberry ink. */
    --clr-bg: oklch(0.19 0.012 340);
    --clr-surface: oklch(0.24 0.015 340);
    --clr-band: oklch(0.28 0.035 340);
    --clr-fill: oklch(0.30 0.012 340);

    /* The field border: 3.5:1 on a card. */
    --clr-border: oklch(0.32 0.012 340);
    --clr-border-strong: oklch(0.44 0.014 340);
    --clr-field-border: oklch(0.56 0.012 340);

    /* Primary 12.8:1, secondary 7.9:1, muted 5.5:1 on the band. */
    --clr-text: oklch(0.95 0.005 70);
    --clr-text-secondary: oklch(0.80 0.007 70);
    --clr-text-muted: oklch(0.70 0.008 70);

    /* Text value 7.5:1 on a card, 6.8 on the band; the fill carries a dark ink at 6.4:1, its hover at 8.4. */
    --clr-accent: oklch(0.77 0.12 355);
    --clr-accent-fill: oklch(0.70 0.15 355);
    --clr-accent-fill-hover: oklch(0.77 0.12 355);
    --clr-text-on-accent: oklch(0.20 0.04 340);

    /* 7.1:1 on a card. */
    --clr-danger: oklch(0.75 0.13 45);

    /* The same steps, lighter: 8.2, 7.6, 6.9, 6.6 and 6.3:1 on a card, 5.6 to 7.4 on the band. */
    --clr-axis-1: oklch(0.78 0.05 80);
    --clr-axis-2: oklch(0.76 0.07 50);
    --clr-axis-3: oklch(0.74 0.085 15);
    --clr-axis-4: oklch(0.73 0.11 345);
    --clr-axis-5: oklch(0.72 0.13 335);

    /* No shadow in the dark: surfaces separate by their lightness. */
    --clr-shadow: oklch(0 0 0 / 0);
    --clr-shadow-deep: oklch(0 0 0 / 0);
    --clr-accent-glow: oklch(0 0 0 / 0);
    --clr-surface-hover: oklch(0.28 0.018 340);
}

/* ── Base: Parallax's own, after the family's reset and native defaults (AD.Ui base.css) ─────────────────────── */
html {
    /* 100 % at every width: Parallax is read more than it is operated, and the user's own size is respected. */
    font-size: 100%;
}

body {
    min-height: 100dvh;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.55;
    background-color: var(--clr-bg);
    color: var(--clr-text);
    -webkit-font-smoothing: antialiased;
}

/* Their wrapping, and the paragraphs', is the family's (AD.Ui base.css). */
h1, h2, h3 {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.2;
}

a {
    color: var(--clr-accent);
    text-underline-offset: 0.15em;
}

button, input, select, textarea {
    color: inherit;
}