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

:root {
    /* ─── 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: #2a78d6;   /* blue    */
    --ds-chart-2: #eb6834;   /* orange  */
    --ds-chart-3: #1baf7a;   /* aqua    */
    --ds-chart-4: #eda100;   /* yellow  */
    --ds-chart-5: #e87ba4;   /* magenta */
    --ds-chart-6: #008300;   /* green   */
    --ds-chart-7: #4a3aa7;   /* 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. */
    --ds-color-surface: var(--ds-bnw-1000);
    --ds-color-surface-sunken: var(--ds-bnw-900);
    --ds-color-border: var(--ds-bnw-850);
    --ds-color-border-strong: #d9d9d9;

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

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

    --ds-color-text: var(--ds-bnw-200);
    --ds-color-text-secondary: var(--ds-bnw-400);
    --ds-color-text-muted: var(--ds-bnw-500);

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

    /* Status pairs. */
    --ds-color-info-text: #1431a3;
    --ds-color-info-bg: #d8dffa;
    --ds-color-success-text: #628a2e;
    --ds-color-success-bg: #eaf3dd;

    /* The interaction steps that let a status colour back a button (`.ds-btn-success`). */
    --ds-color-success-bg-hover: #dfeccd;
    --ds-color-success-bg-press: #d3e4bb;
    --ds-color-warning-text: #ff5226;
    --ds-color-warning-bg: #ffece6;

    /* ⚠ Ours, pending the design: the middle step of a high / medium / low scale. */
    --ds-color-caution-text: #8a6100;
    --ds-color-caution-bg: #fff2cc;
    --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: #b3261e;
    --ds-color-danger-bg: #f8e1e1;
    --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 rgb(131 128 124 / 3%);

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

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

    /* ─── 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-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 */
    }
}