/*
 * Design system: tokens. Every design value lives here, and rules read them through var(--ds-*).
 * The brand colours are in brand.css.
 */

:root {
    /* ─── Colour scheme ──────────────────────────────────────────────────────
       The page follows the system's. A colour that differs between the two is a `light-dark(light, dark)`,
       so `color-scheme: light` or `dark` on any element pins everything under it. */
    color-scheme: light dark;

    /* ─── Font families ──────────────────────────────────────────────────────
       Both loaded from Google Fonts by each page's <link>. */
    --ds-font-body: "Inter", system-ui, -apple-system, sans-serif;
    --ds-font-display: "Inter Tight", "Inter", system-ui, sans-serif;
    --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ─── Type roles ─────────────────────────────────────────────────────────
       Line heights are set for the web: the design's 100% clips descenders in multi-line copy. */
    --ds-text-page-title: 36px;   /* Inter Tight SemiBold: screen headers */
    --ds-text-header: 30px;       /* Inter Tight SemiBold: panel headers */
    --ds-text-section: 21px;      /* Inter Tight SemiBold: section headings */
    --ds-text-nav: 18px;          /* Inter Tight Medium: sidebar nav, form labels */
    --ds-text-body: 15px;         /* Inter Regular: body, list rows */
    --ds-text-button: 15px;       /* Inter Medium: control labels */
    --ds-text-button-lg: 18px;    /* Inter Medium: the large button */
    --ds-text-meta: 12px;         /* Inter Regular: secondary and meta text */

    /* The smallest step, for a caption that names a value. */
    --ds-text-micro: 10px;        /* Inter Regular: a caption on a control */
    --ds-text-dialog-title: 24px; /* Inter SemiBold: dialog titles */

    --ds-leading-tight: 1.2;      /* headings */
    --ds-leading-normal: 1.5;     /* body copy */
    --ds-leading-control: 1.2;

    --ds-weight-regular: 400;
    --ds-weight-medium: 500;
    --ds-weight-semibold: 600;

    /* ─── BnW ramp, the neutral palette ──────────────────────────────────────
       ⚠ Runs dark to light: 0 is black, 1000 is white. */
    --ds-bnw-1000: #fff;
    --ds-bnw-950: #f8f7f7;
    --ds-bnw-900: #f3f2f2;
    --ds-bnw-850: #e9e8e7;
    --ds-bnw-800: #dcdcda;
    --ds-bnw-750: #ceccca;
    --ds-bnw-700: #bfbdbb;
    --ds-bnw-650: #b0aeab;
    --ds-bnw-600: #a19f9b;
    --ds-bnw-550: #928f8b;
    --ds-bnw-500: #83807c;
    --ds-bnw-450: #74716d;
    --ds-bnw-400: #64615e;
    --ds-bnw-350: #54524f;
    --ds-bnw-300: #444340;
    --ds-bnw-250: #353331;
    --ds-bnw-200: #252423;
    --ds-bnw-150: #181716;
    --ds-bnw-100: #0d0d0c;
    --ds-bnw-50: #050505;
    --ds-bnw-0: #000;

    /* ─── Chart categorical palette ──────────────────────────────────────────
       Take them in this order and never cycle: the order keeps adjacent series apart for colour-blind readers.
       Past eight series, fold the tail into `--ds-chart-other`. */
    --ds-chart-1: light-dark(#2a78d6, #4b93e6);   /* blue    */
    --ds-chart-2: #eb6834;   /* orange  */
    --ds-chart-3: #1baf7a;   /* aqua    */
    --ds-chart-4: #eda100;   /* yellow  */
    --ds-chart-5: #e87ba4;   /* magenta */
    --ds-chart-6: light-dark(#008300, #2fa62f);   /* green   */
    --ds-chart-7: light-dark(#4a3aa7, #8474e0);   /* violet  */
    --ds-chart-8: #e34948;   /* red     */

    /* Neutral, so "everything else" cannot pass for one more named series. */
    --ds-chart-other: var(--ds-bnw-500);

    /* ─── Semantic colour roles ──────────────────────────────────────────────
       Components and screens use these, never the raw ramps above. The dark steps are ours: the design draws
       the light scheme only. */
    --ds-color-surface: light-dark(var(--ds-bnw-1000), var(--ds-bnw-200));
    --ds-color-surface-sunken: light-dark(var(--ds-bnw-900), var(--ds-bnw-150));

    /* One step further from the surface than the sunken one: what the sunken surface turns to under the pointer. */
    --ds-color-surface-deep: light-dark(var(--ds-bnw-850), var(--ds-bnw-100));

    /* The interaction steps of a control whose plate is the surface (`.ds-btn-white`). */
    --ds-color-surface-hover: light-dark(#f5f5f5, #2d2c2a);
    --ds-color-surface-focus: light-dark(#ebebeb, #353331);
    --ds-color-surface-press: light-dark(#e0e0e0, #3d3b39);

    --ds-color-border: light-dark(var(--ds-bnw-850), var(--ds-bnw-300));
    --ds-color-border-strong: light-dark(#d9d9d9, var(--ds-bnw-350));

    /* For the frame around a list's entries, where the border colour would read as a table. */
    --ds-color-border-subtle: light-dark(var(--ds-bnw-900), var(--ds-bnw-250));

    /* A row under the pointer is half the tint of a selected one. */
    --ds-color-hover: light-dark(var(--ds-bnw-950), #2d2c2a);
    --ds-color-selected: light-dark(var(--ds-bnw-900), var(--ds-bnw-250));

    /* On the sunken panel a selected row lifts to the surface, so the hover stays under it. */
    --ds-color-hover-onsunken: light-dark(var(--ds-bnw-950), #1f1e1d);

    /* Translucent, so it reads the same over the surface and over the selected row's fill. */
    --ds-color-hover-faint: light-dark(rgb(0 0 0 / 1.5%), rgb(255 255 255 / 3%));

    /* The plate of a neutral control and its interaction steps; `-strong` is the plate on the sunken panel. */
    --ds-color-fill: light-dark(var(--ds-bnw-900), var(--ds-bnw-250));
    --ds-color-fill-hover: light-dark(#e5e4e3, #3d3b39);
    --ds-color-fill-focus: light-dark(#dad9d8, var(--ds-bnw-300));
    --ds-color-fill-press: light-dark(#c8c7c6, #4c4a47);
    --ds-color-fill-strong: light-dark(var(--ds-bnw-850), var(--ds-bnw-300));
    --ds-color-fill-strong-hover: light-dark(#dad9d8, #4c4a47);
    --ds-color-fill-strong-focus: light-dark(#cfcecd, var(--ds-bnw-350));
    --ds-color-fill-strong-press: light-dark(#c8c7c6, #5c5a57);

    /* An unticked checkbox's edge and a switch's track while off. */
    --ds-color-control-off: light-dark(var(--ds-bnw-700), var(--ds-bnw-400));
    --ds-color-control-off-hover: light-dark(var(--ds-bnw-650), var(--ds-bnw-450));
    --ds-color-control-off-focus: light-dark(var(--ds-bnw-600), var(--ds-bnw-500));
    --ds-color-control-off-press: light-dark(var(--ds-bnw-550), var(--ds-bnw-550));

    --ds-color-text: light-dark(var(--ds-bnw-200), var(--ds-bnw-850));
    --ds-color-text-secondary: light-dark(var(--ds-bnw-400), var(--ds-bnw-650));
    --ds-color-text-muted: light-dark(var(--ds-bnw-500), var(--ds-bnw-550));

    /* A choice that isn't the chosen one. */
    --ds-color-text-faint: light-dark(var(--ds-bnw-600), var(--ds-bnw-500));

    /* What dims the page behind a dialog and behind the phone drawer. */
    --ds-color-backdrop: light-dark(rgb(0 0 0 / 12%), rgb(0 0 0 / 50%));
    --ds-color-scrim: light-dark(rgb(37 36 35 / 40%), rgb(0 0 0 / 60%));

    /* The brand colours live in brand.css, loaded right after this file. */

    /* Status pairs. */
    --ds-color-info-text: light-dark(#1431a3, #aebcf7);
    --ds-color-info-bg: light-dark(#d8dffa, #1d2a5e);
    --ds-color-success-text: light-dark(#628a2e, #a8cf73);
    --ds-color-success-bg: light-dark(#eaf3dd, #26361a);

    /* The interaction steps that let a status colour back a button (`.ds-btn-success`). */
    --ds-color-success-bg-hover: light-dark(#dfeccd, #2e4120);
    --ds-color-success-bg-press: light-dark(#d3e4bb, #374d26);
    --ds-color-warning-text: light-dark(#ff5226, #ff8f70);
    --ds-color-warning-bg: light-dark(#ffece6, #4a2015);

    /* A status with no tone of its own. */
    --ds-color-neutral-text: light-dark(var(--ds-bnw-300), var(--ds-bnw-800));
    --ds-color-neutral-bg: light-dark(var(--ds-bnw-850), var(--ds-bnw-300));

    /* ⚠ Ours: a value in an expression, a calm green that a condition's blue pill can't be taken for. */
    --ds-color-value-text: light-dark(#1d5c4a, #a9dccb);
    --ds-color-value-bg: light-dark(#dcefe7, #1b3a31);

    /* ⚠ Ours, pending the design: the middle step of a high / medium / low scale. */
    --ds-color-caution-text: light-dark(#8a6100, #e8bf5e);
    --ds-color-caution-bg: light-dark(#fff2cc, #40340f);
    --ds-color-badge: #ff5226;

    /* ⚠ Ours, pending the design, which has no danger colour. The steps darken like the accent button's ramp. */
    --ds-color-danger-text: light-dark(#b3261e, #f2908a);
    --ds-color-danger-bg: light-dark(#f8e1e1, #4a1e1c);
    --ds-color-danger-bg-press: light-dark(#f0d0d0, #5e2725);
    --ds-color-danger-default: #c62828;
    --ds-color-danger-hover: #b3231f;
    --ds-color-danger-focus: #9f1f1c;
    --ds-color-danger-press: #8b1b18;

    /* ─── Spacing scale ──────────────────────────────────────────────────────
       A 3px base step. */
    --ds-space-1: 3px;
    --ds-space-2: 6px;
    --ds-space-3: 9px;
    --ds-space-4: 12px;
    --ds-space-5: 18px;
    --ds-space-6: 24px;
    --ds-space-7: 36px;

    /* ─── Focus ring ─────────────────────────────────────────────────────────
       A clipping edge must keep `--ds-focus-ring-space` clear or it cuts the
       ring off the first control inside it. */
    --ds-focus-ring-width: 2px;
    --ds-focus-ring-offset: 2px;
    --ds-focus-ring-space: calc(var(--ds-focus-ring-width) + var(--ds-focus-ring-offset));

    /* ─── Corner radii ─────────────────────────────────────────────────────── */

    /* Rounded rectangles are squircles (see base.css), which read tighter than an arc, so their radii sit above
       the drawn figure noted on each line. Each is a multiple of 3px. Pills and circles keep the drawn arc. */
    --ds-radius-squircle-boost: 1.3;

    --ds-radius-xs: 9px;      /* checkbox (drawn 5) */

    /* A field is short and wide, so the same radius reads tighter on it than on a card. */
    --ds-radius-sm: 21px;     /* form inputs (drawn 12) */
    --ds-radius-md: 24px;     /* menu rows, previews (drawn 18) */
    --ds-radius-card: 36px;   /* cards, panels (drawn 27) */
    --ds-radius-panel: 39px;  /* the app panel (drawn 30) */

    --ds-radius-pill: 30px;   /* all pill controls: a true arc, as drawn */

    /* Tokens, so the arc fallback can reach them. ⚠ Off the 3px step. */
    --ds-radius-badge: 8px;      /* the 24px badge (drawn 6) */
    --ds-radius-badge-lg: 16px;  /* the 33px badge (drawn 12) */

    /* ─── The arc fallback (no `corner-shape`) ───────────────────────────────
       ⚠ Without `corner-shape` the browser draws a true arc at the boosted radius.
       The fallback at the foot of this file restores the drawn figures. It is a top-level `@supports`,
       so it applies without CSS Nesting. */

    /* ─── Elevation ────────────────────────────────────────────────────────── */
    --ds-shadow-card: 0 2px 12px light-dark(rgb(131 128 124 / 3%), rgb(0 0 0 / 18%));

    --ds-shadow-dropdown: 0 6px 24px light-dark(rgb(131 128 124 / 12%), rgb(0 0 0 / 45%));

    /* Ours; the design specifies none. */
    --ds-shadow-popover:
        0 12px 32px light-dark(rgb(37 36 35 / 14%), rgb(0 0 0 / 50%)),
        0 2px 8px light-dark(rgb(37 36 35 / 8%), rgb(0 0 0 / 30%));

    /* ─── Control sizing ─────────────────────────────────────────────────────
       Four sizes. Normal is the default everywhere. */

    /* A token, because the prompt's ten-line cap is measured from it. */
    --ds-prompt-width: 768px;

    /* A 50px send disc plus 6px above and below. */
    --ds-prompt-height: 62px;
    --ds-prompt-line: 24px;

    /* The xs step stands where a tag would, so it is sized against the label beside it. */
    --ds-control-height-xs: 24px;
    --ds-control-height-sm: 36px;
    --ds-control-height: 42px;
    --ds-control-height-lg: 48px;

    /* Two rules need it: the box, and the offset that keeps it on the label's first line. */
    --ds-checkbox-size: 20px;

    --ds-control-pad-xs: var(--ds-space-1);   /* 3px  */
    --ds-control-pad-sm: var(--ds-space-2);   /* 6px, icon buttons */
    --ds-control-pad: var(--ds-space-3);      /* 9px  */
    --ds-control-pad-lg: var(--ds-space-4);   /* 12px */

    /* What the padding becomes on a side that holds an icon: a glyph carries its own optical margin. Tuned per size. */
    --ds-btn-pad-x-xs: var(--ds-space-4);     /* 12px */
    --ds-btn-pad-x-sm: var(--ds-space-5);     /* 18px */
    --ds-btn-pad-x: var(--ds-space-5);        /* 18px */
    --ds-btn-pad-x-lg: var(--ds-space-6);     /* 24px */

    --ds-btn-pad-icon-xs: var(--ds-space-2);  /*  6px */
    --ds-btn-pad-icon-sm: var(--ds-space-3);  /*  9px */
    --ds-btn-pad-icon: var(--ds-space-4);     /* 12px */
    --ds-btn-pad-icon-lg: 15px;               /* off the spacing scale on purpose: 18px less the base step */

    /* The trailing side: a chevron weighs less than a filled glyph, so it sits closer to the edge. */
    --ds-btn-pad-chevron-xs: var(--ds-space-2);  /*  6px */
    --ds-btn-pad-chevron-sm: var(--ds-space-3);  /*  9px */
    --ds-btn-pad-chevron: var(--ds-space-3);     /*  9px */
    --ds-btn-pad-chevron-lg: 15px;               /* 18px less the base step */

    /* The xs label sits half a pixel low: at 12px on a 24px pill a geometrically centred label reads high. */
    --ds-btn-nudge-xs: 0.5px;

    --ds-icon-size: 24px;
    --ds-dot-size: 8px;
    --ds-label-height: 26px;
    --ds-label-height-sm: 20px;

    /* The backdrop left visible above and below a full-height dialog. It bounds every dialog's height. */
    --ds-dialog-inset: 32px;

    /* ─── Layout ─────────────────────────────────────────────────────────── */
    --ds-sidebar-width: 229px;

    /* The bar is `min-height` over a baseline-aligned row, so any slack falls below the title. */
    --ds-topbar-height: 69px;
    --ds-rail-width: 300px;
    --ds-layout-gutter: 12px;

    /* ─── Z-index scale ──────────────────────────────────────────────────── */
    --ds-z-header: 50;
    --ds-z-popup: 200;
    --ds-z-modal: 1000;
    --ds-z-toast: 1100;

    /* ─── Motion ─────────────────────────────────────────────────────────── */
    --ds-transition-fast: 150ms ease;
    --ds-transition-normal: 250ms ease;
}

/* Without `corner-shape` these return to the drawn figures. Keep the two lists in step. */
@supports not (corner-shape: squircle) {
    :root {
        --ds-radius-xs: 6px;      /* drawn 5, on the 3px step */
        --ds-radius-sm: 12px;     /* drawn 12 */
        --ds-radius-md: 18px;     /* drawn 18 */
        --ds-radius-card: 27px;   /* drawn 27 */
        --ds-radius-panel: 30px;  /* drawn 30 */
        --ds-radius-badge: 6px;      /* drawn 6 */
        --ds-radius-badge-lg: 12px;  /* drawn 12 */
    }
}