/* ============================================================
   Pinnacle Painters — Colors & Type
   Brand: locally owned, family-operated painting company
   Tagline: "Preparation. Precision. Pinnacle."
   ============================================================ */

/* ---------- Fonts (Google Fonts substitutes — see README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&display=swap');

:root {
  /* ---------- CORE PALETTE ---------- */
  /* Pinnacle's brand triad: ink black, brass gold, signature red. */
  --ink:           #0A0A0A;   /* near-black — primary background */
  --ink-soft:      #161513;   /* off-black — cards on dark */
  --ink-line:      #2A2722;   /* hairline on dark */

  --gold:          #D4A82C;   /* signature brass — logo highlight */
  --gold-bright:   #E8C24A;   /* gold gradient top */
  --gold-deep:     #A87E1C;   /* gold gradient bottom / hover */

  --red:           #D9201F;   /* signature red — "PAINTERS" word */
  --red-bright:    #E84A3A;   /* gradient top */
  --red-deep:      #9E1212;   /* gradient bottom / hover */

  --white:         #FFFFFF;
  --cream:         #F7F2E8;   /* aged-paint off-white — light surface */
  --paper:         #FBF8F1;   /* page background on light themes */

  /* ---------- NEUTRALS (warm "drop cloth" greys) ---------- */
  --stone-50:      #FAFAF8;
  --stone-100:     #EFEDE6;
  --stone-200:     #DCD8CC;
  --stone-300:     #C0BBAC;
  --stone-400:     #948E7E;
  --stone-500:     #6B6759;
  --stone-600:     #4A463B;
  --stone-700:     #2D2A22;
  --stone-800:     #1A1814;
  --stone-900:     #0F0E0B;

  /* ---------- SEMANTIC FOREGROUND / BACKGROUND ---------- */
  /* On dark (default for hero / headers) */
  --fg-1:          var(--white);          /* primary text on dark */
  --fg-2:          #D8D2C2;               /* secondary text on dark */
  --fg-3:          #948E7E;               /* tertiary / captions on dark */
  --bg-1:          var(--ink);            /* page background */
  --bg-2:          var(--ink-soft);       /* card surface */
  --bg-3:          #211E1A;               /* raised surface */

  /* On light (body / content sections) */
  --fg-on-light-1: var(--stone-900);
  --fg-on-light-2: var(--stone-700);
  --fg-on-light-3: var(--stone-500);
  --bg-on-light-1: var(--paper);
  --bg-on-light-2: var(--cream);
  --bg-on-light-3: var(--stone-100);

  /* Accent / interactive */
  --accent:        var(--red);
  --accent-hover:  var(--red-deep);
  --highlight:     var(--gold);
  --highlight-hover: var(--gold-deep);

  /* Status (functional — sparingly used) */
  --success:       #2F8A47;
  --warning:       var(--gold-deep);
  --danger:        var(--red);

  /* ---------- TYPE ---------- */
  --font-display:  'Archivo Black', 'Impact', 'Haettenschweiler', system-ui, sans-serif;
  --font-body:     'Lato', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — used for headings (display) and body */
  --fs-display:    clamp(56px, 7vw, 96px);
  --fs-h1:         clamp(40px, 5vw, 64px);
  --fs-h2:         clamp(30px, 3.6vw, 44px);
  --fs-h3:         clamp(22px, 2.4vw, 28px);
  --fs-h4:         18px;
  --fs-eyebrow:    13px;        /* the gold uppercase label above sections */
  --fs-body:       17px;
  --fs-body-lg:    19px;
  --fs-small:      14px;
  --fs-micro:      12px;

  --lh-display:    0.95;
  --lh-tight:      1.1;
  --lh-body:       1.6;

  --tracking-display: -0.01em;  /* display type is slightly negative */
  --tracking-eyebrow: 0.18em;   /* eyebrow / button labels are wide */
  --tracking-body:    0;

  /* ---------- SPACING (4-pt scale) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---------- RADII ---------- */
  /* Pinnacle leans flat / squared. Radii are small and used sparingly. */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  /* Sign-shop signage: hard edges, no soft drop shadows on most things.
     Two depth options for cards on light surfaces. */
  --shadow-sm: 0 1px 0 rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(20,15,5,0.08), 0 1px 2px rgba(20,15,5,0.06);
  --shadow-lg: 0 12px 28px rgba(20,15,5,0.14), 0 2px 4px rgba(20,15,5,0.08);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);

  /* Press / focus rings */
  --ring-gold:  0 0 0 3px rgba(212,168,44,0.35);
  --ring-red:   0 0 0 3px rgba(217,32,31,0.30);

  /* ---------- GRADIENTS ---------- */
  /* Used on the wordmark and on key CTAs / banners only. Not decorative bg. */
  --grad-gold:  linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  --grad-red:   linear-gradient(180deg, var(--red-bright) 0%, var(--red) 55%, var(--red-deep) 100%);
  --grad-white: linear-gradient(180deg, #FFFFFF 0%, #E8E5DC 100%);
  --grad-ink:   linear-gradient(180deg, #1A1814 0%, #0A0A0A 100%);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply these as defaults; override per-component as needed.
   ============================================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-on-light-1);
  background: var(--bg-on-light-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Display & Headings ---------- */
.display, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-weight: 900;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-weight: 900;
  margin: 0 0 var(--space-5);
}

h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-weight: 900;
  margin: 0 0 var(--space-4);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  font-weight: 900;
  margin: 0 0 var(--space-3);
}

h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 var(--space-2);
}

/* Eyebrow — a hallmark of the brand. Gold, uppercase, wide-tracked. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--gold);
}

/* Tagline — italic light Lato, taken from the logo lockup */
.tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.02em;
}

p {
  margin: 0 0 var(--space-4);
  color: inherit;
  text-wrap: pretty;
  max-width: 65ch;
}

.lede {
  font-size: var(--fs-body-lg);
  color: var(--fg-on-light-2);
  font-weight: 400;
}

small, .small {
  font-size: var(--fs-small);
  color: var(--fg-on-light-3);
}

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

/* ---------- Links ---------- */
a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--red-deep); }

/* ---------- Phone number — a hero element on the brand ---------- */
.phone {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--gold);
  padding: var(--space-2) var(--space-4);
  display: inline-block;
  text-transform: none;
  border-bottom: none;
}