/* Design tokens.
 *
 * The single place a colour, spacing step or radius is allowed to be written as
 * a literal. Every other stylesheet references these names. A literal colour
 * outside this file is a defect.
 *
 * The colours are MEASURED from docs/design/FrontEnd-Design_darkmode.png, not
 * estimated — docs/design/MEASUREMENTS.md records the sample coordinates, the
 * patch spread at each one and the method. Two earlier estimates were badly
 * wrong and both are load-bearing:
 *
 *   - The surfaces are far darker and far closer to one another than assumed.
 *     The design separates cards from the page with a BORDER, not with a fill
 *     contrast — page background and card surface differ by two steps in one
 *     channel. Lightening cards to make them "pop" stops looking like the
 *     design.
 *   - The primary green is olive (#629141), not mint (#66BB6A).
 *
 * Spacing, radii and type sizes below are proportional judgements from the
 * design, not measurements. Deriving them from a screenshot would mean measuring
 * rendered glyphs against an assumed zoom factor: precise-looking guesswork.
 */

:root {
    /* Surfaces — see the note above before "improving" the contrast here. */
    --cuc-bg: #091715;
    --cuc-surface: #091817;
    --cuc-surface-raised: #0C1E1B;
    --cuc-header: #081614;

    /* Brand. Keep --cuc-header and page.meta.theme-color in setup.typoscript
       the same colour. */
    --cuc-primary: #629141;
    --cuc-primary-hover: #74A64F;
    --cuc-primary-ink: #071310;
    --cuc-accent: #7DBC50;

    /* Text */
    --cuc-text: #FFFFFF;
    --cuc-muted: #A3AAA3;
    --cuc-muted-dim: #7C8A83;

    /* The same two colours as bare RGB triplets, for rgba() with a variable
       alpha — the hero overlay and the translucent text on it. CSS cannot pull
       channels back out of a hex value, so a component needing rgba() would
       otherwise have to write the literal, which this file exists to prevent.
       Keep each in step with the hex above it: --cuc-bg / --cuc-text. */
    --cuc-bg-rgb: 9, 23, 21;
    --cuc-text-rgb: 255, 255, 255;

    /* Lines and shadows */
    --cuc-line: rgba(255, 255, 255, .08);
    --cuc-line-strong: rgba(255, 255, 255, .16);
    --cuc-shadow: 0 8px 24px rgba(0, 0, 0, .35);

    /* Radii */
    --cuc-radius-sm: 8px;
    --cuc-radius: 12px;
    --cuc-radius-lg: 16px;
    --cuc-radius-pill: 999px;

    /* Spacing — a 4px scale */
    --cuc-space-1: .25rem;
    --cuc-space-2: .5rem;
    --cuc-space-3: .75rem;
    --cuc-space-4: 1rem;
    --cuc-space-6: 1.5rem;
    --cuc-space-8: 2rem;
    --cuc-space-12: 3rem;
    --cuc-space-16: 4rem;
    --cuc-space-24: 6rem;

    /* Type. The system stack is deliberate: no web font means no external
       request, no layout shift and nothing to self-host. If the brand ever needs
       a specific typeface it is added here and nowhere else. */
    --cuc-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --cuc-text-xs: .75rem;
    --cuc-text-sm: .875rem;
    --cuc-text-base: 1rem;
    --cuc-text-lg: 1.125rem;
    --cuc-text-xl: 1.375rem;
    --cuc-text-2xl: 1.75rem;
    --cuc-text-3xl: 2.25rem;
    --cuc-text-hero: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
    --cuc-leading-tight: 1.15;
    --cuc-leading: 1.6;

    /* Layout */
    --cuc-container: 1440px;
    --cuc-gutter: var(--cuc-space-6);

    /* Motion */
    --cuc-transition: 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
    :root { --cuc-transition: 0ms; }
}