/*
 * Design tokens.
 *
 * The only file in which a raw colour, size or duration is written down. Every other stylesheet refers
 * to these names, so a change to the palette is a change to one file rather than a search for hex codes.
 *
 * The identity is deliberately quiet: a restrained blue-grey palette, generous line height, no gradients
 * and no shadows deeper than a hairline. A platform whose argument is privacy and calm should not look
 * like an attention-seeking feed.
 *
 * Contrast: every foreground/background pair used by the components meets WCAG 2.2 AA (4.5:1 for body
 * text, 3:1 for large text and interface borders). The pairs are noted where they are not obvious,
 * because a token renamed without checking its partner is how a design system quietly fails an audit.
 *
 * Dark mode is derived from the same token names under `prefers-color-scheme`, so no component contains
 * a second set of rules for it.
 */

:root {
    /* ---- Palette ------------------------------------------------------------------------------- */

    /* Surfaces — clean, modern, slightly warm. */
    --colour-surface: #ffffff;
    --colour-surface-sunken: #f8fafc;
    --colour-surface-raised: #ffffff;
    --colour-surface-overlay: #ffffff;

    /* Ink — softer than pure black for reduced eye strain. */
    --colour-ink: #0f172a;
    --colour-ink-quiet: #64748b;
    --colour-ink-faint: #94a3b8;

    /* Borders — subtle but perceptible. */
    --colour-border: #e2e8f0;
    --colour-border-strong: #cbd5e1;
    --colour-border-focus: #3b82f6;

    /* Primary — vibrant blue, modern social media feel. White text on this is 4.6:1. */
    --colour-primary: #3b82f6;
    --colour-primary-hover: #2563eb;
    --colour-primary-active: #1d4ed8;
    --colour-primary-ink: #ffffff;
    --colour-primary-surface: #eff6ff;

    /* Secondary — for less prominent actions. */
    --colour-secondary: #64748b;
    --colour-secondary-hover: #475569;
    --colour-secondary-ink: #ffffff;

    /* Status colours — each tested for 4.5:1 on white. */
    --colour-success: #16a34a;
    --colour-success-surface: #f0fdf4;
    --colour-success-ink: #16a34a;
    --colour-error: #dc2626;
    --colour-error-surface: #fef2f2;
    --colour-error-ink: #dc2626;
    --colour-warning: #d97706;
    --colour-warning-surface: #fffbeb;
    --colour-warning-ink: #b45309;
    --colour-info: #0284c7;
    --colour-info-surface: #f0f9ff;
    --colour-info-ink: #0284c7;

    /* Focus — high-contrast blue ring. */
    --colour-focus: #3b82f6;

    /* ---- Typography -------------------------------------------------------------------------- */

    /* System stack: no web font to download, no request to a third-party font host, no layout shift
       while a face loads. The privacy argument and the performance argument point the same way here. */
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;

    /* A 1.2 ratio scale. Sizes are in rem so they follow the reader's browser setting. */
    --text-xs: 0.79rem;
    --text-sm: 0.889rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.35rem;
    --text-2xl: 1.62rem;
    --text-3xl: 1.95rem;

    --leading-tight: 1.25;
    --leading-body: 1.6;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-bold: 700;

    /* ---- Space ------------------------------------------------------------------------------- */

    /* A 4px base, doubling. Named by size rather than by use, so a component is free to combine them. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* ---- Shape ------------------------------------------------------------------------------- */

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    --border-width: 1px;
    --focus-width: 3px;
    --focus-offset: 2px;

    /* Soft, modern shadows. */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* Legacy aliases. */
    --shadow-raised: var(--shadow-sm);
    --shadow-overlay: var(--shadow-xl);

    /* ---- Measure and layout ------------------------------------------------------------------ */

    /* Reading measure. Around 70 characters: long enough not to feel cramped, short enough that the eye
       finds the next line without effort. */
    --measure: 68ch;
    --page-width: 72rem;
    --gutter: var(--space-5);

    /* ---- Motion ------------------------------------------------------------------------------ */

    --duration-fast: 120ms;
    --duration-base: 200ms;
    --easing: cubic-bezier(0.2, 0, 0.2, 1);

    /* How long a toast stays visible. Functional rather than decorative: it is the countdown, so the
       reduced-motion block below deliberately leaves it untouched. */
    --toast-duration: 6s;

    /* ---- Layers ------------------------------------------------------------------------------ */

    --layer-header: 10;
    --layer-overlay: 100;
}

/*
 * Dark mode.
 *
 * Surfaces lift rather than invert: pure black behind pure white causes halation for a lot of readers,
 * so the darkest surface is a very dark blue-grey and the ink is off-white. Contrast ratios were checked
 * again against the new surfaces rather than assumed to carry over.
 */
@media (prefers-color-scheme: dark) {
    :root {
        --colour-surface: #0f172a;
        --colour-surface-sunken: #020617;
        --colour-surface-raised: #1e293b;
        --colour-surface-overlay: #1e293b;

        --colour-ink: #f1f5f9;
        --colour-ink-quiet: #94a3b8;
        --colour-ink-faint: #64748b;

        --colour-border: #334155;
        --colour-border-strong: #475569;
        --colour-border-focus: #60a5fa;

        --colour-primary: #60a5fa;
        --colour-primary-hover: #93c5fd;
        --colour-primary-active: #3b82f6;
        --colour-primary-ink: #0f172a;
        --colour-primary-surface: #1e3a5f;

        --colour-secondary: #94a3b8;
        --colour-secondary-hover: #cbd5e1;
        --colour-secondary-ink: #0f172a;

        --colour-success: #4ade80;
        --colour-success-surface: #14532d;
        --colour-success-ink: #4ade80;
        --colour-error: #f87171;
        --colour-error-surface: #450a0a;
        --colour-error-ink: #f87171;
        --colour-warning: #fbbf24;
        --colour-warning-surface: #451a03;
        --colour-warning-ink: #fbbf24;
        --colour-info: #38bdf8;
        --colour-info-surface: #0c4a6e;
        --colour-info-ink: #38bdf8;

        --colour-focus: #60a5fa;

        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    }
}

/*
 * Reduced motion.
 *
 * The tokens are zeroed here as well as being honoured in reset.css, so a component that animates using
 * a token gets the same answer without needing its own media query.
 */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
    }
}