/* =============================================================
   Sundae Websites — Design Tokens
   Brand: dark navy stage, single bright blue accent,
   a diamond-dot motif, Outfit + Source Sans 3.
   ============================================================= */

/* --- Webfonts: Millik (display serif) + Avenir (body sans) ---
   Millik is the brand display face — see the "S" in the mark.
   Avenir carries body, UI, and the wordmark "WEBSITES" tracked-out lockup.
   Only Millik Regular ships in the kit; Avenir comes in 4 weights.
*/
@font-face {
  font-family: "Millik";
  src: url("fonts/MillikRegular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("fonts/Avenir_Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("fonts/Avenir_Book.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("fonts/Avenir_Regular.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir";
  src: url("fonts/Avenir_Heavy.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {

  /* =====================================================================
     COLOR — five colors do almost all the work.
     ===================================================================== */

  /* Brand — surface + ink */
  --ink:            #1B1D2B;   /* navy/near-black — primary stage + body text on light */
  --ink-90:         rgba(27, 29, 43, 0.90);
  --ink-70:         rgba(27, 29, 43, 0.70);   /* body on light */
  --ink-60:         rgba(27, 29, 43, 0.60);   /* meta */
  --ink-45:         rgba(27, 29, 43, 0.45);   /* faint / footer location */
  --ink-20:         rgba(27, 29, 43, 0.20);   /* outline-dark border */
  --ink-10:         rgba(27, 29, 43, 0.10);   /* hairlines */
  --ink-06:         rgba(27, 29, 43, 0.06);   /* very faint dividers */

  /* Brand — action */
  --blue:           #228DF9;   /* primary CTA, eyebrow diamond, links */
  --blue-deep:      #034EF3;   /* hover/active + featured pricing card */
  --blue-light:     #6FB5FB;   /* accent text on dark, nav phone button, hover */

  /* Surfaces */
  --paper:          #FFFFFF;   /* clean white sections */
  --cream:          #F6F3EE;   /* warm off-white tint — "promise" / editorial bands */

  /* Accent — used sparingly. The "save sticker" sticker yellow. */
  --sticker:        #FFD83D;

  /* On-dark text colors (for overlay use on --ink) */
  --on-dark:        #FFFFFF;
  --on-dark-85:     rgba(255, 255, 255, 0.85);
  --on-dark-78:     rgba(255, 255, 255, 0.78);
  --on-dark-65:     rgba(255, 255, 255, 0.65);
  --on-dark-55:     rgba(255, 255, 255, 0.55);
  --on-dark-38:     rgba(255, 255, 255, 0.38);
  --on-dark-18:     rgba(255, 255, 255, 0.18);
  --on-dark-08:     rgba(255, 255, 255, 0.08);

  /* Semantic — keep close to the brand palette. */
  --success:        #2F8F5A;
  --warn:           #C58A2F;
  --error:          #C04A3A;

  /* Diamond-dot pattern fill (for backgrounds). Use as background-image. */
  --dot-pattern-blue:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M7.6,12.46 L3.54,8.4 C3.25,8.11 3.25,7.64 3.54,7.36 L7.6,3.3 C7.89,3.01 8.36,3.01 8.65,3.3 L12.7,7.36 C12.99,7.64 12.99,8.11 12.7,8.4 L8.65,12.46 C8.36,12.75 7.89,12.75 7.6,12.46Z' fill='%23228DF9' fill-opacity='0.10'/></svg>");

  /* =====================================================================
     TYPE — two families.
       • Millik (serif, single Regular weight): editorial display — headlines,
         hero, big quotes. The "S" in the mark is set in Millik.
       • Avenir (geometric sans, 4 weights): body, UI, nav, buttons, eyebrows,
         and the tracked-out "WEBSITES" in the wordmark.
     ===================================================================== */

  --font-display:   "Millik", "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:      "Avenir", "Avenir Next", "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-ui:        "Avenir", "Avenir Next", "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Size scale — generous on the top end, the brand uses big display type. */
  --fs-11:  0.6875rem;   /* 11 — micro labels */
  --fs-12:  0.75rem;     /* 12 — eyebrow */
  --fs-13:  0.8125rem;   /* 13 — nav links uppercase */
  --fs-14:  0.875rem;    /* 14 — small / nav phone */
  --fs-15:  0.9375rem;   /* 15 — buttons */
  --fs-16:  1rem;        /* 16 */
  --fs-17:  1.0625rem;   /* 17 — service list body */
  --fs-18:  1.125rem;    /* 18 — body default */
  --fs-19:  1.1875rem;   /* 19 — FAQ summary */
  --fs-20:  1.25rem;     /* 20 — large body */
  --fs-22:  1.375rem;    /* 22 — pricing tier name */
  --fs-24:  1.5rem;      /* 24 — h4 / service title mobile */
  --fs-28:  1.75rem;     /* 28 — proof quote mobile */
  --fs-32:  2rem;        /* 32 — h2 mobile / faq mobile */
  --fs-36:  2.25rem;     /* 36 — service title */
  --fs-42:  2.625rem;    /* 42 — hero h1 mobile */
  --fs-44:  2.75rem;     /* 44 — proof quote */
  --fs-48:  3rem;        /* 48 — h2 / price amount / final-cta */
  --fs-64:  4rem;        /* 64 — promise anchor */
  --fs-72:  4.5rem;      /* 72 — hero h1 */

  /* Weights — Millik ships Regular only; Avenir gives us 4 stops. */
  --w-light:   300;          /* Avenir Light — soft footer / faint meta */
  --w-book:    400;          /* Avenir Book — default body weight */
  --w-regular: 500;          /* Avenir Regular (medium) — nav, labels, buttons */
  --w-heavy:   800;          /* Avenir Heavy — strong UI emphasis, "SUNDAE" lockup */
  --w-serif:   400;          /* Millik Regular — the ONLY Millik weight */

  /* Back-compat numeric aliases (legacy) */
  --w-300: 300;
  --w-400: 400;
  --w-500: 500;
  --w-800: 800;

  /* Line heights */
  --lh-tight:   1.05;    /* hero h1 / display */
  --lh-snug:    1.2;     /* h2 / proof quote */
  --lh-cozy:    1.45;
  --lh-body:    1.6;     /* default body */
  --lh-loose:   1.8;     /* channels list */

  /* Letter spacing */
  --tr-display: -0.01em;   /* h1 / h2 — serif wants less negative tracking */
  --tr-tight:   -0.015em;  /* big stats / final cta */
  --tr-snug:    -0.005em;
  --tr-nav:     0.06em;    /* nav-link uppercase */
  --tr-eyebrow: 0.18em;    /* hero eyebrow uppercase */
  --tr-tracked: 0.22em;    /* badge / wordmark "WEBSITES" lockup */
  --tr-soft:    0.04em;    /* small uppercase */

  /* =====================================================================
     SPACING — 4px base. Layouts are generous; section padding is large.
     ===================================================================== */
  --s-0:  0;
  --s-1:  0.25rem;   /*  4 */
  --s-2:  0.5rem;    /*  8 */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.5rem;    /* 24 */
  --s-6:  2rem;      /* 32 */
  --s-7:  2.75rem;   /* 44 */
  --s-8:  4rem;      /* 64 */
  --s-9:  6rem;      /* 96  — mobile section padding */
  --s-10: 8rem;      /* 128 — desktop section padding */

  /* Container widths */
  --w-prose:    44rem;     /* 704  — readable text column */
  --w-content:  56rem;     /* 896  — FAQ width */
  --w-page:     1100px;    /* 1100 — primary container max */
  --w-wide:     1240px;

  /* =====================================================================
     RADII — soft but never pillowy. Pills for tags + nav phone.
     ===================================================================== */
  --r-1:    4px;
  --r-2:    8px;     /* buttons / nav phone */
  --r-3:    10px;    /* btn (hero CTA) */
  --r-4:    14px;
  --r-5:    20px;    /* price cards */
  --r-pill: 999px;

  /* =====================================================================
     SHADOWS — restrained. The only "loud" shadow is the featured price
     card's blue glow, and the save-sticker's drop.
     ===================================================================== */
  --shadow-sm:       0 1px 2px rgba(27, 29, 43, 0.06);
  --shadow-md:       0 4px 16px rgba(27, 29, 43, 0.08);
  --shadow-lg:       0 12px 28px rgba(27, 29, 43, 0.10);
  --shadow-feature:  0 24px 48px rgba(3, 78, 243, 0.20);          /* featured price card */
  --shadow-sticker:  0 6px 18px rgba(0, 0, 0, 0.18),
                     inset 0 0 0 4px rgba(255, 255, 255, 0.85);   /* save sticker */
  --shadow-focus:    0 0 0 3px rgba(34, 141, 249, 0.35);          /* focus ring */
  --shadow-nav:      0 1px 0 rgba(255, 255, 255, 0.06);           /* nav scrolled hairline */

  /* =====================================================================
     MOTION — fast, polite, no bounce, no spring.
     ===================================================================== */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:      120ms;
  --d-base:      150ms;
  --d-slow:      200ms;
  --blur-nav:    14px;        /* sticky-nav glass */

  /* =====================================================================
     LAYOUT TOKENS specific to Sundae's recurring chrome.
     ===================================================================== */
  --nav-height:        80px;
  --wave-height:       60px;
  --diamond-eyebrow:   9px;     /* the rotated-square next to "eyebrow" labels */
  --diamond-bullet:    8px;
}


/* =============================================================
   SEMANTIC ELEMENT STYLES — opinionated defaults so a bare HTML
   document already looks like a Sundae page on white.
   ============================================================= */

html {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Render at the authored sizes on mobile — stop Android Chrome from
     auto-inflating ("boosting") text, which widened the eyebrow on real
     phones and made it wrap differently than the desktop preview. */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0;
}

/* Headings — Millik serif. Only Regular weight; size + air do the work. */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-serif);
  font-size: var(--fs-72);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: inherit;
  margin: 0 0 var(--s-4);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-serif);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--ink);
  margin: 0 0 var(--s-4);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-serif);
  font-size: var(--fs-36);
  line-height: 1.15;
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  margin: 0 0 var(--s-3);
}

