/**
 * Postroute - the theme.
 *
 * Every colour, radius, space, size, weight, duration and layer in the portal
 * is declared here and nowhere else. components.css and app.css read these
 * with var() and never type a value of their own; tests/Feature/ThemeTest.php
 * fails the build the moment one does. So "change the button" or "tighten the
 * spacing" is one edit here, and every page follows.
 *
 * Loaded first by every layout, before components.css and app.css.
 *
 * Corners are rectangular with a radius, never capsules. There is no pill
 * token on purpose; --radius-round is for things that are actually circles.
 */

:root {
    /* ------------------------------------------------------------------
       COLOUR - light, the default. Only these move in dark mode below.
       ------------------------------------------------------------------ */
    --ink: #16181d;                 /* text */
    --ink-soft: #5c6370;            /* secondary text, labels, hints */
    --line: #dfe2e8;                /* borders, rules, dividers */
    --paper: #ffffff;               /* a card, a panel, the top bar */
    --ground: #f4f5f7;              /* the page behind the paper */

    --accent: #1f5fd0;              /* the one primary action, links */
    --accent-ink: #ffffff;          /* text on the accent */

    --bad: #a3271f;                 /* an error, a destructive action */
    --bad-ground: #fdeceb;
    --bad-ink: #ffffff;             /* text on a danger button */
    --ok: #1d6b3f;
    --ok-ground: #eaf5ee;
    --warn: #8a5a00;
    --warn-ground: #fdf3e2;

    --scrim: rgba(16, 19, 24, 0.45);        /* behind an open dialog */
    --shadow-color: rgba(16, 19, 24, 0.08);
    --elevation-1: 0 1px 2px var(--shadow-color);
    --elevation-2: 0 8px 24px var(--shadow-color);

    /* A mark used as a watermark behind text: faint enough to read through. */
    --opacity-watermark: 0.14;
    /* The hero artwork: present, but stepped back from the text over it. */
    --opacity-artwork: 0.7;

    /* The three stripes in the logo. Decoration only - the header's top rule -
       never a text or a surface colour. Same values as the artwork. */
    --brand-blue: #002b7f;
    --brand-yellow: #fcd116;
    --brand-red: #ce1126;

    /* ------------------------------------------------------------------
       RADIUS
       ------------------------------------------------------------------ */
    --radius-sm: 6px;               /* a badge, a meter, a toggle */
    --radius-md: 8px;               /* a control: button, field, alert, nav link */
    --radius-lg: 10px;              /* a card, a panel, a table, a dialog */
    --radius-xl: 14px;              /* a feature tile on the public page */
    --radius-round: 50%;            /* a circle, nothing else */
    --control-radius: var(--radius-md);

    /* ------------------------------------------------------------------
       SPACE - a 4px scale, written in rem
       ------------------------------------------------------------------ */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* ------------------------------------------------------------------
       TYPE
       ------------------------------------------------------------------ */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --text-xs: 0.75rem;             /* a table heading, a badge */
    --text-sm: 0.85rem;             /* a label, a note, a small button */
    --text-base: 0.92rem;           /* a table row, a list, a link */
    --text-md: 1rem;                /* body, a button */
    --text-lg: 1.1rem;              /* a dialog title, a tile title */
    --text-xl: 1.35rem;             /* a brand line, a code being read back */
    --text-2xl: 1.5rem;             /* a page title */
    --text-3xl: 2rem;               /* a figure on the dashboard */
    --text-4xl: 2.75rem;            /* the public page's title on a phone */
    --text-5xl: 3.5rem;             /* the public page's title */

    --weight-normal: 400;
    --weight-semibold: 600;
    --weight-bold: 700;

    --leading-none: 1;
    --leading-tight: 1.1;
    --leading-snug: 1.4;
    --leading-base: 1.55;

    --tracking-tighter: -0.03em;    /* a display heading */
    --tracking-tight: -0.02em;      /* a title */
    --tracking-wide: 0.06em;        /* an uppercase label */
    --tracking-mono: 0.03em;        /* a recovery code */
    --tracking-code: 0.4em;         /* a one-time code typed digit by digit */

    /* ------------------------------------------------------------------
       CONTROLS - buttons and fields share these, so they sit level
       ------------------------------------------------------------------ */
    --control-height-sm: 2rem;
    --control-height-md: 2.6rem;
    --control-height-lg: 3.1rem;
    --control-pad-sm: 0 var(--space-3);
    --control-pad-md: 0 var(--space-4);
    --control-pad-lg: 0 var(--space-6);
    --focus-ring: 2px solid var(--accent);
    --focus-ring-ink: 2px solid var(--ink);

    /* ------------------------------------------------------------------
       WIDTHS
       ------------------------------------------------------------------ */
    --width-card: 28rem;            /* the sign-in card */
    --width-content: 72rem;         /* the application's content column */
    --width-site: 68rem;            /* the public page */
    --width-prose: 38rem;           /* a paragraph nobody should have to track across */
    --width-nav: 13rem;             /* the application's side navigation */
    --width-modal: 30rem;

    /* The hero cannot be shorter than its artwork at column width: the file is
       2311 x 700, so at 68rem wide it is 68 x 700 / 2311 = 20.6rem tall. Below
       this the strokes are cropped top and bottom - measured twice, 12.09.2026. */
    --height-hero: 21rem;

    /* ------------------------------------------------------------------
       MOTION
       ------------------------------------------------------------------ */
    --transition-fast: 0.12s ease;
    --transition: 0.2s ease;

    /* ------------------------------------------------------------------
       LAYERS
       ------------------------------------------------------------------ */
    --z-header: 200;
    --z-modal: 1000;

    /* Breakpoint. A media query is resolved before var() exists, so this is
       the list rather than the mechanism: one width, 46rem, used everywhere
       something has to stack for a phone. */
}

/* ----------------------------------------------------------------------
   COLOUR - dark. Only the colours move; geometry is the same in both.
   ---------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        --ink: #e7e9ee;
        --ink-soft: #9aa2b1;
        --line: #2c313a;
        --paper: #191c22;
        --ground: #101318;
        --accent: #5b91f5;
        --accent-ink: #0b0e13;
        --bad: #f2a29c;
        --bad-ground: #351d1b;
        --bad-ink: #0b0e13;
        --ok: #8fd4a9;
        --ok-ground: #14291d;
        --warn: #e8bf7a;
        --warn-ground: #2e2413;
        --scrim: rgba(0, 0, 0, 0.6);
        --shadow-color: rgba(0, 0, 0, 0.4);
    }
}

/* Someone who has asked for less motion gets none, everywhere at once. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition: 0s;
    }
}