/* ============================================================
   Ideal Roof & Exterior Pros — Design System
   colors_and_type.css · v1.1
   ============================================================ */

/* Load brand fonts from Google Fonts.
   Display: Poppins (300-900). Body: Golos Text (400-900). */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Golos+Text:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ---------- COLOR TOKENS (raw palette) ---------- */
  /* Golds — the signature. Eyedropper-matched to the logo. */
  --ideal-gold:      #C9A03A;  /* Signature — CTAs, accent moments */
  --burnished-gold:  #E2BA5A;  /* Highlight, gradient top stop */
  --deep-gold:       #B5862A;  /* Gradient bottom stop, hover */
  --champagne:       #F4E5C0;  /* Soft gold tint — hover, soft surfaces */

  /* Darks — anchors */
  --onyx:            #0F0F10;  /* Deepest dark */
  --graphite:        #2B2D2F;  /* Primary dark (headlines, body on light) */
  --slate-smoke:     #4A4D52;  /* Supporting dark, secondary text */
  --ash:             #6E7176;  /* Mid neutral, captions */

  /* Lights — backgrounds */
  --cream-stone:     #F4EEE3;  /* Warm base — 55% of layouts */
  --morning-fog:     #ECEEF0;  /* Cool UI neutral */
  --alpine-white:    #FFFFFF;  /* Clean base */

  /* Hairlines derived from onyx */
  --hairline:        rgba(15,15,16,.08);
  --hairline-strong: rgba(15,15,16,.14);
  --hairline-soft:   rgba(15,15,16,.05);
  --hairline-dark:   rgba(244,238,227,.10);

  /* ---------- SEMANTIC TOKENS ---------- */
  --bg:              var(--cream-stone);
  --bg-alt:          var(--alpine-white);
  --bg-cool:         var(--morning-fog);
  --bg-dark:         var(--onyx);
  --bg-dark-alt:     var(--graphite);

  --fg:              var(--onyx);          /* Primary text on light */
  --fg-muted:        var(--slate-smoke);   /* Body text */
  --fg-soft:         var(--ash);           /* Captions, meta */
  --fg-inverse:      var(--cream-stone);   /* Text on dark */
  --fg-inverse-muted:rgba(244,238,227,.72);

  --accent:          var(--ideal-gold);
  --accent-hover:    var(--deep-gold);
  --accent-soft:     var(--champagne);

  /* ---------- BRAND GRADIENTS ---------- */
  --grad-gold:       linear-gradient(180deg, #E2BA5A 0%, #C9A03A 100%);
  --grad-gold-deep:  linear-gradient(180deg, #E2BA5A 0%, #B5862A 100%);
  --grad-dark:       linear-gradient(160deg, #0F0F10 0%, #2B2D2F 100%);
  --grad-dark-soft:  linear-gradient(180deg, #3A3C40 0%, #0F0F10 100%);
  --grad-hero-glow:  radial-gradient(60% 60% at 85% 10%, rgba(226,186,90,.22) 0, rgba(226,186,90,0) 60%),
                     radial-gradient(55% 60% at 10% 95%, rgba(201,160,58,.16) 0, rgba(201,160,58,0) 60%);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Golos Text', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, 'Roboto Mono', monospace;

  /* ---------- TYPE SCALE (token → role) ---------- */
  /* All headings: Poppins, tight tracking, heavy weights. */
  --t-display-xl: 900 clamp(56px, 6.8vw, 96px)/0.98 var(--font-display);
  --t-display-l:  800 clamp(40px, 4.6vw, 72px)/1.02 var(--font-display);
  --t-h1:         900 clamp(44px, 5.4vw, 72px)/1.02 var(--font-display);
  --t-h2:         800 clamp(32px, 3.6vw, 56px)/1.06 var(--font-display);
  --t-h3:         800 clamp(24px, 2.4vw, 36px)/1.10 var(--font-display);
  --t-h4:         700 clamp(20px, 1.8vw, 26px)/1.25 var(--font-display);
  --t-h5:         700 18px/1.4 var(--font-display);

  --t-body-l:     400 18px/1.6  var(--font-body);
  --t-body:       400 15px/1.55 var(--font-body);
  --t-body-s:     400 13px/1.55 var(--font-body);
  --t-caption:    500 12px/1.5  var(--font-body);

  --t-eyebrow:    700 12px/1 var(--font-display);     /* +.22em tracked uppercase */
  --t-label:      700 13px/1 var(--font-display);     /* +.12em tracked uppercase */
  --t-cta:        700 14px/1 var(--font-display);     /* CTAs */

  /* Tracking presets (apply with letter-spacing) */
  --track-hero:    -.035em;
  --track-head:    -.025em;
  --track-tight:   -.015em;
  --track-normal:  -.005em;
  --track-label:    .12em;
  --track-eyebrow:  .22em;

  /* ---------- SPACING · 4px grid ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-14:  56px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-28:  112px;
  --sp-32:  128px;

  /* ---------- RADII ---------- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* ---------- SHADOWS · soft, warm, low-contrast ---------- */
  --shadow-1: 0 1px 2px rgba(15,15,16,.04), 0 1px 1px rgba(15,15,16,.03);
  --shadow-2: 0 6px 16px rgba(15,15,16,.06), 0 2px 4px rgba(15,15,16,.04);
  --shadow-3: 0 14px 32px rgba(15,15,16,.10), 0 4px 8px rgba(15,15,16,.05);
  --shadow-4: 0 24px 56px rgba(15,15,16,.14), 0 8px 16px rgba(15,15,16,.06);
  --shadow-gold: 0 10px 30px rgba(201,160,58,.35);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.22, .61, .36, 1);     /* default */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.3, .64, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* ---------- LAYOUT ---------- */
  --container:  1240px;
  --gutter:     32px;
}

/* ============================================================
   BASE / RESET
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

::selection { background: var(--champagne); color: var(--onyx); }

/* ============================================================
   SEMANTIC ELEMENTS
   ============================================================ */
h1 { font: var(--t-h1); letter-spacing: var(--track-hero); margin: 0 0 var(--sp-5); color: var(--fg); }
h2 { font: var(--t-h2); letter-spacing: var(--track-head); margin: 0 0 var(--sp-5); color: var(--fg); }
h3 { font: var(--t-h3); letter-spacing: var(--track-head); margin: 0 0 var(--sp-4); color: var(--fg); }
h4 { font: var(--t-h4); letter-spacing: var(--track-tight); margin: 0 0 var(--sp-3); color: var(--fg); }
h5 { font: var(--t-h5); letter-spacing: var(--track-normal); margin: 0 0 var(--sp-3); color: var(--fg); }

p  { margin: 0 0 var(--sp-4); max-width: 72ch; color: var(--fg-muted); }

.eyebrow {
  font: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--sp-5);
  display: inline-block;
}

.lede {
  font: 400 clamp(18px,1.6vw,22px)/1.55 var(--font-body);
  color: var(--fg-muted);
  max-width: 44ch;
}

.label {
  font: var(--t-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--morning-fog);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--graphite);
}

/* ---------- Gold gradient text treatment ---------- */
.text-gold-grad {
  background: var(--grad-gold-deep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-dark-grad {
  background: var(--grad-dark-soft);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Utility classes ---------- */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.surface       { background: var(--alpine-white); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.surface-cream { background: var(--cream-stone); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.surface-dark  { background: var(--onyx); color: var(--fg-inverse); border-radius: var(--radius-md); }