/* ============================================================================
   CivilHive Design System — 01 · Tokens
   ----------------------------------------------------------------------------
   Every colour, size, radius, shadow and duration in the product resolves to a
   name defined here. Nothing downstream writes a raw hex.

   The system is CHARCOAL-LED with an AMBER ACCENT:

     charcoal  is the action — primary buttons, headings, body ink, table heads
     amber     is the signal — active nav, focus, selection, ratings, data
     red       is reserved  — deadlines, overdue, destructive. Never decorative.

   The amber is #F49B14, taken from the CivilHive logo. It carries one hard
   constraint that shapes the whole system: amber is a light colour. White text
   on --cv-amber-500 is ~2.1:1 and fails WCAG outright, so

     * amber SURFACES always take dark ink   (#1A1A1A on amber-500 = 7.9:1)
     * amber TEXT always uses amber-700      (#A05805 on white     = 5.4:1)

   Those figures are measured, not estimated. amber-700 was #B36306 until it
   was checked: that is 4.46:1 on white, 4.16:1 on the page ground and 4.16:1
   on amber-50 — i.e. BELOW the 4.5 AA threshold for body text in the two
   places it is actually used, while the comment here claimed 5.3. The whole
   text tier (amber, green, red, blue) was re-solved to clear 4.5 on white,
   on --cv-bg and on its own soft chip, with headroom rather than by a hair.

   Those two rules are not stylistic. Breaking either one ships unreadable text.

   Prefix: every custom property is --cv-*. The old --a-* / --ch-* namespaces
   belong to the Argon layer this system replaces; keeping the namespaces
   disjoint means both can be loaded during the migration without collision.
   ========================================================================== */

