/* QuickPartsDelivery — Foundations
 * Steel-neutral palette + Signal Yellow primary + semantic status.
 * 4px base unit. Default radius 6px (cards 8px, pills full).
 *
 * Typography
 *  Google Sans — display + body (sentence case, no uppercase eyebrows)
 *  JetBrains Mono — part numbers, model numbers, SKUs ONLY
 *  Instrument Serif — sparing editorial italic accents (hero, trust lines)
 */

@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/GoogleSans-VariableFont_GRAD_opsz_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxjPVmUsaaDhw.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/instrumentserif/v4/jizDREVItHgc8qDIbSTKq4XIRPJ7VJN0XPnG.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/instrumentserif/v4/jizBREVItHgc8qDIbSTKq4XIRPKj4Y_3VgBFUjBJa9WWQ.woff2') format('woff2');
}

:root {
  /* ─────────── STEEL NEUTRAL SCALE (12 steps) ─────────── */
  --steel-1000: #0A0E14;  /* near-black, primary text */
  --steel-900:  #131922;
  --steel-800:  #1E2530;
  --steel-700:  #2C3441;  /* dark surfaces */
  --steel-600:  #404B5C;  /* secondary text on light */
  --steel-500:  #5C6779;  /* muted text */
  --steel-400:  #7A8497;  /* placeholder, icons */
  --steel-300:  #A3ABBB;  /* borders dark */
  --steel-200:  #C9CFD9;  /* borders default */
  --steel-150:  #DEE2E9;  /* divider */
  --steel-100:  #E8EBF0;  /* subtle bg, hover */
  --steel-75:   #F1F3F6;  /* page bg alt */
  --steel-50:   #F7F8FA;  /* surface alt */
  --steel-25:   #FAFBFC;  /* page bg */

  /* ─────────── SIGNAL YELLOW — primary CTA / focus ─────────── */
  --signal-50:   #FFF8DB;
  --signal-100:  #FFEFB0;
  --signal-200:  #FFE07A;
  --signal-300:  #FFD24D;
  --signal-400:  #FFC400;  /* PRIMARY */
  --signal-500:  #E6B000;  /* hover */
  --signal-600:  #C29400;  /* active */
  --signal-700:  #8C6A00;  /* on yellow text */

  /* ─────────── SEMANTIC STATUS (never decorative) ─────────── */
  --status-success:     #16A34A;  /* in stock */
  --status-success-bg:  #DCFCE7;
  --status-success-fg:  #14532D;

  --status-warn:        #EA580C;  /* low stock */
  --status-warn-bg:     #FFEDD5;
  --status-warn-fg:     #7C2D12;

  --status-danger:      #DC2626;  /* out / error */
  --status-danger-bg:   #FEE2E2;
  --status-danger-fg:   #7F1D1D;

  --status-info:        #0284C7;  /* info / verified */
  --status-info-bg:     #E0F2FE;
  --status-info-fg:     #075985;

  /* ─────────── ROLE TOKENS — light surface ─────────── */
  --bg-page:        var(--steel-25);
  --bg-surface:     #FFFFFF;
  --bg-surface-alt: var(--steel-50);
  --bg-subtle:      var(--steel-75);
  --bg-hover:       var(--steel-100);

  --fg-1:  var(--steel-1000);   /* primary text */
  --fg-2:  var(--steel-700);    /* secondary */
  --fg-3:  var(--steel-500);    /* muted, meta */
  --fg-4:  var(--steel-400);    /* placeholder, deemphasized */
  --fg-on-yellow: var(--steel-1000);

  --border-1: var(--steel-150);  /* dividers */
  --border-2: var(--steel-200);  /* default control border */
  --border-3: var(--steel-300);  /* emphasis border */
  --border-focus: var(--signal-400);

  --accent:        var(--signal-400);
  --accent-hover:  var(--signal-500);
  --accent-active: var(--signal-600);

  /* ─────────── SPACING — 4px base ─────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;

  /* ─────────── RADIUS ─────────── */
  --radius-sm:    4px;
  --radius-md:    6px;   /* default — buttons, inputs */
  --radius-lg:    8px;   /* cards */
  --radius-xl:    12px;  /* modals, large surfaces */
  --radius-pill:  9999px;

  /* ─────────── ELEVATION — subtle, technical not lifestyle ─────────── */
  --shadow-xs: 0 1px 1px rgba(10, 14, 20, 0.04);
  --shadow-sm: 0 1px 2px rgba(10, 14, 20, 0.06), 0 1px 1px rgba(10, 14, 20, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(10, 14, 20, 0.08), 0 2px 4px -2px rgba(10, 14, 20, 0.06);
  --shadow-lg: 0 12px 24px -8px rgba(10, 14, 20, 0.12), 0 4px 8px -4px rgba(10, 14, 20, 0.06);
  --shadow-focus: 0 0 0 3px rgba(255, 196, 0, 0.35);

  /* ─────────── TYPE STACKS ─────────── */
  --font-sans:  'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;

  /* ─────────── TYPE SCALE ─────────── */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   36px;
  --text-4xl:   48px;
  --text-5xl:   64px;

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;

  /* ─────────── MOTION ─────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.3, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}

/* ───────────────────── SEMANTIC ELEMENTS ───────────────────── */

html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-weight: 600;
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: 600;
  color: var(--fg-1);
}
h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  font-weight: 600;
  color: var(--fg-1);
}

p, .p {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
}

.editorial {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-1);
  /* sentence case — never UPPERCASE eyebrows */
}

.meta {
  font-size: var(--text-sm);
  color: var(--fg-3);
}

.mono, code, kbd, samp,
.part-number, .model-number, .sku {
  font-family: var(--font-mono);
  font-feature-settings: "ss02", "cv01";
  letter-spacing: 0;
}

.part-number {
  font-size: 0.95em;
  color: var(--fg-1);
  background: var(--steel-75);
  border: 1px solid var(--steel-150);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}

::selection {
  background: var(--signal-200);
  color: var(--steel-1000);
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-color: var(--border-focus);
}