/* ============================================================
   tokens.css — "Quiet Craft" design system
   Summit Home Renovations
   The single source of truth. Every color, type size, space,
   radius, and motion value lives here. Nothing downstream
   hardcodes a design value.
   ============================================================ */

:root {
  /* ---- Color: warm, material, 2–3 in practice -------------- */
  --c-ink:        #16140F; /* warm near-black: primary type, dark sections */
  --c-limestone:  #ECE7DE; /* warm light neutral: secondary surfaces        */
  --c-bone:       #FBFAF7; /* lightest: cards, page base, high-contrast panels */
  --c-brass:      #B08D57; /* single material accent: CTAs, key rules, active */
  --c-slate-sage: #6E7167; /* muted secondary text, dividers, captions       */

  /* tonal helpers derived from the five, used sparingly */
  --c-ink-80:     rgba(22, 20, 15, 0.80);
  --c-ink-60:     rgba(22, 20, 15, 0.60);
  --c-ink-12:     rgba(22, 20, 15, 0.12);
  --c-ink-06:     rgba(22, 20, 15, 0.06);
  --c-bone-90:    rgba(251, 250, 247, 0.90);
  --c-bone-70:    rgba(251, 250, 247, 0.70);
  --c-brass-deep: #8F6F40; /* darker brass for text-on-light contrast & hover */
  --c-brass-12:   rgba(176, 141, 87, 0.12);
  --c-sage-30:    rgba(110, 113, 103, 0.30); /* hairline dividers */

  /* ---- Semantic roles ------------------------------------- */
  --bg-page:        var(--c-bone);
  --bg-surface:     var(--c-limestone);
  --bg-card:        var(--c-bone);
  --bg-dark:        var(--c-ink);
  --text-strong:    var(--c-ink);
  --text-body:      var(--c-ink-80);
  --text-muted:     var(--c-slate-sage);
  --text-on-dark:   var(--c-bone);
  --text-on-dark-muted: var(--c-bone-70);
  --accent:         var(--c-brass);
  --accent-ink:     var(--c-brass-deep); /* brass that must read as text on light */
  --rule:           var(--c-sage-30);
  --rule-strong:    var(--c-ink-12);
  --focus:          var(--c-brass);

  /* ---- Type families -------------------------------------- */
  /* Display: Archivo at width 125% ("expanded") — architectural, wide,
     structural. Archivo Expanded is NOT a separate Google Fonts family;
     the expanded look comes from the variable WIDTH axis via
     font-stretch. Carries the "lines and dimension" of a build subject.
     Body: Hanken Grotesk (NOT Inter). Mono: JetBrains Mono for
     blueprint-style labels, measurements, and data. */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --display-stretch: 125%; /* max expanded on Archivo's width axis */

  /* ---- Type scale (fluid; ~1.25 major-third desktop) ------ */
  --fs-overline: 0.75rem;                              /* 12px mono labels      */
  --fs-caption:  0.8125rem;                            /* 13px                  */
  --fs-small:    0.9375rem;                            /* 15px                  */
  --fs-body:     1.0625rem;                            /* 17px base reading     */
  --fs-body-lg:  clamp(1.125rem, 0.95rem + 0.6vw, 1.3125rem);   /* 18→21 lede   */
  --fs-h4:       clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);  /* 19→23        */
  --fs-h3:       clamp(1.4375rem, 1.2rem + 0.9vw, 1.875rem);    /* 23→30        */
  --fs-h2:       clamp(1.875rem, 1.45rem + 1.7vw, 2.875rem);    /* 30→46        */
  --fs-h1:       clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem);         /* 40→72        */
  --fs-display:  clamp(3rem, 1.6rem + 6vw, 6.5rem);             /* 48→104 hero  */

  /* ---- Weights -------------------------------------------- */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ---- Line heights --------------------------------------- */
  --lh-tight:    1.02;  /* display */
  --lh-snug:     1.12;  /* headings */
  --lh-normal:   1.5;   /* body */
  --lh-relaxed:  1.65;  /* long paragraphs */

  /* ---- Letter spacing ------------------------------------- */
  --ls-display: -0.02em; /* tighten the wide display face */
  --ls-heading: -0.01em;
  --ls-body:     0em;
  --ls-overline: 0.18em; /* blueprint labels: wide tracking, uppercase */
  --ls-mono:     0.04em;

  /* ---- Spacing: one base unit (8px), applied consistently - */
  --space-unit: 0.5rem;            /* 8px base */
  --space-2xs:  0.25rem;           /* 4px  */
  --space-xs:   0.5rem;            /* 8px  */
  --space-sm:   0.75rem;           /* 12px */
  --space-md:   1rem;              /* 16px */
  --space-lg:   1.5rem;            /* 24px */
  --space-xl:   2rem;              /* 32px */
  --space-2xl:  3rem;              /* 48px */
  --space-3xl:  4rem;              /* 64px */
  --space-4xl:  6rem;              /* 96px */
  --space-5xl:  8rem;              /* 128px */
  /* fluid section rhythm */
  --space-section: clamp(3rem, 1.75rem + 4.5vw, 5.5rem);

  /* ---- Layout --------------------------------------------- */
  --container-max:   1280px;
  --container-text:  68ch;   /* readable measure for prose */
  --container-pad:   clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --grid-gap:        clamp(1.25rem, 0.5rem + 2vw, 2rem);

  /* ---- Radius: restrained. Not rounded-everything. -------- */
  --radius-none: 0;
  --radius-sm:   2px;   /* inputs, chips */
  --radius-md:   4px;   /* cards, buttons */
  --radius-lg:   6px;   /* large media frames */
  --radius-pill: 999px; /* only the brass dot/handle */

  /* ---- Borders / hairlines -------------------------------- */
  --hairline: 1px solid var(--rule);
  --rule-brass: 2px solid var(--c-brass);

  /* ---- Elevation: soft, material, never glossy ------------ */
  --shadow-sm: 0 1px 2px rgba(22, 20, 15, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(22, 20, 15, 0.18);
  --shadow-lg: 0 30px 60px -20px rgba(22, 20, 15, 0.28);

  /* ---- Motion: Premium personality, restraint > quantity --
     Signature easing (--ease-standard) carries ~80% of motion.
     Respect prefers-reduced-motion downstream. */
  --dur-quick:   180ms;  /* hover, small state changes */
  --dur-base:    320ms;  /* buttons, cards */
  --dur-slow:    520ms;  /* section reveals */
  --dur-reveal:  900ms;  /* orchestrated page-load / hero */

  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);   /* signature curve */
  --ease-entrance:  cubic-bezier(0.05, 0.7, 0.1, 1); /* emphasized in   */
  --ease-exit:      cubic-bezier(0.3, 0, 1, 1);      /* accelerate out  */
  --ease-out-soft:  cubic-bezier(0.22, 1, 0.36, 1);  /* gentle landing  */

  /* ---- Z-index scale -------------------------------------- */
  --z-base:    1;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 300;
}

/* Reduced-motion: collapse durations so transitions still
   resolve state instantly without animating. Components also
   guard their own keyframe animations. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-quick:  1ms;
    --dur-base:   1ms;
    --dur-slow:   1ms;
    --dur-reveal: 1ms;
  }
}