/* ==========================================================================
   Construction Photography .uk — Design Tokens
   Adapted from the DATUM design system. Hi-Vis direction baked in (confirmed
   choice) — Amber/Brass scales kept for reference but not wired up live.
   ========================================================================== */

/* ---- Webfonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800;900&family=Archivo:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Brand: Signal (Hi-Vis — confirmed direction) ---- */
  --signal-700: #B8910A;
  --signal-600: #E0B100;
  --signal-500: #FFC400;
  --signal-400: #FFD23D;
  --signal-300: #FFE07A;
  --signal-100: #FFF4C2;

  /* ---- Ink: warm near-blacks & grays (asphalt family) ---- */
  --ink-900: #0B0B0C;
  --ink-850: #121214;
  --ink-800: #19191B;
  --ink-700: #242427;
  --ink-600: #36363A;
  --ink-500: #54545A;
  --ink-400: #76767E;
  --ink-300: #9C9CA4;
  --ink-200: #C7C7CC;
  --ink-150: #DEDEDE;
  --ink-100: #E9E8E4;
  --ink-050: #F2F1EC;

  /* ---- Paper: warm off-whites ---- */
  --paper:      #F4F3EE;
  --paper-pure: #FFFFFF;
  --paper-tint: #EDEBE3;

  /* ---- Status (desaturated, industrial) ---- */
  --ok-500:    #4F8A53;
  --warn-500:  #D98A2B;
  --alert-500: #C24A3A;

  /* ---- Semantic aliases ---- */
  --accent:        var(--signal-500);
  --accent-strong: var(--signal-600);
  --accent-soft:   var(--signal-100);
  --on-accent:     var(--ink-900);

  --bg:            var(--paper);
  --surface:       var(--paper-pure);
  --surface-sunk:  var(--paper-tint);
  --border:        var(--ink-100);
  --border-strong: var(--ink-200);
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--ink-400);

  --bg-dark:            var(--ink-900);
  --surface-dark:       var(--ink-800);
  --border-dark:        var(--ink-700);
  --text-on-dark:        #F4F3EE;
  --text-on-dark-muted:  var(--ink-300);

  --hazard-stripe: repeating-linear-gradient(
    -45deg,
    var(--signal-500) 0 14px,
    var(--ink-900) 14px 28px
  );

  /* ---- Type families ---- */
  --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --font-text:    'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono:    'Spline Sans Mono', ui-monospace, 'SF Mono', monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;
  --fw-ultra:   900;

  --t-mega:    clamp(3.5rem, 8vw, 7rem);
  --t-display: clamp(2.75rem, 5vw, 4.5rem);
  --t-h1:      clamp(2.25rem, 3.5vw, 3.25rem);
  --t-h2:      clamp(1.75rem, 2.5vw, 2.25rem);
  --t-h3:      1.375rem;

  --t-lead:  1.25rem;
  --t-body:  1rem;
  --t-small: 0.875rem;
  --t-xs:    0.75rem;

  --t-label: 0.75rem;
  --t-spec:  0.8125rem;

  --lh-tight:   0.95;
  --lh-snug:    1.1;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-mega:   -0.02em;
  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-label:  0.16em;
  --ls-wide:   0.22em;

  /* ---- Spacing (4px grid) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --section-y: clamp(64px, 9vw, 128px);
  --gutter:    clamp(20px, 4vw, 56px);
  --container: 1280px;
  --container-narrow: 760px;
  --grid-gap: 24px;

  /* ---- Radii & borders ---- */
  --r-0: 0px; --r-1: 2px; --r-2: 4px; --r-pill: 999px;
  --bw-hair: 1px; --bw-bold: 2px; --bw-rule: 3px;

  /* ---- Shadows ---- */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(11,11,12,0.06);
  --shadow-md: 0 8px 24px -8px rgba(11,11,12,0.22);
  --shadow-lg: 0 24px 60px -16px rgba(11,11,12,0.38);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms;
}