/* ============================================================
   ClientVoice — design tokens (RL-1b)
   Plain CSS. No build tooling. Variables only via custom props.

   WHAT THIS FILE IS
   ------------------
   The single source of truth for every `--cv-*` design token used across
   the app (surfaces, borders, text, accent, status, spacing, radii,
   shadow, type, motion, chrome palette, z-stack) and for the five-value
   responsive breakpoint scale (below).

   Load this file FIRST, before every other stylesheet on every page —
   templates add exactly one line for it, immediately before their first
   existing `<link rel="stylesheet">`:

       <link rel="stylesheet" href="/static/css/tokens.css?v={{ asset_version }}">

   HISTORY / NO VISUAL CHANGE
   ---------------------------
   The `--cv-*` block below was hoisted verbatim out of the `:root` block
   that used to live at the top of static/css/reports-d5.css (same names,
   same values — see git history for the pre-RL-1b block). It was ALSO
   self-declared, bit-identical, as a smaller fallback subset inside
   static/css/responsive-table.css for pages that loaded that file without
   reports-d5.css; RL-1b deleted that duplicate now that every page loads
   this file first. Cascade order (`:root` declarations don't "override"
   each other across files — the LAST one loaded for a given custom
   property wins, and every value here is identical to what it replaces)
   means this hoist is a no-op for computed styles. Do not add a new
   value here that differs from what a consuming page already renders —
   that would be a visual change, not a refactor.

   USAGE NOTE
   ----------
   Reference tokens as `var(--cv-*)` in any stylesheet or inline <style>
   block loaded after this file. Do not redeclare `--cv-*` custom
   properties elsewhere — if a page needs a value this file doesn't have,
   add it HERE (this is the only :root token owner in the codebase now),
   not as a local fallback block.
   ============================================================ */