:root {
  /* ─── Primitive · neutral ramp ──────────────────────────────────────────
     Warm-tinted rather than blue-slate. A blue-grey next to amber reads as a
     colour clash; warm grey reads as one family. */
  --cv-n-0:   #ffffff;
  --cv-n-25:  #fcfcfb;
  --cv-n-50:  #f7f7f5;
  --cv-n-100: #f0f0ed;
  --cv-n-200: #e4e4e0;
  --cv-n-300: #d2d2cc;
  --cv-n-400: #a8a8a1;
  /* Darkened from #7a7a73 in Phase F. `--cv-ink-3` is the meta/caption/
     helper-text step and it measured 4.32:1 on a card, 4.03 on the page
     ground and 3.79 on a sunk ground (table headers, count chips) -- below
     AA on all three, on every page of the product. `875fb7c` re-solved the
     `*-text` tokens and never touched the neutral ink ramp, and no check
     looked at it until the dark-mode audit measured both themes off
     rendered pages. 5.37 / 5.00 / 4.70 now, with headroom rather than
     landing exactly on 4.5. This token backs `--cv-ink-3` and nothing
     else -- it is used as no background or border anywhere. */
  --cv-n-500: #6b6b64;
  --cv-n-600: #56564f;
  --cv-n-700: #3a3a35;
  --cv-n-800: #262622;
  --cv-n-900: #1a1a1a;   /* brand ink, from the logo wordmark */
  --cv-n-950: #0f0f0e;

  /* ─── Primitive · amber ramp ───────────────────────────────────────────
     Built out from the logo's #F49B14. 500 is the brand value; 700 is the
     lowest step that clears 4.5:1 on white and is therefore the only step
     allowed for text. */
  --cv-amber-50:  #fef6e8;
  --cv-amber-100: #fdeac7;
  --cv-amber-200: #fbd68c;
  --cv-amber-300: #f9c155;
  --cv-amber-400: #f7ae2e;
  --cv-amber-500: #f49b14;   /* brand */
  --cv-amber-600: #d97f06;
  --cv-amber-700: #a05805;   /* text-safe: 5.4:1 white, 5.0:1 on bg & amber-50 */
  --cv-amber-800: #8c4d0c;
  --cv-amber-900: #70400f;

  /* ─── Primitive · semantic hues ────────────────────────────────────────
     Warning deliberately sits in the amber family (it IS a caution colour);
     danger is a true red so the two never blur together on a status chip. */
  --cv-green-50:  #e8f6f0;
  --cv-green-500: #0e8a5f;
  --cv-green-700: #0c7651;
  --cv-red-50:    #fdeceb;
  --cv-red-500:   #dc2626;
  --cv-red-700:   #c62222;
  --cv-blue-50:   #eaf1fd;
  --cv-blue-500:  #2563eb;
  --cv-blue-700:  #225dde;

  /* ─── Semantic · surfaces ──────────────────────────────────────────────
     Four levels only. More than four and nobody can remember which is which. */
  --cv-bg:            var(--cv-n-50);    /* the page behind everything */
  --cv-surface:       var(--cv-n-0);     /* cards, menus, the nav bar */
  --cv-surface-sunk:  var(--cv-n-100);   /* wells, table stripes, disabled */
  --cv-surface-inset: var(--cv-n-25);    /* barely-there fill, e.g. tfoot */
  --cv-overlay:       rgb(26 26 26 / 0.48);

  /* ─── Semantic · ink ───────────────────────────────────────────────────*/
  --cv-ink:        var(--cv-n-900);   /* headings, primary content */
  --cv-ink-2:      var(--cv-n-600);   /* body copy, descriptions */
  --cv-ink-3:      var(--cv-n-500);   /* meta, captions, helper text */
  --cv-ink-4:      var(--cv-n-400);   /* placeholders, disabled labels */
  --cv-ink-on-dark:    var(--cv-n-0);
  --cv-ink-on-accent:  var(--cv-n-900);  /* THE amber contrast rule */

  /* ─── Semantic · lines ─────────────────────────────────────────────────
     A hairline does the work a drop shadow used to. */
  --cv-line:        var(--cv-n-200);
  --cv-line-soft:   var(--cv-n-100);
  --cv-line-strong: var(--cv-n-300);

  /* ─── Semantic · action (charcoal) ─────────────────────────────────────*/
  --cv-action:       var(--cv-n-900);
  --cv-action-hover: var(--cv-n-800);
  --cv-action-press: var(--cv-n-950);
  --cv-action-ink:   var(--cv-n-0);

  /* ─── Semantic · accent (amber) ────────────────────────────────────────*/
  --cv-accent:       var(--cv-amber-500);
  --cv-accent-hover: var(--cv-amber-600);
  --cv-accent-text:  var(--cv-amber-700);  /* the ONLY amber for type */
  --cv-accent-soft:  var(--cv-amber-50);
  --cv-accent-line:  var(--cv-amber-200);

  /* ─── Semantic · status ────────────────────────────────────────────────*/
  --cv-success:      var(--cv-green-500);
  --cv-success-text: var(--cv-green-700);
  --cv-success-soft: var(--cv-green-50);
  --cv-warning:      var(--cv-amber-500);
  --cv-warning-text: var(--cv-amber-700);
  --cv-warning-soft: var(--cv-amber-50);
  --cv-danger:       var(--cv-red-500);
  --cv-danger-text:  var(--cv-red-700);
  --cv-danger-soft:  var(--cv-red-50);
  --cv-info:         var(--cv-blue-500);
  --cv-info-text:    var(--cv-blue-700);
  --cv-info-soft:    var(--cv-blue-50);

  /* Urgency is its own token, not an alias of danger, because it marks time
     (a closing deadline) rather than error or destruction. It happens to be
     the same red today; separating them means one can move without the other. */
  --cv-urgent:      var(--cv-red-500);
  --cv-urgent-text: var(--cv-red-700);

  /* ─── Typography ───────────────────────────────────────────────────────
     Inter Variable, self-hosted (see base.css for the @font-face). Tabular
     figures are switched on for money, dates and IDs in base.css — on a
     bidding platform, columns of numbers must align. */
  --cv-font: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cv-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  /* Sizes. Body is 15px: 16 is loose for a data-dense workspace, 14 is mean
     on a marketing page. 15 carries both. */
  --cv-text-display: 3.5rem;
  --cv-text-h1:      2.25rem;
  --cv-text-h2:      1.75rem;
  --cv-text-h3:      1.3125rem;
  --cv-text-h4:      1.0625rem;
  --cv-text-lg:      1.0625rem;
  --cv-text-md:      0.9375rem;   /* body */
  --cv-text-sm:      0.875rem;
  --cv-text-xs:      0.8125rem;
  --cv-text-2xs:     0.75rem;

  /* Optical tracking: large type needs negative tracking to stop looking
     gappy; small type needs a touch of positive to stay legible. */
  --cv-track-display: -0.032em;
  --cv-track-h1:      -0.024em;
  --cv-track-h2:      -0.02em;
  --cv-track-h3:      -0.015em;
  --cv-track-body:    -0.006em;
  --cv-track-micro:    0.01em;

  --cv-leading-tight: 1.15;
  --cv-leading-snug:  1.35;
  --cv-leading:       1.6;

  --cv-weight-regular:  400;
  --cv-weight-medium:   500;
  --cv-weight-semibold: 600;
  --cv-weight-bold:     700;

  /* ─── Space · 4px base ─────────────────────────────────────────────────*/
  --cv-sp-1:  0.25rem;
  --cv-sp-2:  0.5rem;
  --cv-sp-3:  0.75rem;
  --cv-sp-4:  1rem;
  --cv-sp-5:  1.25rem;
  --cv-sp-6:  1.5rem;
  --cv-sp-8:  2rem;
  --cv-sp-10: 2.5rem;
  --cv-sp-12: 3rem;
  --cv-sp-16: 4rem;
  --cv-sp-20: 5rem;
  --cv-sp-24: 6rem;

  /* ─── Radii ────────────────────────────────────────────────────────────
     Controls are pills, panels are 12px. That pairing — soft controls on
     crisp panels — is the reference design's most recognisable signature. */
  --cv-r-xs:   4px;
  --cv-r-sm:   6px;
  --cv-r-md:   8px;    /* inputs */
  --cv-r-lg:   12px;   /* cards, panels */
  --cv-r-xl:   16px;   /* hero media, large surfaces */
  --cv-r-2xl:  24px;
  --cv-r-pill: 999px;  /* buttons, chips */

  /* ─── Elevation ────────────────────────────────────────────────────────
     Almost nothing. Only surfaces that genuinely float get a real shadow. */
  --cv-shadow-xs: 0 1px 2px rgb(16 15 14 / 0.04);
  --cv-shadow-sm: 0 1px 3px rgb(16 15 14 / 0.06), 0 1px 2px rgb(16 15 14 / 0.04);
  --cv-shadow-md: 0 4px 12px -2px rgb(16 15 14 / 0.08), 0 2px 4px -2px rgb(16 15 14 / 0.04);
  --cv-shadow-lg: 0 12px 32px -8px rgb(16 15 14 / 0.14), 0 4px 8px -4px rgb(16 15 14 / 0.06);
  --cv-shadow-xl: 0 24px 56px -12px rgb(16 15 14 / 0.20);

  /* Focus is amber and unmistakable. Accessibility is not a place to be shy. */
  --cv-ring: 0 0 0 3px rgb(244 155 20 / 0.38);
  --cv-ring-danger: 0 0 0 3px rgb(220 38 38 / 0.28);

  /* ─── Motion ───────────────────────────────────────────────────────────*/
  --cv-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --cv-t-fast: 120ms;
  --cv-t-mid:  180ms;
  --cv-t-slow: 260ms;

  /* ─── Layout ───────────────────────────────────────────────────────────*/
  /* Containers are fluid — see layout.css. Only running text keeps a cap,
     because line length has a readability limit the viewport does not. */
  --cv-container-prose: 44rem;
  --cv-rail:          272px;   /* list-page filter rail */
  --cv-console-nav:   248px;   /* admin console left nav */
  --cv-header-h:      64px;
  --cv-z-header:      1030;
  --cv-z-rail:        1020;
  --cv-z-dropdown:    1040;
  --cv-z-modal:       1060;
  --cv-z-toast:       1080;
}

