/*
  Design tokens extracted from claude-design/Oasis Homepage.dc.html (approved export).
  Every value here is pulled 1:1 from that file — do not hand-tune a value here without
  checking it against the export first. Keyframe rules and component patterns live in
  styles.css; this file is values only.
*/

:root {
  /* ---- Brand colors (CLAUDE.md source of truth) ---- */
  --color-tiger-orange: #EB881E;
  --color-dark-teal: #075B73;
  --color-ink-black: #021F27;
  --color-linen: #FDF5EC;

  /* ---- Secondary / supporting colors ---- */
  --color-ember: #C1440E;         /* second stop in warm CTA gradient + pulse rings */
  --color-hero-banner-bg: #032F3B; /* "Schedule Your Service" bottom banner background */
  --color-white: #ffffff;
  --color-text-body: #333333;      /* paragraph copy on light backgrounds */
  --color-text-muted: #666666;     /* secondary copy, select placeholder text */
  --color-text-faint: #999999;     /* review service-type label */
  --color-border-card: #e3dcc9;    /* card borders on linen backgrounds */
  --color-border-input: #dddddd;   /* form input borders on white cards */
  --color-disabled-bg: #d8d2c6;
  --color-disabled-text: #8a8577;
  --color-hero-divider: #DC701840; /* vertical divider in hero bottom banner */

  /* ---- Ink Black alpha ramp (dark overlays / shadows / pulses) ---- */
  --ink-95: rgba(2, 31, 39, .95);
  --ink-85: rgba(2, 31, 39, .85);
  --ink-80: rgba(2, 31, 39, .80);
  --ink-75: rgba(2, 31, 39, .75);
  --ink-50: rgba(2, 31, 39, .50);
  --ink-40: rgba(2, 31, 39, .40);
  --ink-35: rgba(2, 31, 39, .35);
  --ink-30: rgba(2, 31, 39, .30);
  --ink-15: rgba(2, 31, 39, .15);
  --ink-0:  rgba(2, 31, 39, 0);

  /* ---- Linen alpha ramp (text / borders on dark backgrounds) ---- */
  --linen-85: rgba(253, 245, 236, .85);
  --linen-75: rgba(253, 245, 236, .75);
  --linen-70: rgba(253, 245, 236, .70);
  --linen-60: rgba(253, 245, 236, .60);
  --linen-50: rgba(253, 245, 236, .50);
  --linen-30: rgba(253, 245, 236, .30);
  --linen-25: rgba(253, 245, 236, .25);
  --linen-15: rgba(253, 245, 236, .15);
  --linen-10: rgba(253, 245, 236, .10);

  /* ---- Tiger Orange alpha ramp (CTA glow / pulse rings) ---- */
  --orange-60: rgba(235, 136, 30, .60);
  --orange-55: rgba(235, 136, 30, .55);
  --orange-35: rgba(235, 136, 30, .35);
  --orange-25: rgba(235, 136, 30, .25);
  --orange-0:  rgba(235, 136, 30, 0);

  /* ---- Ember alpha ramp (paired with orange in warm pulses) ---- */
  --ember-30: rgba(193, 68, 14, .30);
  --ember-10: rgba(193, 68, 14, .10);
  --ember-0:  rgba(193, 68, 14, 0);

  /* ---- One-off sweep used only in .cta-outline:hover ---- */
  --white-18: rgba(255, 255, 255, .18);
  --teal-25: rgba(7, 91, 115, .25);

  /* ---- Fonts ----
     Site uses a single serif family throughout (headings AND body) — there is no
     separate body/heading split in the approved export. The Public+Sans Google Font
     link in the export is never referenced by any element; it's dropped from the build
     (flagged to client — see build notes). */
  --font-heading: 'apotek', Georgia, serif;
  --font-body: 'apotek', Georgia, serif;

  /* ---- Type scale (raw, named by px — exact values from the export) ---- */
  --fs-11: 11px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-19: 19px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-22-rem: 1.375rem; /* 22px at the 16px root default, expressed in rem */
  --fs-24-rem: 1.5rem;   /* 24px at the 16px root default, expressed in rem */
  --fs-25: 25px;
  --fs-26: 26px;
  --fs-33: 33px;
  --fs-42: 42px;
  --fs-54: 54px;
  --fs-70: 70px;

  /* ---- Type scale (semantic aliases — reference these in components/pages) ---- */
  --fs-hero-headline: var(--fs-70);
  --fs-h2: var(--fs-42);          /* every section heading: About, Services, Reviews, Service Area, Contact */
  --fs-service-h1: var(--fs-54);  /* service page hero H1 (Phase 3 collection) */
  --fs-logo: var(--fs-33);
  --fs-phone-lg: var(--fs-26);    /* contact section phone number */
  --fs-h3-banner: var(--fs-25);   /* "Schedule Your Service" banner heading */
  --fs-card-title: var(--fs-22);  /* service card title */
  --fs-subhead: var(--fs-22-rem); /* hero subhead */
  --fs-nav-phone: var(--fs-20);
  --fs-hero-phone: var(--fs-24-rem); /* nav phone number, sits in the hero */
  --fs-cta: var(--fs-19);         /* CTA buttons */
  --fs-body-lg: var(--fs-17);     /* paragraphs, review-count line, hero-banner subtext */
  --fs-nav-link: var(--fs-16);
  --fs-body: var(--fs-15);        /* form inputs, badges, footer links, eyebrow labels, review name */
  --fs-small: var(--fs-14);       /* town pills, footer headings, review name */
  --fs-tiny: var(--fs-13);        /* review service-type label, footer fine print */
  --fs-tagline: var(--fs-11);     /* "Cooling & Heating" under the logo */

  /* ---- Font weights ---- */
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Line heights ---- */
  --lh-tight: 1.1;    /* hero headline, logo lockup */
  --lh-snug: 1.15;    /* h2 section headings */
  --lh-heading: 1.3;  /* banner heading */
  --lh-relaxed: 1.6;  /* hero subhead, card copy */
  --lh-loose: 1.7;    /* about/contact paragraphs */

  /* ---- Letter spacing (each used for one specific role) ---- */
  --ls-logo: 0.16em;
  --ls-nav: .05em;
  --ls-footer-heading: .06em;
  --ls-eyebrow: .08em;
  --ls-tagline: .12em;

  /* ---- Radius ---- */
  --radius-sm: 6px;     /* nav link hover */
  --radius-md: 8px;     /* buttons, form fields, form card */
  --radius-lg: 12px;    /* service cards, review cards */
  --radius-xl: 14px;    /* contact form card */
  --radius-2xl: 16px;   /* rounded image slots: family photo, service-area map */
  --radius-pill: 999px; /* badges, town pills */

  /* ---- Container / max-widths ---- */
  --maxw-container: 1400px;      /* default page container (nav, about, services, reviews, service-area, contact, footer) */
  --maxw-container-wide: 1440px; /* hero bottom banner row */
  --maxw-content: 1180px;        /* reviews grid, service-area map */
  --maxw-town-pills: 920px;
  --maxw-hero-headline: 900px;
  --maxw-hero-subhead: 500px;
  --maxw-service-area-copy: 560px;
  --maxw-footer-col: 260px;
  --maxw-form-field-msg: 300px;   /* hero quick-form "Message" field */
  --maxw-form-field-sm: 230px;    /* hero quick-form Name/Phone/Email fields */

  /* ---- Spacing (raw atomic scale, named by px — compose these for padding/gap shorthand) ---- */
  --space-0: 0;
  --space-2: 2px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-17: 17px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-23: 23px;
  --space-24: 24px;
  --space-28: 28px;
  --space-29: 29px;
  --space-30: 30px;
  --space-32: 32px;
  --space-34: 34px;
  --space-36: 36px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-88: 88px;
  --space-200: 200px;

  /* ---- Spacing (semantic aliases) ---- */
  --section-py: var(--space-88);  /* every section's vertical padding */
  --section-px: var(--space-48);  /* every section's horizontal padding */
  --card-padding: var(--space-24); /* service/review cards */
  --card-padding-lg: var(--space-36); /* contact form card */

  /* ---- Shadows ---- */
  --shadow-hero-banner: 0 -12px 40px var(--ink-40);
  --shadow-cta-rest: 0 0 0 0 var(--orange-60), 0 0 0 0 var(--ember-0);

  /* ---- Motion ---- */
  --duration-fast: .25s;
  --duration-base: .5s;
  --duration-pulse: 1.8s;
  --duration-pulse-soft: 1s;
  --duration-banner-pulse: 3.5s;
  --ease-out: ease-out;
}