/* h4 — Avenir Heavy. Mid-level UI titles use the sans, not the serif. */
h4, .h4 {
  font-family: var(--font-ui);
  font-weight: var(--w-heavy);
  font-size: var(--fs-22);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}

/* Body — Avenir Book. */
p, .body {
  font-family: var(--font-body);
  font-weight: var(--w-book);
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--ink-70);
  margin: 0 0 var(--s-4);
}

.lede, .body-lg {
  font-size: var(--fs-20);
  line-height: var(--lh-body);
  color: var(--ink-70);
}

.body-sm {
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--ink-60);
}

/* Eyebrow — uppercase Avenir Heavy with the blue rotated-diamond glyph. */
.eyebrow {
  font-family: var(--font-ui);
  font-weight: var(--w-heavy);
  font-size: var(--fs-12);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: var(--diamond-eyebrow);
  height: var(--diamond-eyebrow);
  background: var(--blue);
  transform: rotate(45deg);
  border-radius: 2px;
}
.eyebrow.on-dark { color: var(--on-dark-85); }
.eyebrow.on-dark::before { background: var(--blue); }

/* Links — inherit color in nav/content; blue on body copy. */
a { color: inherit; text-decoration: none; }
.link, p a, .body a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.link:hover, p a:hover { color: var(--blue-deep); }

/* Quote — Millik serif, large, no italics. The editorial centerpiece. */
blockquote, .quote {
  font-family: var(--font-display);
  font-weight: var(--w-serif);
  font-size: var(--fs-44);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: inherit;
  margin: 0;
}

/* Stats — Avenir Heavy. The serif can't go heavy, so big numbers ride sans. */
.stat-num {
  font-family: var(--font-ui);
  font-weight: var(--w-heavy);
  font-size: var(--fs-64);
  line-height: 1;
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Mono — almost never used; available for technical receipts. */
code, pre { font-family: var(--font-mono); font-size: 0.92em; }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

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