/* ============================================================================
   Dark theme — scaffolded, not yet pixel-reviewed
   ----------------------------------------------------------------------------
   Every rule downstream reads semantic tokens only, so dark mode is this block
   and nothing else. It is wired up and coherent, but the light theme is the one
   that has been designed; treat this as a working base to refine, not a
   finished surface.

   Note the amber rule inverts here. On charcoal the mid amber has plenty of
   contrast, so --cv-accent-text moves UP the ramp (400) instead of down (700).
   ========================================================================== */
:root[data-theme="dark"] {
  --cv-bg:            #141413;
  --cv-surface:       #1c1c1a;
  --cv-surface-sunk:  #232320;
  --cv-surface-inset: #191917;
  --cv-overlay:       rgb(0 0 0 / 0.66);

  --cv-ink:    #f5f5f3;
  --cv-ink-2:  #bfbfb8;
  --cv-ink-3:  #96968e;
  --cv-ink-4:  #6e6e67;
  --cv-ink-on-dark: #f5f5f3;
  --cv-ink-on-accent: #1a1a1a;   /* unchanged: amber stays a light surface */

  --cv-line:        #2f2f2b;
  --cv-line-soft:   #262622;
  --cv-line-strong: #43433d;

  /* Charcoal cannot be the action colour on a charcoal page — the primary
     button would vanish. Dark mode promotes amber to the action role. */
  --cv-action:       var(--cv-amber-500);
  --cv-action-hover: var(--cv-amber-400);
  --cv-action-press: var(--cv-amber-600);
  --cv-action-ink:   var(--cv-n-900);

  --cv-accent:      var(--cv-amber-500);
  --cv-accent-hover:var(--cv-amber-400);
  --cv-accent-text: var(--cv-amber-400);
  --cv-accent-soft: rgb(244 155 20 / 0.14);
  --cv-accent-line: rgb(244 155 20 / 0.32);

  --cv-success-text: #4fd39a;
  --cv-success-soft: rgb(14 138 95 / 0.18);
  --cv-warning-text: var(--cv-amber-400);
  --cv-warning-soft: rgb(244 155 20 / 0.16);
  --cv-danger:       #ef4444;
  --cv-danger-text:  #ff8f87;
  --cv-danger-soft:  rgb(220 38 38 / 0.18);
  --cv-info-text:    #7ea6f8;
  --cv-info-soft:    rgb(37 99 235 / 0.18);
  --cv-urgent:       #ef4444;
  --cv-urgent-text:  #ff8f87;

  --cv-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.36);
  --cv-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.44);
  --cv-shadow-md: 0 4px 12px -2px rgb(0 0 0 / 0.52);
  --cv-shadow-lg: 0 12px 32px -8px rgb(0 0 0 / 0.60);
  --cv-shadow-xl: 0 24px 56px -12px rgb(0 0 0 / 0.68);
}