:root {
  /* — Surface — */
  --cv-bg-app:            #f6f7f9;
  --cv-bg-surface:        #ffffff;
  --cv-bg-subtle:         #f1f3f7;
  --cv-bg-sunken:         #ebeef3;

  /* — Lines — */
  --cv-border:            #e4e7ec;
  --cv-border-strong:     #d3d7de;
  --cv-border-focus:      #5b5fc7;

  /* — Text — */
  --cv-text-primary:      #14181f;
  --cv-text-secondary:    #4a525e;
  --cv-text-muted:        #8a93a1;
  --cv-text-on-accent:    #ffffff;

  /* — Accent (matches existing chrome) — */
  --cv-accent:            #5b5fc7;
  --cv-accent-hover:      #4b50bc;
  --cv-accent-soft:       #eef0fc;
  --cv-accent-softer:     #f6f7fd;
  --cv-accent-border:     #d6daf3;

  /* — Status — */
  --cv-success:           #1a7f4f;
  --cv-success-soft:      #e6f4ed;
  --cv-success-border:    #b9dfca;

  --cv-warn:              #a86200;
  --cv-warn-soft:         #fdf2e0;
  --cv-warn-border:       #f0d59a;

  --cv-danger:            #b42318;
  --cv-danger-soft:       #fee9e7;
  --cv-danger-border:     #f3b8b3;

  --cv-info:              #1d4ed8;
  --cv-info-soft:         #e6efff;
  --cv-info-border:       #b8cdf3;

  --cv-neutral-pill:      #4a525e;
  --cv-neutral-pill-soft: #eef0f3;

  /* — Impact semantic — */
  --cv-impact-high:       #9f1c39;
  --cv-impact-high-soft:  #fbe6ec;
  --cv-impact-med:        #875508;
  --cv-impact-med-soft:   #fcedd6;
  --cv-impact-low:        #3f5667;
  --cv-impact-low-soft:   #eaeef3;

  /* — Spacing — */
  --cv-s-1: 4px;
  --cv-s-2: 8px;
  --cv-s-3: 12px;
  --cv-s-4: 16px;
  --cv-s-5: 20px;
  --cv-s-6: 24px;
  --cv-s-7: 32px;
  --cv-s-8: 40px;
  --cv-s-9: 56px;
  --cv-s-10:72px;

  /* — Radii — */
  --cv-r-xs: 4px;
  --cv-r-sm: 6px;
  --cv-r-md: 8px;
  --cv-r-lg: 12px;
  --cv-r-xl: 16px;
  --cv-r-pill: 999px;

  /* — Shadow — */
  --cv-shadow-1: 0 1px 2px rgba(20, 24, 31, 0.04), 0 1px 1px rgba(20, 24, 31, 0.03);
  --cv-shadow-2: 0 2px 4px rgba(20, 24, 31, 0.05), 0 4px 12px rgba(20, 24, 31, 0.06);
  --cv-shadow-3: 0 8px 24px rgba(20, 24, 31, 0.08), 0 2px 6px rgba(20, 24, 31, 0.05);
  --cv-shadow-modal: 0 20px 60px rgba(20, 24, 31, 0.18), 0 4px 14px rgba(20, 24, 31, 0.08);

  /* — Type — */
  /* [D6] --cv-font-sans switched to Inter so chrome (sidebar, topbar,
     admin tables, public pages) inherits a consistent typeface across
     reports + non-reports pages. --cv-font-display preserves Plus
     Jakarta Sans for any report-detail component that explicitly opts
     into the display face. */
  --cv-font-sans: "Inter", system-ui, -apple-system, "Helvetica Neue", Helvetica, sans-serif;
  --cv-font-display: "Plus Jakarta Sans", "Inter", ui-sans-serif, sans-serif;   /* [D6] */
  --cv-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  --cv-fs-xs:   11px;
  --cv-fs-sm:   12.5px;
  --cv-fs-base: 14px;
  --cv-fs-md:   15px;
  --cv-fs-lg:   17px;
  --cv-fs-xl:   20px;
  --cv-fs-2xl:  26px;
  --cv-fs-3xl:  32px;

  /* [D6] Mobile type scale — discrete (not fluid). Inputs stay at 16px
     to suppress iOS Safari zoom-on-focus. */
  --cv-mfs-input:   16px;   /* iOS no-zoom floor */
  --cv-mfs-base:    15px;   /* body */
  --cv-mfs-sm:      13px;
  --cv-mfs-xs:      11.5px;
  --cv-mfs-md:      16px;   /* card titles, sub-headings */
  --cv-mfs-lg:      18px;   /* section titles */
  --cv-mfs-xl:      22px;   /* page titles */
  --cv-mfs-2xl:     26px;   /* hero / detail headlines */

  --cv-lh-tight:  1.2;
  --cv-lh-normal: 1.45;
  --cv-lh-prose:  1.6;

  --cv-fw-normal:   400;
  --cv-fw-medium:   500;
  --cv-fw-semibold: 600;
  --cv-fw-bold:     700;

  /* — Motion — */
  --cv-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ============================================================
     [D6] D-LOOP-6 additions — Mobile/Responsive design system.
     The tokens below are the single source of truth across the
     responsive system. Surfaces consume these for spacing, touch
     targets, chrome palette, and z-stack ordering.
     ============================================================ */

  /* [D6] Per-tier container padding. Surfaces consume --cv-pad-x
     for left/right padding so mobile gutters stay consistent. */
  --cv-pad-x:        16px;       /* mobile <=640 */
  --cv-pad-y:        20px;
  --cv-card-pad-x:   14px;
  --cv-card-pad-y:   14px;
  --cv-stack-gap:    10px;       /* between cards in a card list */
  --cv-section-gap:  28px;       /* between major page blocks */

  /* [D6] Touch hit target. 44px = Apple HIG floor; used as the
     *minimum* button height across the responsive system. */
  --cv-touch: 44px;

  /* [D6] Sheet shadow — half of modal, no top shadow */
  --cv-shadow-sheet: 0 -8px 24px rgba(20, 24, 31, 0.10);

  /* [D6] CHROME palette — matches static/css/app-shell.css (indigo).
     Intentionally separate from --cv-accent (the D-LOOP-5 reports
     purple); chrome and report-detail are different visual contexts
     that the operator already accepts as distinct. */
  --cv-chrome-accent:        #6366F1;
  --cv-chrome-accent-dark:   #4F46E5;
  --cv-chrome-accent-soft:   #EEF0FF;
  --cv-chrome-bg-sidebar:    #FBFCFD;
  --cv-chrome-border:        #DEE3EB;
  --cv-chrome-hover:         #F1F3F8;
  --cv-chrome-text:          #0F172A;
  --cv-chrome-text-2:        #475569;
  --cv-chrome-text-3:        #94A3B8;

  /* [D6] z-stack — single source of truth */
  --cv-z-topbar:       30;
  --cv-z-drawer-scrim: 40;
  --cv-z-drawer:       50;
  --cv-z-sheet-scrim:  60;
  --cv-z-sheet:        70;
  --cv-z-toast:        80;
}

/* ============================================================
   [RL-1b] Breakpoint scale — five values, single source of truth.

   CSS custom properties CANNOT be used inside an `@media` condition
   (e.g. `@media (min-width: var(--bp-md))` is invalid CSS — media
   query conditions are parsed before custom-property substitution).
   So the canonical values are documented here as the reference for
   every NEW `@media` rule written in this codebase, and every new rule
   must use one of these five widths:

       --bp-sm:  480px   (phone landscape / large phone)
       --bp-md:  768px   (tablet portrait)
       --bp-lg:  1024px  (tablet landscape / small laptop)
       --bp-xl:  1280px  (desktop)
       --bp-xxl: 1440px  (wide desktop)

   scripts/check_breakpoints.py enforces this scale in CI: it scans every
   `@media` width in static/css/**/*.css and templates/**/*.html and fails
   the build on any width that is neither one of these five values nor an
   explicitly named pre-existing exception in that script's ALLOWLIST.
   The existing scatter of legacy widths (540, 640, 720, 760, 900, 1100,
   ...) is catalogued there and in docs/rl1-responsive-audit; RL-2
   migrates pages onto this scale and shrinks that allowlist over time.
   This PR introduces the scale and the gate — it does NOT rewrite any
   existing `@media` rule (no visual change).

   The custom properties below exist for JS (`getComputedStyle(...)
   .getPropertyValue('--bp-md')`) and for `env()`-adjacent runtime reads —
   never for `@media` conditions themselves.
   ============================================================ */
:root {
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-xxl: 1440px;
}