/* =============================================================================
   rhq_tokens.css — ResponderHQ design tokens (the design-system source of truth)
   -----------------------------------------------------------------------------
   This file is the SINGLE SOURCE OF TRUTH for ResponderHQ's design tokens going
   forward. All future components/screens should reference these `--rhq-*` custom
   properties instead of hard-coded hex/px values.

   Contract: this file DEFINES tokens. It does NOT consume them and does NOT
   restyle any element — there are intentionally no element/class selectors
   here, only `:root { --rhq-*: ... }` declarations. Wiring tokens into
   components happens in the component sheets, not here.

   Naming: sub-namespaced (`--rhq-color-*`, `--rhq-status-*`, `--rhq-space-*`, …)
   to avoid collision with the existing layout vars owned by other sheets
   (`--rhq-navbar-height`, `--rhq-footer-max-height`, `--rhq-page-header-*` —
   defined in rhq_datatable_viewport.css / layout_spacing_overrides.css; NOT
   redefined here).

   Values are governed by docs/ui-audit/05-guideline/rhq-web-guideline.md
   (v2.1 — Step 0 canonical update, 2026-08-10). foundations.md is historical.
   ============================================================================= */

:root {
  /* ---- Brand ------------------------------------------------------------- */
  --rhq-color-primary:        #0061f2;   /* ResponderHQ blue */
  --rhq-color-primary-700:    #004dbf;   /* primary hover/active */
  --rhq-color-secondary:      #6900c7;   /* purple */
  --rhq-gradient-brand:       linear-gradient(135deg, #0061f2 0%, rgba(105, 0, 199, 0.86) 100%);
  --rhq-brand-steel:          #1f2d41;   /* Steel Blue — brand primary; stays the ink (--rhq-text-strong) */
  --rhq-brand-yellow:         #ffd800;   /* THE yellow — logo, checkerboard, LIVE signal only. Folds in #ffc400 / #f5c518. */

  /* ---- Surfaces / backgrounds ------------------------------------------- */
  --rhq-surface:              #ffffff;   /* cards, panels */
  --rhq-surface-muted:        #fbfcfe;   /* zebra / subtle fills */
  --rhq-surface-sunken:       #f8fafc;   /* table headers, wells */
  --rhq-canvas:               #f5f7fa;   /* app/page background */

  /* ---- Text ------------------------------------------------------------- */
  --rhq-text-strong:          #1f2d41;   /* headings / ink */
  --rhq-text:                 #46505f;   /* body */
  --rhq-text-muted:           #6b7686;   /* secondary */
  --rhq-text-faint:           #9aa4b2;   /* tertiary / placeholders */
  --rhq-text-on-brand:        #ffffff;   /* text on brand/gradient */

  /* ---- Borders ---------------------------------------------------------- */
  --rhq-border:               #e3e6ec;
  --rhq-border-soft:          #eef1f5;
  --rhq-focus-ring:           #0061f2;   /* :focus-visible outline colour */

  /* ---- Spacing scale (4px base, aligns with Bootstrap spacer) ----------- */
  --rhq-space-1:              0.25rem;   /* 4px  */
  --rhq-space-2:              0.5rem;    /* 8px  */
  --rhq-space-3:              0.75rem;   /* 12px */
  --rhq-space-4:              1rem;      /* 16px */
  --rhq-space-5:              1.5rem;    /* 24px */
  --rhq-space-6:              2rem;      /* 32px */
  --rhq-space-7:              3rem;      /* 48px */
  --rhq-space-8:              4rem;      /* 64px */

  /* ---- Radius ----------------------------------------------------------- */
  --rhq-radius-sm:            0.25rem;
  --rhq-radius:               0.375rem;  /* buttons / inputs */
  --rhq-radius-lg:            0.5rem;    /* cards / modals */
  --rhq-radius-pill:          999px;

  /* ---- Shadows ---------------------------------------------------------- */
  --rhq-shadow-sm:            0 1px 2px rgba(31, 45, 65, 0.06), 0 1px 3px rgba(31, 45, 65, 0.08);
  --rhq-shadow:               0 2px 6px rgba(31, 45, 65, 0.06), 0 8px 24px rgba(31, 45, 65, 0.08);
  --rhq-shadow-lg:            0 18px 50px rgba(31, 45, 65, 0.22);

  /* ---- Typography ------------------------------------------------------- */
  --rhq-font:                 'Roboto', -apple-system, 'Segoe UI', sans-serif;   /* body + all UI (D-6; was Metropolis) */
  --rhq-font-display:         'Akrobat', 'Roboto', -apple-system, sans-serif;    /* display + large headings ONLY (D-6; faces in rhq_fonts.css) */
  --rhq-text-size-base:       1rem;      /* 16px */
  --rhq-text-size-sm:         0.875rem;
  --rhq-text-size-lg:         1.25rem;
  --rhq-font-weight-body:     400;
  --rhq-font-weight-heading:  600;
  --rhq-h1-size:              1.5rem;
  --rhq-h2-size:              1.4rem;
  --rhq-h3-size:              1.3rem;

  /* ---- Status families (the ONE status colour system) -------------------
     Each status = base (solid) · soft (background) · ink (AA text-on-soft).
     Reserved strictly for status; never decorative.
     CANONICAL per the 2026-07-20 ruling; updated 2026-08-10 (guideline §2).   */
  --rhq-status-ok:            #22c55e;   --rhq-status-ok-soft:          #dcfce7;   --rhq-status-ok-ink:          #15803d;
  --rhq-status-info:          #0061f2;   --rhq-status-info-soft:        #e6f0fe;   --rhq-status-info-ink:        #004dbf;
  --rhq-status-warning:       #f59e0b;   --rhq-status-warning-soft:     #fff5eb;   --rhq-status-warning-ink:     #b45309;
  --rhq-status-critical:      #dc2626;   --rhq-status-critical-soft:    #fee2e2;   --rhq-status-critical-ink:    #b91c1c;
  --rhq-status-neutral:       #687281;   --rhq-status-neutral-soft:     #eef1f5;   --rhq-status-neutral-ink:     #374151;
  --rhq-status-approaching:   #fcd34d;   --rhq-status-approaching-soft: #fffbeb;   --rhq-status-approaching-ink: #7a5b00;

  /* ---- D-1: the one web action colour (alias — never hard-code) ---------- */
  --rhq-web-action-primary:   var(--rhq-color-primary);       /* #0061f2 — brand guide "Bright Blue" */
  --rhq-web-action-pressed:   var(--rhq-color-primary-700);   /* #004dbf */

  /* ---- Canonical navy ground (hub pages, guideline §4.8) ----------------- */
  --rhq-navy-lit:             #11203a;
  --rhq-navy-ground:          #0b1220;
  --rhq-navy-deep:            #070b14;
  --rhq-gradient-ground:      radial-gradient(120% 90% at 70% -10%, #11203a 0%, #0b1220 45%, #070b14 100%);

  /* ---- Data accents (data is blue/ink — never a status colour) ----------- */
  --rhq-accent-data:          #3b82f6;   /* committed counts, health bars */
  --rhq-accent-link:          #1d4ed8;   /* name links in tables */

  /* ---- Layout primitives (new; non-colliding) ---------------------------
     NOTE: --rhq-navbar-height, --rhq-footer-max-height and --rhq-page-header-*
     are owned by rhq_datatable_viewport.css / layout_spacing_overrides.css and
     are intentionally NOT redefined here.                                      */
  --rhq-container-max:        1240px;    /* contained content max-width */
  --rhq-page-gutter:          1.75rem;   /* horizontal page padding */
}