/* ============================================================
   NJ Home Project — Colors & Type
   ============================================================
   Core design tokens. Load this file early; every component
   reads from these custom properties.
   ============================================================ */

/* --- Webfonts (Google Fonts) ------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ============================================================
     COLOR — RAW PALETTE
     ============================================================
     The brand is built on four families:
       INK    — deep cool charcoal-navy. Trust, professionalism.
       CLAY   — warm terracotta. Craftsmanship, human touch.
       CREAM  — warm off-white. Premium ground, not stark.
       SAGE   — muted forest green. Reassurance, "go ahead".
     Neutrals (slate/linen) connect them.
     ============================================================ */

  /* Ink — primary dark, full scale through to soft tints */
  --ink-950: #060B16;
  --ink-900: #10192A;   /* default text on cream */
  --ink-800: #233048;
  --ink-700: #3A4965;
  --ink-600: #556784;
  --ink-500: #7787A1;
  --ink-400: #A3AFC1;
  --ink-300: #CAD1DC;
  --ink-200: #E3E7ED;
  --ink-100: #F1F3F6;

  /* Clay — warm accent (use sparingly, like a hardware fitting) */
  --clay-700: #8E3F24;
  --clay-600: #A84E2E;
  --clay-500: #B8593A;   /* default accent */
  --clay-400: #C97C5F;
  --clay-300: #DCA48C;
  --clay-200: #ECC9B6;
  --clay-100: #F6E3D6;

  /* Sage — secondary accent, semantic positive */
  --sage-700: #4F5E45;
  --sage-600: #66775A;
  --sage-500: #7E8C70;
  --sage-300: #B3BDA5;
  --sage-100: #E1E5D8;

  /* Cream — warm light ground */
  --cream-50:  #FBF8F2;
  --cream-100: #F6F1E8;   /* default page bg */
  --cream-200: #EFE7D8;   /* default surface */
  --cream-300: #E4D9C4;   /* border-on-cream */

  /* Slate — cool neutrals (rules, dividers, secondary text) */
  --slate-100: #E6E8EC;
  --slate-200: #C8CDD5;
  --slate-300: #A4ABB7;
  --slate-400: #7C8694;
  --slate-500: #5A6A7A;
  --slate-700: #364455;

  /* Pure */
  --white: #FFFFFF;
  --black: #000000;

  /* Semantic state colors (rarely used, kept muted) */
  --success: #4F7A4A;
  --warning: #C18A3A;
  --danger:  #B04332;
  --info:    #3C6E8F;

  /* ============================================================
     COLOR — SEMANTIC ROLES
     ============================================================
     Use these in components. Re-skin by remapping these vars.
     ============================================================ */

  --bg:          var(--cream-100);   /* page background */
  --bg-subtle:   var(--cream-50);
  --surface:     var(--white);       /* cards on cream */
  --surface-2:   var(--cream-200);   /* inset surface */
  --surface-dark:var(--ink-900);     /* dark blocks (footer, hero) */

  --fg:          var(--ink-900);     /* primary text */
  --fg-muted:    var(--slate-500);   /* secondary text */
  --fg-subtle:   var(--slate-400);   /* tertiary / placeholder */
  --fg-on-dark:  var(--cream-50);    /* text on ink surfaces */
  --fg-on-clay:  var(--cream-50);    /* text on clay accents */

  --accent:        var(--clay-500);
  --accent-hover:  var(--clay-600);
  --accent-press:  var(--clay-700);
  --accent-soft:   var(--clay-100);

  --border:        var(--cream-300);
  --border-strong: var(--slate-200);
  --rule:          var(--slate-100);
  --focus:         var(--ink-900);

  /* ============================================================
     TYPE — FAMILIES
     ============================================================
     Display: Newsreader      — warm editorial serif. Premium,
              trustworthy, has character without being precious.
              Use for hero headlines and section heads only.
     Sans:    Geist           — modern geometric workhorse.
              Body, UI, captions, everything.
     Mono:    Geist Mono      — invoice line items, dimensions,
              SKUs, addresses.
     ============================================================ */

  --font-display: "Newsreader", ui-serif, Georgia, serif;
  --font-sans:    "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", monospace;

  /* Type scale — major third (1.25) anchored at 16px */
  --text-xs:    0.75rem;   /* 12 — captions, labels */
  --text-sm:    0.875rem;  /* 14 — UI, small body */
  --text-base:  1rem;      /* 16 — body */
  --text-lg:    1.125rem;  /* 18 — lead body */
  --text-xl:    1.375rem;  /* 22 — H4 */
  --text-2xl:   1.75rem;   /* 28 — H3 */
  --text-3xl:   2.25rem;   /* 36 — H2 */
  --text-4xl:   3rem;      /* 48 — H1 */
  --text-5xl:   4rem;      /* 64 — display */
  --text-6xl:   5.5rem;    /* 88 — hero display */

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;   /* small-caps eyebrows */

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

  /* ============================================================
     RADII — restrained. Crafted, not bubbly.
     ============================================================ */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — soft, ambient. No glow, no neon.
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(16, 25, 42, 0.04);
  --shadow-sm: 0 1px 2px rgba(16, 25, 42, 0.05), 0 2px 6px rgba(16, 25, 42, 0.04);
  --shadow:    0 2px 4px rgba(16, 25, 42, 0.05), 0 8px 24px rgba(16, 25, 42, 0.06);
  --shadow-lg: 0 4px 8px rgba(16, 25, 42, 0.06), 0 24px 48px rgba(16, 25, 42, 0.10);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ============================================================
     MOTION — quick, never bouncy.
     ============================================================ */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:   cubic-bezier(0.4, 0, 0.7, 0.3);
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  120ms;
  --dur:       180ms;
  --dur-slow:  280ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container: 1200px;
  --container-narrow: 760px;
  --container-wide: 1360px;
}

/* ============================================================
   BASE ELEMENT STYLES — semantic defaults
   ============================================================
   Drop colors_and_type.css in and tags will already look on-brand.
   ============================================================ */

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); font-weight: 500; }
h2 { font-size: var(--text-3xl); font-weight: 500; }
h3 { font-size: var(--text-2xl); font-weight: 500; }
h4 { font-size: var(--text-xl);  font-weight: 600; }
h5 { font-size: var(--text-lg);  font-weight: 600; font-family: var(--font-sans); letter-spacing: var(--tracking-snug); }
h6 { font-size: var(--text-sm);  font-weight: 600; font-family: var(--font-sans); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-muted); }

p {
  margin: 0;
  text-wrap: pretty;
  line-height: var(--leading-relaxed);
}

small {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--fg);
  text-decoration-color: var(--clay-300);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur) var(--ease-out);
}
a:hover { text-decoration-color: var(--accent); }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-8) 0;
}

::selection {
  background: var(--clay-200);
  color: var(--ink-900);
}

/* Utility — small-caps eyebrow label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--clay-600);
}

/* Utility — display headline */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}