/* global.css — Central Wisconsin Auto Spa ceramic coating funnel
 *
 * Design tokens + base + shared components. Loaded by every page BEFORE its
 * page-specific stylesheet, so page styles can override via the cascade.
 *
 * Palette and type are lifted from centralwisconsinautospa.com (measured, not
 * eyeballed) so ad traffic lands somewhere that reads as the same company:
 *   mint  #00EBC7  — their accent, logo mark, diagonal motif
 *   amber #E5990A  — their primary CTA colour
 *   ground #2D2E32 / #000 — their near-black
 *   display Josefin Sans 700 italic, all-caps
 *   body    Source Sans Pro
 *
 * This is NOT bettercarepath's system. Different client, different brand.
 */

:root {
  /* ---- Ground ---- */
  --c-ink:        #0B0C0E;   /* page ground */
  --c-surface:    #16181C;   /* raised panel */
  --c-surface-2:  #2D2E32;   /* their dark, used for lifted cards */
  --c-line:       rgba(255, 255, 255, 0.10);
  --c-line-str:   rgba(255, 255, 255, 0.20);

  /* ---- Text ---- */
  --c-text:       #FFFFFF;
  --c-text-mut:   #A3A6AD;
  --c-text-dim:   #6E727A;

  /* ---- Brand ---- */
  --c-mint:       #00EBC7;
  --c-mint-dim:   #00B99C;
  --c-amber:      #E5990A;
  --c-amber-lift: #F5AA22;

  /* ---- Feedback ---- */
  --c-err:        #FF6B6B;
  --c-ok:         var(--c-mint);

  /* ---- Type ---- */
  --f-display: "Josefin Sans", "Futura", "Century Gothic", sans-serif;
  --f-body:    "Source Sans 3", "Source Sans Pro", -apple-system,
               BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid scale — clamp(min, preferred, max) */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-lg:   clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
  --t-xl:   clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
  --t-2xl:  clamp(1.75rem, 2vw + 1.2rem, 2.5rem);
  --t-3xl:  clamp(2.25rem, 4vw + 1.2rem, 3.75rem);
  --t-4xl:  clamp(2.75rem, 6vw + 1rem, 5rem);

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

  /* ---- Radius ---- */
  --r-sm: 4px;  --r-md: 8px;  --r-lg: 14px;  --r-pill: 999px;

  /* ---- Layout ---- */
  --w-page:  1180px;
  --w-text:  62ch;
  --w-form:  460px;

  /* ---- Motion ---- */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--c-ink);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--c-mint); text-underline-offset: 3px; }
a:hover { color: var(--c-text); }

:focus-visible {
  outline: 2px solid var(--c-mint);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ------------------------------------------------------------- primitives */

.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.section { padding-block: clamp(var(--s-7), 8vw, var(--s-9)); }

.eyebrow {
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-mint);
  margin: 0 0 var(--s-3);
}

.lede {
  font-size: var(--t-lg);
  color: var(--c-text-mut);
  max-width: var(--w-text);
}

.rule {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: 0;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Mint accent on a word inside a heading — their site does this. */
.hl { color: var(--c-mint); }

/* ---------------------------------------------------------------- buttons */

.btn {
  --btn-bg: var(--c-amber);
  --btn-fg: #14160F;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 54px;
  padding: var(--s-3) var(--s-6);
  border: 0;
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms var(--e-out), transform 160ms var(--e-out);
}
.btn:hover { background: var(--btn-lift, var(--c-amber-lift)); color: var(--btn-fg); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn--block { width: 100%; }

.btn--mint {
  --btn-bg: var(--c-mint);
  --btn-lift: #3DF3D6;
  --btn-fg: #04231E;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-text);
  border: 1px solid var(--c-line-str);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.06); color: var(--c-text); }

/* ------------------------------------------------------------------ forms */

.form { display: grid; gap: var(--s-4); }

.field { display: grid; gap: var(--s-2); }

.label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text-mut);
}

.input,
.textarea {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  min-height: 52px;
  border: 1px solid var(--c-line-str);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--t-base);
  transition: border-color 160ms var(--e-out), background 160ms var(--e-out);
}
.input::placeholder,
.textarea::placeholder { color: var(--c-text-dim); }
.input:hover,
.textarea:hover { border-color: rgba(255, 255, 255, 0.32); }
.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--c-mint);
  background: rgba(0, 235, 199, 0.05);
}
.textarea { min-height: 108px; resize: vertical; line-height: 1.5; }

.input[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--c-err); }

.field-error {
  margin: 0;
  min-height: 1.2em;
  color: var(--c-err);
  font-size: var(--t-sm);
}
.field-error:empty { min-height: 0; }

.form-note {
  margin: 0;
  color: var(--c-text-dim);
  font-size: var(--t-xs);
  line-height: 1.5;
}

/* --------------------------------------------------------- shared footer */

.site-footer {
  border-top: 1px solid var(--c-line);
  padding-block: var(--s-6);
  color: var(--c-text-dim);
  font-size: var(--t-sm);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  justify-content: space-between;
}
.site-footer a { color: var(--c-text-mut); text-decoration: none; }
.site-footer a:hover { color: var(--c-mint); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }