/* Also Coffee Co — design tokens, concatenated.
   GENERATED by tools/build-tokens.py — do not edit.
   Sources in ds/tokens/*.css remain the editable originals; rerun the script
   after changing any of them. */

/* ---------- fonts.css ---------- */
/* Also Coffee Co — Webfonts (self-hosted, no third-party CDN)
   Headings: Fraunces — the FULL variable build carries opsz + SOFT + WONK, so the
   signature warm/wonky display look that echoes the wordmark actually renders.
   Body/UI: Hanken Grotesk (variable wght). If a licensed display face is supplied,
   drop it in assets/fonts/ and repoint the Fraunces src — keep the family name. */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/fraunces-full.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/fraunces-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/hanken-grotesk.woff2") format("woff2");
}

/* ---------- colors.css ---------- */
/* Also Coffee Co — Colour tokens
   Brand palette from the official swatch sheet. Semantic aliases enforce
   the WCAG AA contrast rules: never cream/white text on `blue` or `clay`. */
:root {
  /* ---- Raw brand palette ---- */
  --acc-base:      #FDF4E6; /* page background (cream) */
  --acc-surface:   #FAE9CD; /* alternating section / card (sand) */
  --acc-cream:     #FDF4E6; /* reversed text on dark browns */

  --acc-ink:       #402115; /* primary body text */
  --acc-ink-deep:  #28150D; /* strongest text */
  --acc-primary:   #714230; /* primary buttons, dark sections */
  --acc-mocha:     #99624B; /* secondary warm accent (large/bold only) */
  --acc-clay:      #C28F7A; /* warm decorative blocks (dark text only) */

  --acc-blue:      #93BBCF; /* playful accent — dark-brown text */
  --acc-blue-soft: #C3DBE7; /* soft blue section bg */
  --acc-blue-pale: #E2F4FD; /* palest blue bg (reflect-first card) */

  /* ---- Derived tints / borders / states (from brand hues) ---- */
  --acc-sand-deep: #F2DBB4; /* sand pressed / hairline on cream */
  --acc-border:    #E7D3B3; /* default hairline on cream/sand */
  --acc-border-strong: #D9BE94;
  --acc-primary-hover: #5C3526; /* primary button hover (darker) */
  --acc-primary-press: #4A2A1D;
  --acc-blue-hover:  #7FAAC0; /* blue button hover (darker, keeps dark text) */
  --acc-clay-soft:   #E2C6BA; /* pale clay wash */
  --acc-leaf:        #714230; /* latte-leaf motif ink */

  /* ---- Semantic aliases ---- */
  --surface-page:    var(--acc-base);
  --surface-raised:  var(--acc-surface);
  --surface-card:    #FFFFFF;
  --surface-blue:    var(--acc-blue-soft);
  --surface-blue-pale: var(--acc-blue-pale);
  --surface-dark:    var(--acc-primary);
  --surface-clay:    var(--acc-clay);

  --text-body:       var(--acc-ink);
  --text-strong:     var(--acc-ink-deep);
  --text-muted:      #6B4636;
  --text-on-dark:    var(--acc-cream);
  --text-on-blue:    var(--acc-ink);   /* AA: dark brown on blue */
  --text-on-clay:    var(--acc-ink-deep);

  --accent:          var(--acc-primary);
  --accent-blue:     var(--acc-blue);

  --border:          var(--acc-border);
  --border-strong:   var(--acc-border-strong);

  /* Buttons */
  --btn-primary-bg:    var(--acc-primary);
  --btn-primary-bg-hover: var(--acc-primary-hover);
  --btn-primary-text:  var(--acc-cream);
  --btn-secondary-bg:  var(--acc-blue);
  --btn-secondary-bg-hover: var(--acc-blue-hover);
  --btn-secondary-text: var(--acc-ink-deep);

  --focus-ring:      #2A6FB0; /* high-contrast focus outline */

  /* Star / rating accent */
  --rating:          #B9762F;
}

