/*
 * Design tokens — the single source of colour, type, spacing and shape
 * truth for the dashboard. No hex codes anywhere else in the stylesheets.
 *
 * The palette mirrors the Android app's `ui/theme/Color.kt` so a state
 * badge, a priority pill or a card reads the same on the phone and in
 * the browser. Every pre-5.102 variable name is still defined (values
 * retargeted) so no partial or view breaks; new names are grouped and
 * commented below.
 */

:root {
    /* ── Surfaces ─────────────────────────────────────────────────── */
    --color-bg:           #0A0A0F;   /* SageBackground */
    --color-surface:      #12121A;   /* SageSurface — cards */
    --color-surface-alt:  #191923;   /* SageSurfaceContainer — table heads, inputs */
    --color-surface-hi:   #22222E;   /* SageSurfaceVariant — hover, chips, tracks */
    --color-code-bg:      #0D0D11;   /* SageCodeBackground */
    --color-border:       rgba(255, 255, 255, 0.12);
    --color-border-hi:    rgba(255, 255, 255, 0.20);

    /* ── Text ─────────────────────────────────────────────────────── */
    --color-text:         #F4F4F5;   /* SageTextPrimary */
    --color-text-muted:   #A1A1AA;   /* SageTextSecondary */
    --color-text-dim:     #71717A;   /* SageTextMuted */

    /* ── Brand ────────────────────────────────────────────────────── */
    --color-primary:      #6366F1;   /* SageIndigoDark — button fill */
    --color-primary-hi:   #818CF8;   /* SageIndigo — links, active nav, focus */
    --color-primary-soft: rgba(129, 140, 248, 0.16);
    --color-accent:       #22D3EE;   /* SageCyan — Pulsar, sparingly */
    --color-accent-soft:  rgba(34, 211, 238, 0.16);

    /* ── Semantic ─────────────────────────────────────────────────── */
    --color-success:      #4ADE80;
    --color-warning:      #FBBF24;
    --color-orange:       #FB923C;
    --color-danger:       #F87171;
    --color-info:         #60A5FA;
    --color-purple:       #A78BFA;
    --color-neutral:      #A1A1AA;

    /* Tone pairs: text colour + 16 % alpha wash of the same colour.
       Every badge, chip, alert and toast tint is built from these —
       never a solid fill behind white text. */
    --color-success-soft: rgba(74, 222, 128, 0.16);
    --color-warning-soft: rgba(251, 191, 36, 0.16);
    --color-orange-soft:  rgba(251, 146, 60, 0.16);
    --color-danger-soft:  rgba(248, 113, 113, 0.16);
    --color-info-soft:    rgba(96, 165, 250, 0.16);
    --color-purple-soft:  rgba(167, 139, 250, 0.16);
    --color-neutral-soft: rgba(161, 161, 170, 0.16);

    /* ── Semantic state shades (legacy names, app values) ─────────── */
    /* StatusPending / StatusRunning / StatusCompleted / StatusFailed
       in Color.kt. cancelled has no app twin and reads as dim text. */
    --color-state-pending:   #FBBF24;
    --color-state-running:   #818CF8;
    --color-state-done:      #4ADE80;
    --color-state-failed:    #F87171;
    --color-state-cancelled: #71717A;
    --color-state-blocked:   #FB923C;

    /* Priority tier shades. Mirror Android's PriorityCritical / High /
       Medium / Low / Minimal in Color.kt so a P1 task on the web reads
       the same red as on the phone. Drift-pinned via
       PriorityBadgeBucketParityTest.php. */
    --color-priority-critical: #EF4444;  /* P1-P2: scope_guard reserved */
    --color-priority-high:     #F97316;  /* P3 */
    --color-priority-medium:   #EAB308;  /* P4 */
    --color-priority-low:      #22C55E;  /* P5 */
    --color-priority-minimal:  #6B7280;  /* P≥6 / unknown */

    /* ── Typography ───────────────────────────────────────────────── */
    /* 14 px base on a 16 px root: the scale is expressed in rem so the
       spacing scale (also rem) keeps its pixel meaning. */
    --font:        ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono:   ui-monospace, "SF Mono", "Cascadia Code", "Fira Code", Menlo, Consolas, monospace;
    --fs-xxs:      0.6875rem;  /* 11px — chart axes, bell counter */
    --fs-xs:       0.75rem;    /* 12px — badges, card titles, hints */
    --fs-sm:       0.8125rem;  /* 13px — tables, kv rows, secondary copy */
    --fs-base:     0.875rem;   /* 14px — body */
    --fs-md:       1rem;       /* 16px — h3, stat labels */
    --fs-lg:       1.125rem;   /* 18px — modal titles */
    --fs-xl:       1.25rem;    /* 20px — h2 */
    --fs-2xl:      1.5rem;     /* 24px — page title, stat values */
    --fs-3xl:      2rem;       /* 32px — error code, hero numbers */
    --lh:          1.5;
    --lh-tight:    1.25;
    --tracking-caps: 0.06em;   /* uppercase card titles + table heads */

    /* ── Spacing ──────────────────────────────────────────────────── */
    --sp-quarter: 2px;
    --sp-half:    4px;
    --sp-1: 0.25rem;   /* 4  */
    --sp-2: 0.5rem;    /* 8  */
    --sp-3: 0.75rem;   /* 12 */
    --sp-4: 1rem;      /* 16 */
    --sp-5: 1.5rem;    /* 24 */
    --sp-6: 2rem;      /* 32 */
    --sp-8: 3rem;      /* 48 */

    /* ── Component heights ────────────────────────────────────────── */
    --height-bars-chart: 140px;
    --height-line-chart: 240px;
    --height-log-list:   320px;
    --height-meter:      4px;
    --height-meter-tall: 6px;
    --height-progress:   6px;
    --height-sparkline:  48px;
    --height-control:    36px;   /* inputs, selects, default buttons */
    --height-control-sm: 28px;

    /* ── Shape ────────────────────────────────────────────────────── */
    --radius-sm:  6px;
    --radius:     8px;     /* buttons, inputs, chips */
    --radius-lg:  12px;    /* modals, nested panels */
    --radius-xl:  16px;    /* cards */
    --radius-card: var(--radius-xl);
    --radius-pill: 9999px;

    /* ── Shadow ───────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow:    0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

    /* ── Layout ───────────────────────────────────────────────────── */
    --header-h: 56px;
    --nav-h:    48px;
    --footer-h: 36px;
    --content-max: 1440px;
    --gutter:   var(--sp-5);   /* 24px desktop, 16px at ≤640 (see _grid.css) */

    /* Responsive breakpoints — documentation only; @media cannot read
       custom properties. Every media query in the bundle uses one of
       these literal values. */
    --bp-sm: 640px;     /* handsets → narrow tablets */
    --bp-md: 960px;     /* tablets → small laptops */
    --bp-lg: 1280px;    /* laptops → wide desktops */

    /* ── Motion ───────────────────────────────────────────────────── */
    --t-fast: 120ms;
    --t-base: 200ms;

    /* ── Z-index ladder ───────────────────────────────────────────── */
    --z-sticky: 10;     /* sticky table heads */
    --z-header: 100;    /* header / nav */
    --z-toast:  900;
    --z-modal:  1000;
    --z-skip:   10000;
}