/* tokens.css — brand design tokens for the Newman Roofing digital folder.
   Source of truth: C:\Projects\Newman Roofing Resources\Newman Roofing Brand Guide.pdf
   Do NOT add colors or fonts that aren't in the brand guide. */

:root {
  /* --- Brand colors (from Brand Guide page 4) ---------------------------- */
  --newman-black:       #010101;
  --newman-grey:        #989898;
  --newman-gold:        #c4a25f;
  --newman-light-gold:  #f4f2ea;
  --newman-white:       #ffffff;

  /* 10% opacity variants the brand guide explicitly permits (use sparingly) */
  --gold-60:  rgba(196, 162, 95, 0.6);
  --gold-20:  rgba(196, 162, 95, 0.2);
  --black-60: rgba(1, 1, 1, 0.6);
  --black-30: rgba(1, 1, 1, 0.3);

  /* Semantic aliases — use these in components, not the raw color vars,
     so dark-mode or print stylesheets can override in one place later. */
  --bg-base:        var(--newman-light-gold);
  --bg-dark:        var(--newman-black);
  --bg-surface:     var(--newman-white);
  --ink:            var(--newman-black);
  --ink-inverse:    var(--newman-white);
  --ink-muted:      var(--newman-grey);
  --accent:         var(--newman-gold);

  /* --- Typography (from Brand Guide page 3) ------------------------------ */
  /* DM Sans = primary sans (headings Bold, body Light, Regular as fallback)
     Lora    = accent serif for subtitles / small callouts */
  --font-display: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-accent:  "Lora", Georgia, "Times New Roman", serif;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Fluid type scale (clamp(min, vw-driven, max)) — feels good on iPhone SE up to iPad Pro */
  --fs-eyebrow: clamp(0.75rem,  0.7rem + 0.25vw, 0.875rem);
  --fs-body:    clamp(1rem,     0.95rem + 0.3vw, 1.125rem);
  --fs-kicker:  clamp(1.125rem, 1rem + 0.7vw,    1.375rem);
  --fs-h3:      clamp(1.5rem,   1.2rem + 1.5vw,  2rem);
  --fs-h2:      clamp(2rem,     1.5rem + 2.5vw,  3rem);
  --fs-h1:      clamp(2.75rem,  2rem + 5vw,      4.5rem);

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.55;

  --ls-display: -0.01em;  /* brand guide: kerning -10 on headings */
  --ls-eyebrow: 0.12em;   /* uppercase eyebrow tracking */

  /* --- Spacing scale ----------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Section vertical rhythm — generous on mobile, gets larger on tablet+ */
  --section-pad-y: clamp(4rem, 8vh, 7rem);
  --section-pad-x: clamp(1.25rem, 5vw, 2.5rem);
  --section-max-w: 720px;  /* readable measure; full-bleed images escape this */

  /* --- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-duration: 700ms;
  --reveal-translate: 20px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --reveal-duration: 0ms;
    --reveal-translate: 0px;
  }
}