/* ============================================================================
   MakeOverPDF design tokens
   ----------------------------------------------------------------------------
   This is the only file in the project allowed to contain a literal colour,
   font size, space, radius or duration. Everything else consumes these custom
   properties. tests/unit/DesignTokenTest.php enforces that, so the palette
   cannot quietly drift into component CSS.

   Layer 1  primitives  — the raw scales. Never used by components directly.
   Layer 2  semantic    — what a colour *means*. Components use only these.
   ----------------------------------------------------------------------------
   Direction: inspired by Open Money (open.money/company/about) — signature
   deep plum/violet base, electric purple and rebecca purple accents,
   warm neumorphic off-white light surfaces, and rich elevated contrast.
   ========================================================================= */

:root {
    /* ------------------------------------------------------------------ */
    /* Layer 1 — colour primitives (Open Money plum and violet palette)    */
    /* ------------------------------------------------------------------ */

    --ink-950: #12001a;
    --ink-900: #1a0029;
    --ink-850: #230238;
    --ink-800: #2e0045;
    --ink-750: #3b0957;
    --ink-700: #4b1478;
    --ink-600: #5e1d93;
    --ink-500: #7b2ebd;
    --ink-400: #a363df;
    --ink-300: #b993e4;
    --ink-200: #e3cdff;
    --ink-100: #f1e7ff;
    --ink-050: #f6f3fb;
    --ink-000: #ffffff;

    /* The single accent. Used for focus, primary actions and active state. */
    --teal-700: #4b1478;
    --teal-600: #663399;
    --teal-500: #8639f5;
    --teal-400: #9747ff;
    --teal-300: #c8a8ff;

    /* Status colours. Each has a strong tone for text and a soft tone for
       surfaces, so a badge never relies on colour alone to carry meaning. */
    --amber-700: #8c5800;
    --amber-600: #b37400;
    --amber-500: #dea32f;
    --amber-100: #fff3c9;

    --rose-700: #a81717;
    --rose-600: #c01f00;
    --rose-500: #d23b3b;
    --rose-100: #ffebe8;

    --green-700: #0b7a57;
    --green-600: #107c41;
    --green-100: #e3f8ea;

    /* ------------------------------------------------------------------ */
    /* Layer 1 — spacing, radii, type, motion, layout                     */
    /* ------------------------------------------------------------------ */

    /* A 4px base step. Named t-shirt style so intent survives a rebase. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 5rem;
    --space-11: 6.5rem;
    --space-12: 8rem;

    /* Tight geometry: small, consistent corner radii. */
    --radius-xs: 3px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;

    --border-width: 1px;
    --border-width-strong: 2px;

    /* System font stacks only. A self-hosted tool that fetches a webfont from
       someone else's CDN is a privacy and availability regression. */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;

    /* Fluid type scale. Each step is usable on a phone without a media query. */
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 1rem;
    --text-md: clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem);
    --text-lg: clamp(1.1875rem, 0.6vw + 1.04rem, 1.375rem);
    --text-xl: clamp(1.375rem, 1vw + 1.12rem, 1.75rem);
    --text-2xl: clamp(1.6875rem, 1.8vw + 1.24rem, 2.375rem);
    --text-3xl: clamp(2.125rem, 3.4vw + 1.2rem, 3.5rem);

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-normal: 1.6;

    --tracking-tight: -0.015em;
    --tracking-tighter: -0.03em;
    --tracking-wide: 0.06em;

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

    /* Motion is short and functional. Anything longer feels like latency. */
    --duration-fast: 120ms;
    --duration-base: 180ms;
    --duration-slow: 320ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    --z-base: 1;
    --z-sticky: 100;
    --z-overlay: 200;

    --layout-max: 76rem;
    --layout-narrow: 46rem;
    --layout-gutter: var(--space-4);
    --header-height: 3.5rem;

    --shadow-sm: 0 1px 2px rgb(26 0 41 / 30%);
    --shadow-md: 0 6px 20px -8px rgb(26 0 41 / 55%);
    --shadow-lg: 0 24px 60px -24px rgb(26 0 41 / 75%);

    /* ------------------------------------------------------------------ */
    /* Layer 2 — semantic tokens, dark theme (the default)                 */
    /* ------------------------------------------------------------------ */

    --color-bg: var(--ink-950);
    --color-bg-alt: var(--ink-900);
    --color-surface: var(--ink-850);
    --color-surface-raised: var(--ink-800);
    --color-surface-hover: var(--ink-750);
    --color-border: var(--ink-700);
    --color-border-strong: var(--ink-600);
    --color-text: var(--ink-100);
    --color-text-muted: var(--ink-300);
    --color-text-faint: var(--ink-400);
    --color-heading: var(--ink-000);

    --color-accent: var(--teal-400);
    --color-accent-strong: var(--teal-500);
    --color-accent-contrast: var(--ink-000);
    --color-accent-soft: rgb(151 71 255 / 14%);

    --color-focus: var(--teal-300);
    --color-warn: var(--amber-500);
    --color-warn-surface: rgb(222 163 47 / 14%);
    --color-danger: var(--rose-500);
    --color-danger-surface: rgb(210 59 59 / 14%);
    --color-success: var(--green-600);
    --color-success-surface: rgb(16 124 65 / 16%);

    --color-selection: rgb(151 71 255 / 30%);
    --color-grid-line: rgb(185 147 228 / 10%);
    --color-scrim: rgb(18 0 26 / 72%);

    color-scheme: dark;
}