/* ---------- typography.css ---------- */
/* Also Coffee Co — Typography tokens
   Headings: Fraunces (soft variable serif, high optical size, playful).
   Body/UI:  Hanken Grotesk (friendly humanist sans).
   Note: only --font-display / --font-body are font-FAMILY tokens (auto-detected
   as `font`); the size/weight/metric tokens below are marked `@kind other` so
   the compiler doesn't read their clamp() values as font-family names. */
:root {
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fraunces axis defaults for the warm/wonky display look */
  --display-opsz: 144; /* @kind other */
  --display-soft: 60;  /* @kind other */
  --display-wonk: 1;   /* @kind other */

  /* Fluid type scale (clamp: min @375px -> max @1440px) */
  --fs-display:  clamp(2.75rem, 1.4rem + 5.8vw, 5.25rem); /* @kind other */
  --fs-h1:       clamp(2.25rem, 1.3rem + 4vw, 3.75rem); /* @kind other */
  --fs-h2:       clamp(1.85rem, 1.2rem + 2.7vw, 2.85rem); /* @kind other */
  --fs-h3:       clamp(1.4rem, 1.1rem + 1.3vw, 1.9rem); /* @kind other */
  --fs-h4:       clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem); /* @kind other */
  --fs-lead:     clamp(1.1rem, 1rem + 0.5vw, 1.3rem); /* @kind other */
  --fs-body:     1.0625rem; /* @kind other */
  --fs-small:    0.9375rem; /* @kind other */
  --fs-eyebrow:  0.8125rem; /* @kind other */
  --fs-micro:    0.75rem; /* @kind other */

  /* Weights */
  --fw-body: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700; /* @kind other */
  --fw-display: 600; /* @kind other */
  --fw-display-black: 700; /* @kind other */

  /* Line heights */
  --lh-tight: 1.04; /* @kind other */
  --lh-snug: 1.18; /* @kind other */
  --lh-body: 1.6; /* @kind other */

  /* Letter spacing */
  --ls-display: -0.01em; /* @kind other */
  --ls-tight: -0.02em; /* @kind other */
  --ls-eyebrow: 0.14em; /* @kind other */
  --ls-normal: 0; /* @kind other */
}

/* ---------- spacing.css ---------- */
/* Also Coffee Co — Spacing & layout tokens */
:root {
  --space-3xs: 0.25rem;  /* 4 */
  --space-2xs: 0.5rem;   /* 8 */
  --space-xs:  0.75rem;  /* 12 */
  --space-sm:  1rem;     /* 16 */
  --space-md:  1.5rem;   /* 24 */
  --space-lg:  2rem;     /* 32 */
  --space-xl:  3rem;     /* 48 */
  --space-2xl: 4rem;     /* 64 */
  --space-3xl: 6rem;     /* 96 */

  /* Section vertical rhythm (fluid) */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); /* @kind spacing */

  /* Layout widths */
  --content-size: 1200px; /* @kind spacing */
  --wide-size: 1440px; /* @kind spacing */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem); /* @kind spacing */
}

/* ---------- radius.css ---------- */
/* Also Coffee Co — Radius tokens
   Generous, rounded, friendly. Pill buttons; cards 16–24px. */
:root {
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;   /* small cards, inputs, chips */
  --radius-lg: 22px;   /* product cards, panels */
  --radius-xl: 32px;   /* big feature cards / image frames */
  --radius-2xl: 44px;  /* hero blobs */
  --radius-pill: 999px;/* buttons, badges, tags */
}

/* ---------- shadow.css ---------- */
/* Also Coffee Co — Elevation tokens
   Soft, warm, low-contrast shadows tinted with brand brown — never harsh black.
   Playful "lift" on hover, never heavy drop-shadows. */
:root {
  --shadow-xs: 0 1px 2px rgba(64, 33, 21, 0.06);
  --shadow-sm: 0 2px 8px rgba(64, 33, 21, 0.07);
  --shadow-md: 0 8px 22px rgba(64, 33, 21, 0.10);
  --shadow-lg: 0 18px 40px rgba(64, 33, 21, 0.14);
  --shadow-lift: 0 22px 48px rgba(64, 33, 21, 0.18); /* hover lift */

  /* Coloured glows for product "pop off the page" moments */
  --shadow-product: 0 26px 50px -12px rgba(64, 33, 21, 0.30);
  --shadow-blue: 0 14px 30px rgba(102, 150, 172, 0.30);

  /* Focus ring */
  --ring: 0 0 0 3px var(--surface-page), 0 0 0 6px var(--focus-ring);
}

