/*
 * Design tokens for the new (non-Bootstrap) UI.
 * Consumed by base.css, layout.css, components.css.
 * See ui_ux/UI-UX-Principles.md §8 (consistent visual language) and
 * ui_ux/migration-plan.md §2.2/§4.1.
 */
:root {
  /* -- Color: accent -------------------------------------------------- */
  --color-primary: #1d5fd6;
  --color-primary-hover: #164ab0;
  /* The primary accent as a wash, matching the `-bg` tints the status colours
     already carry — for a surface that is tinted rather than filled. */
  --color-primary-bg: #e8f0fd;
  /* One step down from the wash, so a control that is *held* in the primary
     tint (an open disclosure) still has somewhere to go on hover. Keeps
     `--color-primary` as its text above 4.5:1 (~4.7:1). */
  --color-primary-bg-hover: #dce8fc;
  /* The accent's pill border, completing the family the status colours already
     have. Sits between the wash and the accent so a tinted pill has an edge
     that clears WCAG 1.4.11's 3:1 without reading as a filled control. */
  --color-primary-border: #aac6f2;

  --color-success: #16794e;
  --color-success-bg: #e6f4ec;
  --color-success-border: #a8d9c0;

  --color-warning: #92660a;
  --color-warning-bg: #fbf0da;
  --color-warning-border: #edcf8e;
  --color-warning-hover: #755208;

  --color-danger: #b3261e;
  --color-danger-bg: #fbe9e8;
  --color-danger-border: #eab6b2;
  --color-danger-hover: #8f1e18;

  /* Starred/favourite affordance. Its own tokens rather than reusing the
     warning family: a star is not a warning, and the two must be free to
     diverge. The bright fill alone is only ~1.8:1 on white, so the darker
     outline is what carries WCAG 1.4.11's 3:1 non-text contrast (~5.5:1). */
  --color-star: #f0b429;
  --color-star-outline: #8a6209;

  --color-neutral-bg: #eef0f3;
  --color-neutral-border: #d7dbe0;
  --color-neutral-text: #3f4650;

  /* -- Color: surfaces and text ---------------------------------------- */
  --color-bg: #ffffff;
  /* What the page sits on, one step under white, so that tables and panels
     can read as surfaces by being white rather than by being boxed in lines.
     Not `--color-bg`, which dialogs and popovers use to mean "white". */
  --color-canvas: #f5f6f8;
  --color-bg-subtle: #f7f8fa;
  --color-surface: #ffffff;
  /* A tint one step down from `--color-surface`, for a row or cell that must
     read as picked-out against the surface it sits on without becoming a
     panel of its own (the selected row in a record table). */
  --color-surface-subtle: #f2f5f9;
  --color-border: #dde1e6;
  --color-border-strong: #c3c9d1;
  /* Hairline separator between rows *inside* a component, lighter than
     `--color-border`, which delimits the component itself. */
  --color-border-subtle: #eceff3;

  --color-text: #1c2126;
  --color-text-muted: #5b6470;
  /* Below `muted`: for text that should recede almost entirely (the footer).
     Deliberately not used for anything a reader needs — it does not clear the
     4.5:1 body-text contrast bar that `--color-text-muted` does. */
  --color-text-subtle: #9ca3af;
  --color-text-on-primary: #ffffff;
  --color-focus-ring: #1d5fd6;

  /* Inline code and preformatted blocks. Warmer and flatter than the surface
     tints above on purpose: code should read as a quoted artifact, not as
     another panel. */
  --color-code-bg: #f0f0f0;
  --color-code-border: #d8d8d8;

  /* -- Typography -------------------------------------------------------
     Self-hosted faces first, declared in fonts.css (generated by
     scripts/build-fonts.js, which says why they are not left to the system).
     The system stack behind each stays as the fallback for a glyph outside
     the shipped latin subsets, and for the moment before the file arrives. */
  --font-sans:
    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-mono:
    "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    monospace;

  --font-size-xs: 0.75rem;
  /* The step below `xs`, for dense mono metadata (the CVSS vector) that must
     shrink without falling off the scale into a raw value. */
  --font-size-2xs: 0.6875rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.9375rem;
  /* The step between body text and `lg`. Exists so h4 has a size of its own
     rather than collapsing onto body text or jumping to the h3 size. */
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;

  --line-height-tight: 1.25;
  --line-height-base: 1.5;

  /* Medium and semibold sit half a step under their usual 500/600 because
     Plex's strokes are darker than the system faces these were tuned on: at
     500/600 every table reference, pill and button read as bold. The variable
     face takes any weight; the mono face, shipped at 400 and 500 only,
     resolves 450 to 500. */
  --font-weight-normal: 400;
  --font-weight-medium: 450;
  --font-weight-semibold: 550;

  /* Tracking for uppercase labels (facts terms, captions, nav sections). One
     value on purpose: every uppercase label tracks the same amount. Plex's
     capitals are already wide, so this is lighter than a system face needs. */
  --letter-spacing-caps: 0.02em;

  /* -- Spacing (4px base) ------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  /* -- Motion --------------------------------------------------------------
     One duration, used only for state feedback on interactive elements. Kept
     short deliberately: §13 of UI-UX-Principles.md asks for a professional
     engineering tool, and anything slower starts to feel like decoration. */
  --duration-fast: 120ms;

  /* -- Shape -------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.1);

  /* -- Layout -------------------------------------------------------------- */
  --sidebar-width: 15rem;
  --topbar-height: 3.25rem;

  /* Content and the topbar use all of the available width. Data tables can
     expose their columns on wide displays while the prose token below keeps
     running text at a readable measure. */
  --content-max: none;

  /* A readable line length for prose. Justifications and scenarios are written
     to be read, and a full-width panel is hard to track back to the start of
     the next line without this separate measure. */
  --prose-max: 44rem;

  /* A single-column form's comfortable measure. Wider than a prose column
     because these are labelled fields and multi-line justifications, not
     running text — at 32rem the textareas were too cramped to review what had
     been typed into them. */
  --form-max: 48rem;

  /* A two-column form's measure. The single-column token above is tuned for a
     handful of fields; a record with a facts column beside a judgement column
     needs room for both without either dropping under the width at which its
     own field grid collapses back to one column. */
  --form-max-wide: 76rem;

  /* One height for every control that can sit on a filter row — text input,
     select, and the buttons beside them — so a row of mixed controls shares a
     baseline instead of each taking the height its own content implies. */
  --control-height: 2.25rem;
  --control-height-sm: 1.75rem;
}