/* =====================================================================
   Concrete Inspection Specialist — Design Tokens  V2 "FIELD DOSSIER"
   Technical-engineering system: steel greys + charcoal + blueprint-blue
   accent. Deliberately distinct from the SCCR brand (cream + orange).
   All accent pairs verified for WCAG AA contrast.
   ===================================================================== */

:root {
  /* ---- Brand / steel scale (slate-based) ---- */
  --ink:        #0E1116;   /* near-black, headings & body on light */
  --steel-950:  #0F172A;   /* darkest section background */
  --steel-900:  #16202E;
  --steel-800:  #1E2A3A;
  --steel-700:  #334155;
  --steel-600:  #475569;
  --steel-500:  #64748B;   /* muted text on light (4.76:1) */
  --steel-400:  #94A3B8;
  --steel-300:  #CBD5E1;
  --steel-200:  #E2E8F0;   /* hairline borders */
  --steel-100:  #EEF2F6;
  --paper:      #F3F2EE;   /* concrete white — mineral, NOT cream */
  --paper-2:    #EAE9E4;   /* alt section background */
  --white:      #FFFFFF;

  /* ---- Accent: blueprint / structural blue ---- */
  --accent:        #0B6CB0;   /* primary — 5.55:1 on white */
  --accent-600:    #0A5C97;   /* button hover — 7.0:1 */
  --accent-700:    #084B7C;   /* deep — 9.1:1 */
  --accent-bright: #3AA0E0;   /* accent on dark surfaces — 6.19:1 */
  --accent-050:    #E8F1F8;   /* tint background */
  --accent-100:    #D2E5F2;

  /* ---- Semantic ---- */
  --danger:     #C32A2A;   /* concrete-cancer / alert / redline annotation */
  --danger-050: #FBEBEB;
  --danger-200: #F1C9C9;
  --ok:         #0E7C5A;
  --ok-050:     #E7F4EF;
  --warn:       #B7791F;   /* caution amber (used sparingly, never orange) */

  /* ---- Surfaces ---- */
  --surface:        var(--white);
  --surface-sunk:   var(--paper-2);
  --border:         var(--steel-200);
  --border-strong:  var(--steel-300);

  /* ---- Typography ---- */
  --font-display: 'Clash Display', 'Archivo', system-ui, sans-serif;
  --font-body:    'Satoshi', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* fluid type scale — V2: display scaled up */
  --fs-display: clamp(3rem, 1.8rem + 6vw, 7.2rem);
  --fs-h1:      clamp(2rem, 1.4rem + 2.2vw, 3rem);
  --fs-h2:      clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);
  --fs-lead:    clamp(1.075rem, 1rem + 0.35vw, 1.3rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-sm:      0.9375rem;
  --fs-label:   0.78rem;     /* mono labels, uppercase */

  /* ---- Spacing (8pt rhythm) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  /* ---- Radius — V2: flattened, dossier sheets are square ---- */
  --r-sm:   3px;
  --r:      4px;
  --r-lg:   6px;
  --r-xl:   8px;
  --r-pill: 999px;   /* pills stay for stamps/badges only */

  /* ---- Hairlines (V2) ---- */
  --hairline:       1px solid var(--steel-300);
  --hairline-dark:  1px solid rgba(255,255,255,.18);

  /* ---- Shadows (steel-tinted) ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow:    0 6px 18px -6px rgba(15, 23, 42, 0.14), 0 2px 6px -2px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 22px 50px -18px rgba(15, 23, 42, 0.30), 0 8px 20px -10px rgba(15, 23, 42, 0.16);
  --ring:      0 0 0 3px rgba(11, 108, 176, 0.35);

  /* ---- Layout ---- */
  --wrap:        1180px;
  --wrap-narrow: 820px;
  --header-h:    80px;   /* V2: taller header */

  /* ---- Motion ---- */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   140ms;
  --t:        220ms;
  --t-slow:   360ms;

  /* ---- z-index scale ---- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 40;
  --z-header: 100;
  --z-overlay: 800;
  --z-modal: 1000;
}