/* ============================================================================
   Bootstrap bridge
   ----------------------------------------------------------------------------
   Bootstrap 5.3 stays loaded for its grid, utilities and JS behaviours, and
   this design system owns every visible component on top of it. These
   assignments catch the Bootstrap internals we do NOT restyle by hand — link
   colours inside third-party markup, `.text-bg-*`, table variables, the focus
   colour on stray controls — so nothing falls back to Bootstrap indigo.
   ========================================================================== */
:root {
  --bs-primary:        #1a1a1a;
  --bs-primary-rgb:    26, 26, 26;
  --bs-secondary:      #56564f;
  --bs-secondary-rgb:  86, 86, 79;
  --bs-success:        #0e8a5f;
  --bs-success-rgb:    14, 138, 95;
  --bs-info:           #2563eb;
  --bs-info-rgb:       37, 99, 235;
  --bs-warning:        #f49b14;
  --bs-warning-rgb:    244, 155, 20;
  --bs-danger:         #dc2626;
  --bs-danger-rgb:     220, 38, 38;
  --bs-light:          #f7f7f5;
  --bs-dark:           #1a1a1a;

  --bs-body-bg:        var(--cv-bg);
  --bs-body-color:     var(--cv-ink-2);
  --bs-emphasis-color: var(--cv-ink);
  --bs-border-color:   var(--cv-line);
  --bs-link-color:     var(--cv-ink);
  --bs-link-hover-color: var(--cv-accent-text);
  --bs-font-sans-serif:  var(--cv-font);
  --bs-body-font-size:   var(--cv-text-md);
  --bs-border-radius:    var(--cv-r-md);
  --bs-border-radius-sm: var(--cv-r-sm);
  --bs-border-radius-lg: var(--cv-r-lg);
  --bs-border-radius-xl: var(--cv-r-xl);
  --bs-focus-ring-color: rgb(244 155 20 / 0.38);
}