/* =========================================================
   SPC — Concrete Design System
   Design tokens. Source of truth.
   ========================================================= */

:root {
  /* ---------- BRAND ---------- */
  --spc-red-50:  #FBEBEE;
  --spc-red-100: #F4C8CF;
  --spc-red-200: #E89AA6;
  --spc-red-300: #DB6A7C;
  --spc-red-400: #CD4358;
  --spc-red-500: #C01E35;  /* PRIMARY */
  --spc-red-600: #A8182C;
  --spc-red-700: #8C1224;
  --spc-red-800: #6E0E1C;
  --spc-red-900: #4A0913;

  /* ---------- CONCRETE NEUTRALS (warm graphite) ---------- */
  /* Built with subtle warm chroma (~0.005) to feel like raw concrete, not pure gray */
  --concrete-00: #FFFFFF;
  --concrete-05: #F8F6F2;  /* paper highlight */
  --concrete-10: #F4F2EE;  /* page background */
  --concrete-15: #ECEAE5;  /* surface alt */
  --concrete-20: #DCD9D2;  /* hairline / divider */
  --concrete-30: #BFBCB4;  /* muted border */
  --concrete-40: #9C998F;  /* tertiary text */
  --concrete-50: #7A776E;  /* secondary text */
  --concrete-60: #5A5851;  /* body strong */
  --concrete-70: #3D3C37;  /* heading on dark? no — dark surface */
  --concrete-80: #26262A;  /* dark surface */
  --concrete-90: #1B1C20;  /* dark surface elevated */
  --concrete-95: #15161A;  /* near-black */
  --concrete-99: #0A0B0D;  /* pure ink */

  /* ---------- SEMANTIC ---------- */
  --sem-success: #2E6F4A;
  --sem-success-bg: #E4EFE8;
  --sem-warning: #B5751A;
  --sem-warning-bg: #F6EBD7;
  --sem-error:   #A8182C;  /* aligns with brand red-600 */
  --sem-error-bg: #F4DDE1;
  --sem-info:    #2A4F73;
  --sem-info-bg: #DDE6EE;

  /* ---------- SURFACES (LIGHT) ---------- */
  --surface-page: var(--concrete-10);
  --surface-card: var(--concrete-00);
  --surface-alt:  var(--concrete-15);
  --surface-inverse: var(--concrete-95);

  /* ---------- TEXT ---------- */
  --text-primary:   var(--concrete-95);
  --text-secondary: var(--concrete-50);
  --text-tertiary:  var(--concrete-40);
  --text-on-dark:   var(--concrete-05);
  --text-on-red:    #FFFFFF;
  --text-link:      var(--spc-red-600);

  /* ---------- BORDERS ---------- */
  --border-hairline: var(--concrete-20);
  --border-default:  var(--concrete-30);
  --border-strong:   var(--concrete-95);
  --border-inverse:  var(--concrete-70);

  /* ---------- TYPE ---------- */
  --font-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale — modular, slightly compressed for industrial density */
  --fs-display:  clamp(56px, 7vw, 96px);
  --fs-h1:       clamp(40px, 5vw, 64px);
  --fs-h2:       40px;
  --fs-h3:       28px;
  --fs-h4:       22px;
  --fs-h5:       18px;
  --fs-h6:       15px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  12px;
  --fs-micro:    11px;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-loose:   1.6;

  /* Tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mono:   0.02em;
  --tracking-label:  0.12em;  /* SECTION LABELS */

  /* ---------- SPACING (4pt base) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* ---------- LAYOUT ---------- */
  --container-max: 1440px;
  --container-pad: 32px;
  --grid-gutter: 24px;
  --grid-cols-desktop: 12;
  --grid-cols-tablet: 8;
  --grid-cols-mobile: 4;

  /* ---------- RADII (deliberately small) ---------- */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ---------- */
  /* No soft shadows. Hard offsets only, used sparingly. */
  --elev-flat: none;
  --elev-press: 0 0 0 1px var(--concrete-95);
  --elev-block: 4px 4px 0 0 var(--concrete-95);
  --elev-block-red: 4px 4px 0 0 var(--spc-red-500);
  --elev-modal: 0 24px 48px -12px rgba(10, 11, 13, 0.25), 0 0 0 1px var(--concrete-20);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --ease-in:     cubic-bezier(0.6, 0, 1, 1);
  --ease-linear: linear;
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-normal:  200ms;
  --dur-slow:    320ms;

  /* ---------- Z ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 2000;
}

/* Dark surface tokens — invert text/border roles within .on-dark */
.on-dark {
  --surface-page: var(--concrete-95);
  --surface-card: var(--concrete-90);
  --surface-alt:  var(--concrete-80);
  --text-primary:   var(--concrete-05);
  --text-secondary: var(--concrete-30);
  --text-tertiary:  var(--concrete-40);
  --border-hairline: var(--concrete-80);
  --border-default:  var(--concrete-70);
  --border-strong:   var(--concrete-05);

  background: var(--surface-page);
  color: var(--text-primary);
}