/* ===========================================================
   PICTURE ROCKS COOLING, HEATING & PLUMBING — DESIGN TOKENS
   Source of truth for color, type, spacing, radius, shadow.
   Lifted from the prc-ac-repair landing page (Tailwind config),
   plus brand-illustration accents from the logo.
   =========================================================== */

/* ---------- Webfonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');

:root {
  /* =========================================================
     COLOR — UI SYSTEM (Material 3 derived, warm desert tone)
     ========================================================= */

  /* Primary — burnt-orange / mesquite. Used for CTAs, key accents,
     icon glyphs, the wordmark "PICTURE ROCKS" color. */
  --prc-primary:                   #974401;   /* primary */
  --prc-primary-hover:             #b65b1d;   /* primary-container, hover state */
  --prc-primary-bright:            #c8692a;   /* CTA button gradient top */
  --prc-primary-fixed-dim:         #ffb68d;   /* on-dark accent text */
  --prc-primary-fixed:             #ffdbc9;   /* tinted hover surface */
  --prc-on-primary-fixed:          #331200;   /* deep brown text on tint */
  --prc-on-primary-fixed-variant:  #763300;

  /* Secondary — desert-dusk slate-blue. Used sparingly, for accent
     chips and secondary surfaces. */
  --prc-secondary:                 #535f74;
  --prc-on-secondary-container:    #586378;
  --prc-secondary-container:       #d4e0f9;
  --prc-secondary-fixed:           #d7e3fc;
  --prc-secondary-fixed-dim:       #bbc7df;

  /* Tertiary — cooling red (matches "HEATING" word in logo and
     the red toolbox on the truck). Used for emergency/heat callouts
     and small accent flourishes. NEVER as a primary CTA. */
  --prc-tertiary:                  #ab2c38;
  --prc-tertiary-container:        #cc444e;
  --prc-tertiary-fixed:            #ffdad9;
  --prc-tertiary-fixed-dim:        #ffb3b3;
  --prc-on-tertiary-fixed:         #400009;
  --prc-on-tertiary-fixed-variant: #8d1325;

  /* Error — for form validation only. */
  --prc-error:                     #ba1a1a;
  --prc-error-container:           #ffdad6;
  --prc-on-error-container:        #93000a;

  /* Surface — warm cream/parchment. Default page background.
     This is the single biggest move that keeps the brand from
     looking like generic corporate-blue tech. */
  --prc-background:                #fef9f1;
  --prc-surface:                   #fef9f1;
  --prc-surface-bright:            #fef9f1;
  --prc-surface-container-lowest:  #ffffff;
  --prc-surface-container-low:     #f8f3ec;
  --prc-surface-container:         #f2ede6;
  --prc-surface-container-high:    #ece7e1;
  --prc-surface-container-highest: #e7e2db;
  --prc-surface-dim:               #ded9d3;
  --prc-surface-variant:           #e7e2db;

  /* Foreground (text) on the cream system. */
  --prc-on-background:             #1d1b17;   /* near-black ink */
  --prc-on-surface:                #1d1b17;
  --prc-on-surface-variant:        #554339;   /* secondary body, captions */
  --prc-outline:                   #887367;
  --prc-outline-variant:           #dcc1b4;

  /* Inverse / dark — desert-night navy. The hero band, the second
     CTA band, and the footer all sit on this. The only "dark blue"
     in the system; do NOT introduce other blues. */
  --prc-navy:                      #0a1628;   /* custom-navy */
  --prc-inverse-surface:           #32302c;
  --prc-inverse-on-surface:        #f5f0e9;
  --prc-inverse-primary:           #ffb68d;

  /* =========================================================
     COLOR — BRAND ILLUSTRATION ACCENTS
     Pulled from the lion logo + truck wrap. Use ONLY in
     illustration, photo overlays, or branded decorative
     elements — never as UI fills.
     ========================================================= */
  --prc-brand-lion-mane:           #d99a3a;   /* lion mane gold */
  --prc-brand-lion-deep:           #8a5a1a;   /* lion shadow / saddle */
  --prc-brand-cactus:              #4ea344;   /* saguaro green */
  --prc-brand-truck-blue:          #1b80d9;   /* "COOLING / PLUMBING" cobalt */
  --prc-brand-truck-red:           #e02a2a;   /* "HEATING" red & toolbox */
  --prc-brand-rock:                #8a8e92;   /* logo boulder */
  --prc-brand-stream:              #5db8e8;   /* HVAC steam wisps */

  /* =========================================================
     TYPE
     ========================================================= */
  --prc-font-headline: "Barlow Condensed", "Oswald", "Impact", sans-serif;
  --prc-font-body:     "Barlow", "Inter", system-ui, -apple-system, sans-serif;
  --prc-font-label:    "Barlow Condensed", "Oswald", sans-serif;
  --prc-font-icon:     "Material Symbols Outlined";

  /* Type ramp — mobile-first, scales up at md+ via the semantic
     classes below. Numbers in px to make the spec literal. */
  --prc-type-display:    72px;   /* hero: "AC Not Cooling?" */
  --prc-type-h1:         48px;
  --prc-type-h2:         36px;
  --prc-type-h3:         24px;
  --prc-type-h4:         20px;
  --prc-type-body-lg:    20px;   /* hero subhead */
  --prc-type-body:       16px;
  --prc-type-body-sm:    14px;
  --prc-type-caption:    12px;
  --prc-type-overline:   10px;   /* mobile address strip */

  /* Weights — Barlow Condensed 800 carries the trade-bold voice. */
  --prc-weight-body:        400;
  --prc-weight-body-strong: 600;
  --prc-weight-headline:    700;
  --prc-weight-headline-x:  800;

  /* Letter-spacing — wide tracking on uppercase labels echoes the
     truck wrap and the wordmark. */
  --prc-tracking-wordmark:  0.18em;
  --prc-tracking-label:     0.08em;
  --prc-tracking-tight:     -0.01em;

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

  /* Section padding pattern from the landing page. */
  --prc-section-y-mobile:  64px;
  --prc-section-y:         96px;
  --prc-container-max:     1280px;
  --prc-container-px:      24px;

  /* =========================================================
     RADIUS — small. The brand is rectilinear (truck panels,
     rooftop units). Avoid pill/full-round on UI surfaces.
     ========================================================= */
  --prc-radius-xs:    2px;    /* DEFAULT */
  --prc-radius-sm:    4px;    /* lg in Tailwind */
  --prc-radius-md:    8px;    /* xl in Tailwind, the standard button radius */
  --prc-radius-lg:    12px;   /* "full" in Tailwind config (cards, glass-badge) */
  --prc-radius-pill:  9999px; /* badges only */

  /* =========================================================
     SHADOW & ELEVATION
     CTAs use a colored shadow (orange glow) — this is the
     signature elevation. Cards use a subtle neutral shadow.
     ========================================================= */
  --prc-shadow-sm:        0 1px 2px rgba(29, 27, 23, 0.06);
  --prc-shadow-card:      0 2px 8px rgba(29, 27, 23, 0.08);
  --prc-shadow-cta:       0 4px 14px rgba(151, 68, 1, 0.40);
  --prc-shadow-cta-lg:    0 6px 20px rgba(151, 68, 1, 0.50);
  --prc-shadow-header:    0 1px 0 rgba(220, 193, 180, 0.20);
  --prc-glow-ambient:     0 0 150px rgba(182, 91, 29, 0.20);

  /* =========================================================
     GRADIENTS — the CTA gradient is a brand signature.
     ========================================================= */
  --prc-grad-cta:        linear-gradient(180deg, #e07730 0%, #974401 100%);
  --prc-grad-cta-small:  linear-gradient(180deg, #c8692a 0%, #974401 100%);

  /* =========================================================
     MOTION
     ========================================================= */
  --prc-ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --prc-dur-fast:        150ms;
  --prc-dur:             200ms;
  --prc-dur-slow:        500ms;
}

/* ===========================================================
   SEMANTIC ELEMENT STYLES
   Drop-in defaults — apply by adding the class or wrapping in
   .prc, OR scope globally by removing the prefix.
   =========================================================== */

.prc, .prc * { box-sizing: border-box; }

.prc {
  background-color: var(--prc-background);
  color: var(--prc-on-background);
  font-family: var(--prc-font-body);
  font-size: var(--prc-type-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.prc h1, .prc-h1 {
  font-family: var(--prc-font-headline);
  font-weight: var(--prc-weight-headline-x);
  font-size: clamp(40px, 6vw, var(--prc-type-display));
  line-height: 1.05;
  letter-spacing: var(--prc-tracking-tight);
  color: var(--prc-on-surface);
  text-wrap: balance;
}

.prc h2, .prc-h2 {
  font-family: var(--prc-font-headline);
  font-weight: var(--prc-weight-headline-x);
  font-size: clamp(28px, 4vw, var(--prc-type-h2));
  line-height: 1.1;
  color: var(--prc-on-surface);
}

.prc h3, .prc-h3 {
  font-family: var(--prc-font-headline);
  font-weight: var(--prc-weight-headline);
  font-size: var(--prc-type-h3);
  line-height: 1.2;
  color: var(--prc-on-surface);
}

.prc h4, .prc-h4 {
  font-family: var(--prc-font-headline);
  font-weight: var(--prc-weight-headline);
  font-size: var(--prc-type-h4);
  line-height: 1.25;
  color: var(--prc-on-surface);
}

.prc p, .prc-body {
  font-family: var(--prc-font-body);
  font-weight: var(--prc-weight-body);
  font-size: var(--prc-type-body);
  line-height: 1.6;
  color: var(--prc-on-surface);
  text-wrap: pretty;
}

.prc-body-lg {
  font-size: var(--prc-type-body-lg);
  line-height: 1.55;
  color: var(--prc-on-surface-variant);
}

.prc-body-sm    { font-size: var(--prc-type-body-sm); line-height: 1.5; }
.prc-caption    { font-size: var(--prc-type-caption); color: var(--prc-on-surface-variant); }

.prc-overline,
.prc-eyebrow {
  font-family: var(--prc-font-label);
  font-weight: var(--prc-weight-headline);
  font-size: var(--prc-type-caption);
  text-transform: uppercase;
  letter-spacing: var(--prc-tracking-label);
  color: var(--prc-primary);
}

.prc-wordmark {
  font-family: var(--prc-font-headline);
  font-weight: var(--prc-weight-headline-x);
  text-transform: uppercase;
  letter-spacing: var(--prc-tracking-wordmark);
  color: var(--prc-primary);
  line-height: 1;
}

.prc-price {
  font-family: var(--prc-font-headline);
  font-weight: var(--prc-weight-headline-x);
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: var(--prc-tracking-tight);
  color: var(--prc-on-surface);
}

.prc-phone {
  font-family: var(--prc-font-headline);
  font-weight: var(--prc-weight-headline-x);
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: var(--prc-tracking-tight);
  color: var(--prc-primary);
  text-decoration: none;
}
.prc-phone:hover { color: var(--prc-primary-hover); }

/* Material Symbols glyph — keep weight 400, fillable via inline style. */
.prc .material-symbols-outlined,
.prc-icon {
  font-family: var(--prc-font-icon);
  font-weight: normal;
  font-style: normal;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  line-height: 1;
  vertical-align: middle;
}
.prc-icon[data-fill="1"] { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ===========================================================
   TOPOGRAPHIC NOISE OVERLAY — used on dark hero/CTA bands.
   =========================================================== */
.prc-bg-topo {
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.005' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}

/* Glass badge (used for "Technicians Available Today"). */
.prc-glass-badge {
  background: rgba(254, 249, 241, 0.10);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(254, 249, 241, 0.20);
  color: var(--prc-surface);
  border-radius: var(--prc-radius-pill);
  padding: 8px 16px;
  font-family: var(--prc-font-label);
  font-weight: var(--prc-weight-headline);
  font-size: var(--prc-type-body-sm);
  text-transform: uppercase;
  letter-spacing: var(--prc-tracking-label);
}