/* ============================================================
 * ADVANCE SUPPLIES COMPANY — Design Tokens
 * Colors, typography, spacing, radii, shadows, motion.
 *
 * Source: Advance Supplies Design System / colors_and_type.css
 * Do not edit here — edit the design system source and re-copy.
 * ============================================================ */

:root {
  /* --- Color: ink (text / dark surfaces) --- */
  --ink-900: #0B1220;
  --ink-800: #141C2E;
  --ink-700: #1F2A3D;
  --ink-600: #384458;
  --ink-500: #5B6576;
  --ink-400: #8A93A1;
  --ink-300: #B6BCC6;
  --ink-200: #D8DCE3;
  --ink-100: #EAEDF1;

  /* --- Color: paper (light surfaces) --- */
  --paper:       #FBFBFA;
  --paper-alt:   #F3F2EE;
  --paper-sunk:  #EEEDE8;
  --line:        #E3E1DC;
  --line-strong: #CECBC3;

  /* --- Color: brand accent (steel blue) --- */
  --steel-900: #0F2B5C;
  --steel-700: #163C7D;
  --steel-600: #1E4FA3;
  --steel-500: #2563EB;
  --steel-400: #3B82F6;
  --steel-100: #E6EEF9;
  --steel-50:  #F3F7FD;

  /* --- Color: semantic --- */
  --ok:        #0F7B3A;
  --ok-bg:     #E7F3EC;
  --signal:    #D97706;
  --signal-bg: #FDF3E4;
  --alert:     #B42318;
  --alert-bg:  #FCEAE9;
  --info:      var(--steel-600);
  --info-bg:   var(--steel-50);

  /* --- Typography: faces --- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --- Typography: scale (desktop) --- */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-64: 64px;
  --fs-80: 80px;
  --fs-96: 96px;

  /* --- Typography: weights --- */
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;

  /* --- Spacing (4px grid) --- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* --- Radii --- */
  --r-0:    0;
  --r-1:    2px;
  --r-2:    6px;
  --r-3:    10px;
  --r-4:    16px;
  --r-pill: 999px;

  /* --- Shadows (industrial, minimal) --- */
  --shadow-1:      0 1px 2px rgba(11, 18, 32, 0.06);
  --shadow-2:      0 4px 12px -2px rgba(11, 18, 32, 0.10), 0 1px 2px rgba(11, 18, 32, 0.04);
  --shadow-3:      0 12px 28px -6px rgba(11, 18, 32, 0.15), 0 2px 4px rgba(11, 18, 32, 0.06);
  --shadow-inset:  inset 0 0 0 1px rgba(11, 18, 32, 0.04);
  --shadow-dark-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-dark-2: 0 8px 24px -8px rgba(0, 0, 0, 0.45);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* --- Layout --- */
  --container: 1280px;
  --gutter:    32px;
  --grid-gap:  24px;
  --header-h:  72px; /* matches .wn-inner height */
}

/* ============================================================
 * SEMANTIC UTILITY CLASSES
 * ============================================================ */

.h1-display { font: var(--fw-800) var(--fs-80)/0.95 var(--font-sans); letter-spacing: -0.03em; color: var(--ink-900); text-wrap: balance; }
.h2-section { font: var(--fw-800) var(--fs-48)/1.05 var(--font-sans); letter-spacing: -0.02em; color: var(--ink-900); text-wrap: balance; }
.h3-card    { font: var(--fw-700) var(--fs-22)/1.2  var(--font-sans); letter-spacing: -0.01em; color: var(--ink-900); }
.h4-eyebrow { font: var(--fw-700) var(--fs-13)/1.2  var(--font-sans); color: var(--ink-900); }

.body-lg { font: var(--fw-400) var(--fs-18)/1.55 var(--font-sans); color: var(--ink-500); }
.body    { font: var(--fw-400) var(--fs-16)/1.55 var(--font-sans); color: var(--ink-500); }
.body-sm { font: var(--fw-400) var(--fs-14)/1.5  var(--font-sans); color: var(--ink-500); }

.kicker        { font: var(--fw-700) 11px/1.2 var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--steel-600); }
.kicker--ink   { color: var(--ink-400); }
.kicker--paper { color: rgba(255,255,255,0.6); }

.mono      { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "ss01" 1; letter-spacing: -0.01em; }
.mono-spec { font: var(--fw-400) var(--fs-14)/1.4 var(--font-mono); color: var(--ink-700); font-feature-settings: "tnum" 1; }
.mono-step { font: var(--fw-600) 56px/1 var(--font-mono); color: var(--steel-600); font-feature-settings: "tnum" 1; letter-spacing: -0.02em; }

.tnum { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }