/* Design tokens — the one place colours, type, spacing, radii and shadows
   are defined. Loaded first on every page (pages/common/header.php).

   Use the tokens, never raw values: var(--ink), var(--fs-sm), var(--sp-3)…
   The older names at the bottom (--text, --accent, --border …) are aliases
   kept so existing rules follow the palette; prefer the new names. */

:root {
    /* ── type ─────────────────────────────────────────────────────
       Inter covers Latin, Greek, Cyrillic and Vietnamese; the system and
       Noto fallbacks pick up Arabic, Hebrew, Indic, Thai and CJK text, so
       a name or a criterion in any script renders in a matching face. */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        "Noto Sans", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans Devanagari", "Noto Sans Thai",
        "Noto Sans JP", "Noto Sans SC", "Noto Sans KR", Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* A short, fixed scale: every font-size in the app is one of these.
       Nothing is smaller than 12px — people read this on laptops, tablets and phones, in a second
       or third language — and body text is 15px. Never write a raw px size; pick the step. */
    --fs-2xs: 12px;     /* micro labels, badges, table headers */
    --fs-xs: 13px;      /* meta lines, chips, captions */
    --fs-sm: 14px;      /* secondary text, dense tables */
    --fs-md: 15px;      /* body text, inputs */
    --fs-lg: 17px;      /* card titles, page title */
    --fs-xl: 19px;      /* section headings */
    --fs-2xl: 24px;     /* big numbers */
    --fs-3xl: 28px;     /* page greeting */

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

    --lh-tight: 1.25;
    --lh-snug: 1.4;
    --lh-normal: 1.55;

    /* ── colour: neutrals ───────────────────────────────────────── */
    --ink: #101828;           /* primary text */
    --ink-2: #344054;         /* strong secondary text */
    --ink-3: #475467;         /* secondary text */
    --muted-ink: #667085;     /* meta, captions */
    --faint-ink: #7B8596;     /* placeholders, disabled — 4:1 on white */
    --line: #EAECF0;          /* hairlines, card borders */
    --line-strong: #D0D5DD;   /* input borders */
    --surface: #FFFFFF;       /* cards */
    --surface-2: #F9FAFB;     /* insets, table heads */
    --surface-3: #F2F4F7;     /* chips, hovered rows */
    --canvas: #F4F6FA;        /* page background */

    /* ── colour: brand & semantic ───────────────────────────────── */
    --primary: #4F46E5;
    --primary-hover: #4338CA;
    --primary-ink: #3730A3;
    --primary-soft: #EEF2FF;
    --primary-soft-2: #E0E7FF;
    --focus-ring: 0 0 0 3px rgba(79, 70, 229, .22);

    --success: #079455;
    --success-ink: #067647;
    --success-soft: #ECFDF3;
    --success-line: #ABEFC6;

    --warning: #DC6803;
    --warning-ink: #B54708;
    --warning-soft: #FFFAEB;
    --warning-line: #FEDF89;

    --danger: #D92D20;
    --danger-ink: #B42318;
    --danger-soft: #FEF3F2;
    --danger-line: #FECDCA;

    --info: #1570EF;
    --info-ink: #175CD3;
    --info-soft: #EFF8FF;

    --plum: #6941C6;
    --plum-ink: #5925DC;
    --plum-soft: #F4F3FF;

    /* In Review's own hue — kept apart from --primary (In Progress) and
       --plum (the epic tag), which sit too close together to tell the
       status lozenges apart at a glance. */
    --orange: #FB6514;
    --orange-ink: #C4320A;
    --orange-soft: #FFF6ED;

    /* ── shape & depth ─────────────────────────────────────────── */
    --r-xs: 6px;
    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-pill: 999px;

    --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);
    --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);

    /* ── spacing (4px grid) ────────────────────────────────────── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    --ease: cubic-bezier(.2, .8, .2, 1);

    /* ── chrome ────────────────────────────────────────────────── */
    --sidebar-bg: #0F1729;
    --sidebar-active: var(--primary);
    --topbar-h: 60px;

    /* ── older names, kept as aliases ──────────────────────────── */
    --bg: var(--canvas);
    --card: var(--surface);
    --border: var(--line);
    --text: var(--ink);
    --muted: var(--muted-ink);
    --accent: var(--primary);
    --accent2: var(--info);
    --green: var(--success);
    --amber: #F79009;
    --red: var(--danger);
    --purple: var(--plum);
    --radius: var(--r-lg);
    --shadow: var(--shadow-sm);
}