/* ============================================
   Fair Winds Plumbing - base.css
   Tokens, reset, typography
   ============================================ */

/* ---------- Self-hosted fonts (latin subset, variable) ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
  /* Nova Scotia coastal palette */
  --cream:        #f4efe4;      /* lighthouse paint - warm off-white */
  --sand:         #e8e2d6;      /* sea-worn shingle */
  --sand-deep:    #d4cfc4;      /* fog on stone */
  --paper:        #fbfaf6;      /* raised surface / card white */
  --ink:          #131c25;      /* near-black, cool-dark - tuned for navy palette */
  --ink-soft:     #485560;      /* muted body copy */
  --ink-mute:     #6b7682;      /* secondary muted */
  --bronze:       #b8863f;      /* rope / brass fitting - accent only */
  --bronze-deep:  #8a6028;      /* darker brass, hover state */
  --bronze-soft:  #e0b87d;      /* lighter brass on dark surfaces - AA contrast on --navy */
  --header-h:     78px;         /* fixed header height - desktop (32 padding + 44 mark + 2 border) */
  --navy:         #183F59;      /* deep harbor navy - dominant dark */
  --navy-soft:    #1f547a;      /* sea-blue hover / nested surfaces */
  --navy-deep:    #0e2a3d;      /* button-shadow base */
  --navy-deeper:  #0a1f2e;      /* deepest shadow */
  --navy-mid:     #234e6e;      /* gradient stop on dark surfaces */
  /* Backwards-compatible aliases - components reference --sage. */
  --sage:         var(--navy);
  --sage-soft:    var(--navy-soft);
  --iron:         var(--navy);
  --rust:         #8a3a22;      /* desaturated brick - single attn moment only */
  --border:       rgba(24, 63, 89, 0.14);
  --border-soft:  rgba(24, 63, 89, 0.08);

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Sizing - tighter, squarer */
  --max:          1180px;
  --gutter:       clamp(1.25rem, 4vw, 2.5rem);
  --radius:       6px;
  --radius-sm:    4px;
  --radius-lg:    8px;

  /* Shadow - cool-dark tint */
  --shadow-soft:  0 4px 12px rgba(19, 28, 37, 0.12);
  --shadow-lift:  0 8px 28px rgba(19, 28, 37, 0.20);

  /* Motion - generic */
  --ease:         cubic-bezier(.2, .7, .2, 1);
  --dur:          240ms;
}

/* ---------- Motion archetype: rugged ----------
   Web-team motion system - rugged archetype tokens.
   Used by [data-motion="rugged"] sites: weighty, stable, no bounce.
   Durations sit on the longer side; easings favor steady deceleration. */
[data-motion="rugged"] {
  --dur-xs:   120ms;
  --dur-sm:   220ms;
  --dur-md:   320ms;
  --dur-lg:   480ms;
  --dur-xl:   680ms;

  --ease-rugged-in:    cubic-bezier(.55, .05, .85, .35);
  --ease-rugged-out:   cubic-bezier(.20, .70, .20, 1);
  --ease-rugged-inout: cubic-bezier(.45, .05, .25, 1);
  --ease-rugged-stand: cubic-bezier(.30, .00, .30, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h, 78px);   /* anchor jumps land below fixed header */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
ul, ol { padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--bronze); outline-offset: 3px; border-radius: 2px; }  /* brass focus ring - visible on both cream and navy */

/* ---------- Body / kraft-paper background ---------- */
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  color-scheme: light;
  background-color: var(--cream);
  overflow-x: clip;                            /* clip rotated decor; safe with fixed header */
  /* Reserve space so the fixed header never sits on top of content */
  padding-top: var(--header-h, 78px);
  background-image:
    /* cool coastal tints - navy + brass at low opacity */
    radial-gradient(circle at 15% 5%,  rgba(24, 63, 89, 0.05) 0, transparent 38%),
    radial-gradient(circle at 85% 95%, rgba(184, 134, 63, 0.04) 0, transparent 38%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3'/><feColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.12 0 0 0 0 0.18 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;                         /* heavier than before (was 600) */
  line-height: 1.06;
  letter-spacing: -0.01em;                  /* less loose - tighter, sturdier */
  color: var(--ink);
  font-variation-settings: "opsz" 72;       /* removed SOFT axis entirely */
}

h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  letter-spacing: -0.015em;
}
h2 { font-size: clamp(1.8rem, 3.4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; letter-spacing: 0.01em; }

/* No italics on headings - removed via em overrides in components */

p { max-width: 62ch; }
p + p { margin-top: 1em; }

/* Eyebrow - cream shipping-label with brass border */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
  padding: 0.3em 0.75em;
  background: var(--paper);
  border-radius: 0;                         /* square label, no pill */
  border: 1px solid rgba(184, 134, 63, 0.55);
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--ink-soft);
  max-width: 56ch;
}

/* Links - brass underline */
a {
  color: var(--sage);
  text-decoration: none;
  background-image: linear-gradient(var(--bronze), var(--bronze));
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
a:hover { background-size: 100% 3px; color: var(--sage-soft); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Screen-reader-only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Utility classes (replaces inline styles per CSS architecture rule) ---------- */
.section--paper      { background: var(--paper); }
.section--flush-top  { padding-top: 0; }
.container.section--narrow { max-width: 740px; }
.text-center         { text-align: center; }
/* The global `p { max-width: 62ch }` left-pins paragraphs even when their text
   is centred — when a <p> opts into .text-center, drop the cap so the block
   actually sits in the middle of its container. */
p.text-center        { max-width: none; }
.center-block        { margin-inline: auto; }
.measure-readable    { max-width: 720px; margin-inline: auto; }
.lede--tight         { margin-top: 0.8rem; }
.mt-sm               { margin-top: 0.5rem; }
.mt-md               { margin-top: 1.5rem; }
.mt-lg               { margin-top: 2.5rem; }
/* Inline button row that survives global `p { max-width: 62ch }` — use any time
   you'd otherwise wrap two <a class="btn"> in a <p>. */
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.brand--on-dark      { color: var(--cream); }
.note                { font-size: 0.85rem; color: var(--ink-mute); margin-top: 0.6rem; }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--ink);
  color: var(--cream);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  z-index: 1000;
  background-image: none;
}
.skip-link:focus { top: 1rem; }