/* Light theme. Applied either explicitly by the theme toggle or automatically
   when the visitor's system asks for it and they have not chosen otherwise. */
[data-theme="light"] {
    --color-bg: var(--ink-050);
    --color-bg-alt: var(--ink-000);
    --color-surface: var(--ink-000);
    --color-surface-raised: var(--ink-000);
    --color-surface-hover: var(--ink-100);
    --color-border: var(--ink-200);
    --color-border-strong: var(--ink-300);
    --color-text: var(--ink-800);
    --color-text-muted: var(--ink-600);
    --color-text-faint: var(--ink-400);
    --color-heading: var(--ink-900);

    --color-accent: var(--teal-600);
    --color-accent-strong: var(--teal-700);
    --color-accent-contrast: var(--ink-000);
    --color-accent-soft: rgb(102 51 153 / 10%);

    --color-focus: var(--teal-600);
    --color-warn: var(--amber-700);
    --color-warn-surface: var(--amber-100);
    --color-danger: var(--rose-700);
    --color-danger-surface: var(--rose-100);
    --color-success: var(--green-700);
    --color-success-surface: var(--green-100);

    --color-selection: rgb(102 51 153 / 22%);
    --color-grid-line: rgb(46 0 69 / 8%);
    --color-scrim: rgb(26 0 41 / 48%);

    --shadow-sm: 0 1px 2px rgb(46 0 69 / 6%);
    --shadow-md: 0 8px 24px -12px rgb(46 0 69 / 18%);
    --shadow-lg: 0 28px 60px -28px rgb(46 0 69 / 24%);

    color-scheme: light;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --color-bg: var(--ink-050);
        --color-bg-alt: var(--ink-000);
        --color-surface: var(--ink-000);
        --color-surface-raised: var(--ink-000);
        --color-surface-hover: var(--ink-100);
        --color-border: var(--ink-200);
        --color-border-strong: var(--ink-300);
        --color-text: var(--ink-800);
        --color-text-muted: var(--ink-600);
        --color-text-faint: var(--ink-400);
        --color-heading: var(--ink-900);

        --color-accent: var(--teal-600);
        --color-accent-strong: var(--teal-700);
        --color-accent-contrast: var(--ink-000);
        --color-accent-soft: rgb(102 51 153 / 10%);

        --color-focus: var(--teal-600);
        --color-warn: var(--amber-700);
        --color-warn-surface: var(--amber-100);
        --color-danger: var(--rose-700);
        --color-danger-surface: var(--rose-100);
        --color-success: var(--green-700);
        --color-success-surface: var(--green-100);

        --color-selection: rgb(102 51 153 / 22%);
        --color-grid-line: rgb(46 0 69 / 8%);
        --color-scrim: rgb(26 0 41 / 48%);

        --shadow-sm: 0 1px 2px rgb(46 0 69 / 6%);
        --shadow-md: 0 8px 24px -12px rgb(46 0 69 / 18%);
        --shadow-lg: 0 28px 60px -28px rgb(46 0 69 / 24%);

        color-scheme: light;
    }
}

/* Space is slightly wider on larger screens; the gutter is the only token that
   changes with the viewport. */
@media (min-width: 48rem) {
    :root {
        --layout-gutter: var(--space-6);
        --header-height: 4rem;
    }
}