/* ---------- motion.css ---------- */
/* Also Coffee Co — Motion tokens
   Gentle, springy, friendly. Hover lifts, soft scroll-ins, wavy section
   dividers. Always respect prefers-reduced-motion. */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */

  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
  --dur-reveal: 700ms; /* @kind other */

  --hover-lift: -4px; /* @kind other */
  --press-scale: 0.97; /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
    --dur-reveal: 0ms; /* @kind other */
    --hover-lift: 0px; /* @kind other */
    --press-scale: 1; /* @kind other */
  }
}

/* ---------- base.css ---------- */
/* Also Coffee Co — Base element styles + a few brand utilities.
   Lightweight, dependency-free. Sets page defaults and provides the
   signature wavy section dividers, eyebrow labels, scroll-in reveals,
   and the latte-leaf bullet. */

:root {
  /* Latte-leaf bullet/accent silhouette (data URI so it travels with the CSS) */
  --leaf-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-1.5 0-2.4 1.3-2.4 3 0 1 .4 1.9 1 2.6-1-.8-2.1-1.3-3.1-1.3-1.6 0-2.7 1-2.7 2.4 0 1.6 1.6 3 3.8 3.9 1.4.6 2.6 1.4 3.3 2.6.2-1.4.9-2.6 2-3.6 1.7-1.5 3.2-3 3.2-5 0-1.4-.9-2.3-2-2.3-1.1 0-2.2.7-3.1 1.8.6-.8 1-1.7 1-2.7C14 3.3 13.1 2 12 2Zm-.3 12.4c-1-1-2.5-1.7-4.2-2.2-1.6-.5-2.9-1-3.9-1.7.2 2 1.3 3.8 3.1 5 1.5 1 3.2 1.4 4.6 1.3l-.2 3.2h1.8l-.2-3.4c.1-.7.3-1.4.6-2-.6.1-1.2 0-1.6 0Z'/%3E%3C/svg%3E"); /* @kind other */
}

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" var(--display-opsz), "SOFT" var(--display-soft), "WONK" var(--display-wonk);
  color: var(--text-strong);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  margin: 0 0 0.4em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
strong { font-weight: var(--fw-bold); color: var(--text-strong); }
img { max-width: 100%; display: block; }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Layout helpers ---- */
.also-container { width: 100%; max-width: var(--content-size); margin-inline: auto; padding-inline: var(--gutter); }
.also-container--wide { max-width: var(--wide-size); }
.also-section { padding-block: var(--section-y); }

/* ---- Eyebrow label ---- */
.also-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* ---- Latte-leaf bullet list ---- */
.also-leaf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.also-leaf-list li { position: relative; padding-left: 1.9em; }
.also-leaf-list li::before {
  content: ""; position: absolute; left: 0; top: 0.15em;
  width: 1.25em; height: 1.25em;
  background: var(--accent);
  -webkit-mask: var(--leaf-mask) center / contain no-repeat;
          mask: var(--leaf-mask) center / contain no-repeat;
}

/* ---- Wavy section divider (signature) ---- */
.also-wave { display: block; width: 100%; height: clamp(40px, 5vw, 90px); }
.also-wave path { fill: currentColor; }

/* ---- Scroll-in reveal ----
   Content is ALWAYS fully opaque — the entrance only nudges transform, so even
   if the animation is paused (offscreen/unfocused preview) or JS never runs,
   content is guaranteed visible. JS adds `.is-in` to play the rise. */
.also-reveal { opacity: 1; }
.also-reveal.is-in { animation: also-rise var(--dur-reveal) var(--ease-out) both; }
@keyframes also-rise {
  from { transform: translateY(26px); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .also-reveal, .also-reveal.is-in { animation: none; transform: none; }
}

/* Gentle floating animation for product "pop" imagery */
@keyframes also-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.also-float { animation: also-float 6s var(--ease-in-out) infinite; }
@media (prefers-reduced-motion: reduce) { .also-float { animation: none; } }