/* ============================================================
   Neat Cabinets — Core Design Tokens
   Modern • Residential & Commercial • Warm Palette
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ===============================================================
     NC PALETTE — editorial neutrals + red
     =============================================================== */
  --nc-white:         #FAFAF8;
  --nc-surface:       #F0EDEA;
  --nc-stone-surface: #E6E4DF;
  --nc-cool-surface:  #ECEDEE;
  --nc-border:        #E8E5DF;
  --nc-border-ghost:  #D4D0C8;
  --nc-dark:          #2E3235;
  --nc-concrete:      #3A3D40;
  --nc-stone:         #6B7278;
  --nc-mist:          #9A9FA4;
  --nc-red:           #B8181A;
  --nc-red-deep:      #8A1012;

  /* ===============================================================
     LEGACY ALIASES → NC PALETTE
     Old tokens are kept so existing components don't break, but they
     all now resolve to the NC palette above.
     =============================================================== */

  /* Dark spectrum (was near-black ink) */
  --graphite-950: var(--nc-dark);
  --graphite-900: var(--nc-dark);
  --graphite-800: var(--nc-concrete);
  --graphite-700: var(--nc-concrete);
  --graphite-600: var(--nc-stone);
  --graphite-500: var(--nc-stone);
  --graphite-400: var(--nc-mist);
  --graphite-300: var(--nc-mist);
  --graphite-200: var(--nc-border-ghost);
  --graphite-100: var(--nc-border);
  --graphite-50:  var(--nc-surface);

  /* Warm neutrals (was cream/steel) */
  --steel-900: var(--nc-concrete);
  --steel-700: var(--nc-stone);
  --steel-500: var(--nc-mist);
  --steel-300: var(--nc-border-ghost);
  --steel-200: var(--nc-stone-surface);
  --steel-100: var(--nc-surface);
  --steel-50:  var(--nc-white);

  /* Brand red (was deep crimson) */
  --safety-700: var(--nc-red-deep);
  --safety-600: var(--nc-red-deep);
  --safety-500: var(--nc-red);
  --safety-400: var(--nc-red);
  --safety-300: var(--nc-red);

  --hivis-500: #F2C200;
  --hivis-400: #F9D84A;

  /* ===============================================================
     SEMANTIC COLORS — point at NC palette
     =============================================================== */

  --bg:            var(--nc-white);
  --bg-subtle:     var(--nc-surface);
  --bg-panel:      var(--nc-white);
  --bg-inverse:    var(--nc-concrete);
  --bg-inverse-2:  var(--nc-dark);

  --fg1:           var(--nc-dark);
  --fg2:           var(--nc-concrete);
  --fg3:           var(--nc-stone);
  --fg-inverse:    #FFFFFF;
  --fg-inverse-2:  var(--nc-mist);
  --fg-accent:     var(--nc-red);

  --rule-1:        var(--nc-border);
  --rule-2:        var(--nc-border);
  --rule-3:        var(--nc-border-ghost);
  --rule-inverse:  var(--nc-concrete);

  --success: #355e3b;
  --warning: var(--hivis-500);
  --danger:  var(--nc-red);
  --info:    #294e76;

  /* ===============================================================
     TYPOGRAPHY
     =============================================================== */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display:   clamp(56px, 8vw, 120px);
  --fs-h1:        clamp(40px, 5vw, 64px);
  --fs-h2:        clamp(30px, 3.5vw, 44px);
  --fs-h3:        24px;
  --fs-h4:        18px;
  --fs-body:      15px;
  --fs-small:     13px;
  --fs-micro:     11px;

  --lh-tight:     1.02;
  --lh-snug:      1.15;
  --lh-normal:    1.5;
  --lh-relaxed:   1.65;

  --tracking-micro:   0.14em;
  --tracking-caps:    0.06em;
  --tracking-tight:  -0.02em;

  /* ===============================================================
     SPACING — 4px base grid
     =============================================================== */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;

  /* ===============================================================
     RADII
     =============================================================== */
  --radius-0: 0;
  --radius-1: 6px;
  --radius-2: 8px;
  --radius-pill: 999px;

  /* ===============================================================
     BORDERS / STROKES
     =============================================================== */
  --stroke-hair: 1px solid var(--rule-1);
  --stroke:      1px solid var(--rule-2);
  --stroke-bold: 2px solid var(--graphite-800);
  --stroke-accent: 2px solid var(--safety-500);

  /* ===============================================================
     SHADOWS
     =============================================================== */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 rgba(46,50,53,0.06), 0 0 0 1px rgba(46,50,53,0.08);
  --shadow-2: 0 2px 0 0 var(--graphite-900);
  --shadow-panel: 0 24px 60px -20px rgba(46,50,53,0.2);
  --shadow-inset: inset 0 1px 0 0 rgba(46,50,53,0.08), inset 0 0 0 1px rgba(46,50,53,0.06);

  /* ===============================================================
     MOTION
     =============================================================== */
  --ease-mech:  cubic-bezier(0.2, 0.0, 0.1, 1);
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1:      120ms;
  --dur-2:      180ms;
  --dur-3:      280ms;

  /* ===============================================================
     GRID
     =============================================================== */
  --grid-cols: 12;
  --grid-gutter: 24px;
  --grid-margin: 48px;
  --perf-unit: 16px;
  --perf-dot: 4px;

  /* ===============================================================
     RESPONSIVE CONTAINER
     Fluid container width: 1280px on desktop, expands at ≥1600px.
     =============================================================== */
  --container-max: 1280px;
}

/* Widescreen / large monitors */
@media (min-width: 1600px) {
  :root { --container-max: 1440px; }
}
@media (min-width: 2000px) {
  :root { --container-max: 1640px; }
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */
.t-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  text-transform: uppercase;
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg1);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.25;
  color: var(--fg1);
}
.t-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--fg1);
}
.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg2);
}
.t-small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg2);
}
.t-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--fg-accent);
}
.t-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg1);
}
.t-spec {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 0;
  color: var(--fg2);
  font-variant-numeric: tabular-nums;
}
.t-partno {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-micro);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg3);
}

/* ============================================================
   BASE ELEMENTS
   ============================================================ */
html, body {
  font-family: var(--font-body);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1 { font: 700 var(--fs-h1)/var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-tight); margin: 0; }
h2 { font: 700 var(--fs-h2)/var(--lh-snug) var(--font-display); margin: 0; }
h3 { font: 600 var(--fs-h3)/1.25 var(--font-display); margin: 0; }
h4 { font: 600 var(--fs-h4)/1.3 var(--font-display); margin: 0; }
p  { font: 400 var(--fs-body)/var(--lh-relaxed) var(--font-body); color: var(--fg2); margin: 0; }
code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-panel);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-2);
}

::selection {
  background: var(--safety-500);
  color: #fff;
}