/**
 * Design tokens for Uncle Jo Living.
 *
 * COLOR: the palette is the brand's six supplied colors and nothing else —
 * Espresso #2C211A, Copper #D16939, Cream #F5EDE2, Vitality Olive #757046,
 * Earth Brown #724C32, Soft Tan #D4B08A. Every other color token below is a
 * tint/shade mixed from one of those six (or a neutral white), so the whole
 * theme resolves to one harmonized family. Add new colors by deriving them
 * here, never by hardcoding a hex in a component.
 *
 * Source spec: docs/design-reference/ (Header/Footer/Home/About/Contact/
 * Learn/Product/Cart/Account/Waitlist .dc.html mockups).
 */

:root {
  /* ── Brand core — the six supplied colors ─────────────────────── */
  --brand-espresso: #2c211a;
  --brand-copper: #d16939;
  --brand-cream: #f5ede2;
  --brand-olive: #757046;
  --brand-earth: #724c32;
  --brand-tan: #d4b08a;

  /* ── Ink / body text — espresso lifted toward the cream page ──── */
  --color-ink: var(--brand-espresso);
  --color-body: #3a2d24;
  --color-text-secondary: #574539;
  --color-text-tertiary: #6b5849;
  /* Metadata grey: 4.9:1 on cream, 4.4:1 on the surface tone — the
     darkest point that still reads as "secondary" next to body ink. */
  --color-text-muted: #74604d;

  /* ── Copper — the brand action color ──────────────────────────────
     Brand copper #D16939 is a mid-tone: white on it is only 3.6:1, which
     fails AA for the small uppercase labels this theme puts on buttons
     and chips. So copper-600 is reserved for large type, rules, icons and
     decorative fills, and copper-700 (5.9:1 on white, 5.1:1 on cream) is
     the shade that carries small text either way — same hue, enough
     contrast. Never swap the two. */
  --color-ember-200: #f3c9b3;
  --color-ember-500: #dd8055;
  --color-ember-600: var(--brand-copper);
  --color-ember-700: #a34a24;
  --color-ember-800: #83391b;
  --color-badge-bg: #f7e3d3;

  /* Say which job you need, and the right shade follows:
     --color-accent      decorative — rules, borders, icons, large display
     --color-accent-text small text in copper on a light surface
     --color-accent-fill a copper fill that carries small light text */
  --color-accent: var(--color-ember-600);
  --color-accent-text: var(--color-ember-700);
  --color-accent-fill: var(--color-ember-700);
  /* Dark-surface counterparts. utilities.css re-points --color-accent-text
     to this inside every dark/ember/olive surface, so a component nested
     there gets a legible copper without knowing where it sits. */
  --color-accent-on-dark: var(--color-ember-500);
  --color-accent-hover: var(--color-ember-800);

  /* ── Vitality olive — natural / ingredient / positive accents ─── */
  --color-olive-300: #cfd0bc;
  --color-olive-500: #9d9c78;
  --color-olive-600: var(--brand-olive);
  --color-olive-700: #545031;
  --color-olive-tint: #e7e5d4;

  /* ── Earth brown — grounded secondary, categories, dark accents ─ */
  --color-earth-600: var(--brand-earth);
  --color-earth-700: #5a3b26;
  --color-earth-tint: #ece0d4;

  /* ── Soft tan — decorative panels, dividers, image placeholders ─ */
  --color-tan-300: #e2ccb2;
  --color-tan-400: var(--brand-tan);
  --color-tan-500: #c09a70;

  /* Legacy alias: the hero / waitlist offer panel reads as "apricot"
     throughout the components; it is soft tan in the brand palette. */
  --color-apricot: var(--brand-tan);
  --color-apricot-label: var(--color-earth-700);
  --color-apricot-body: var(--brand-espresso);

  /* Legacy alias: the one-off "slate" accent is vitality olive now, so
     the palette stays inside the brand family. */
  --color-slate: var(--color-olive-600);

  --color-success-bg: var(--color-olive-tint);
  --color-success-text: var(--color-olive-700);
  --color-shipped-bg: var(--color-earth-tint);
  --color-shipped-text: var(--color-earth-600);

  /* ── Surfaces — a warm ladder from raised card to page to wash ── */
  --color-page: var(--brand-cream);
  --color-surface: #ede1d1;
  --color-surface-soft: #f9f3ea;
  --color-surface-raised: #fffcf7;
  --color-dark: var(--brand-espresso);
  --color-dark-raised: #3b2d23;
  --color-white: #fff;

  /* ── Borders — tan at decreasing lightness ────────────────────── */
  --color-border: #e2d3bf;
  --color-border-header: #ded0ba;
  --color-border-input: #cbb597;
  --color-border-muted: #d9c8b1;
  --color-border-social: #c3ab8d;
  --color-border-dark: rgb(212 176 138 / .22);

  --color-text: var(--color-body);
  --color-action: var(--color-ember-600);
  --color-action-hover: var(--color-ember-800);
  --color-link: var(--color-ember-700);
  --color-link-hover: var(--color-ember-800);
  /* Espresso reads at ~12:1 on every light surface in the palette; dark
     and ember surfaces flip it to tan/ink in utilities.css. */
  --color-focus: var(--brand-espresso);
  --color-focus-dark: var(--brand-tan);
  --color-danger-600: #b3261e;

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Work Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale — desktop values are the mockups' literal px sizes; the
     fluid clamp() extends them down for narrower viewports, matching the
     project's existing fluid-type architecture (the mockups themselves
     are fixed-width previews with no responsive spec). */
  --text-display-xl: clamp(2.75rem, 5.4vw + 1rem, 4.5rem);
  --text-h1: clamp(2.25rem, 3.6vw + 1rem, 3.75rem);
  --text-h2-lg: clamp(1.85rem, 2.6vw + 1rem, 2.875rem);
  --text-h2: clamp(1.7rem, 2.2vw + 1rem, 2.625rem);
  --text-h3: clamp(1.4rem, 1vw + 1.1rem, 1.5rem);
  --text-h4: clamp(1.2rem, .5vw + 1.05rem, 1.3125rem);
  --text-lead: clamp(1.0625rem, .3vw + 1rem, 1.1875rem);
  --text-body: 1rem;
  --text-small: .9375rem;
  --text-micro: .8125rem;
  --text-label: .75rem;

  --leading-display: 1.04;
  --leading-body: 1.65;
  --tracking-label: .18em;
  --tracking-button: .08em;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-30: 7.5rem;
  --space-36: 9rem;

  /* Content max-widths — precise pixel values from docs/design-reference,
     not a fluid guess: 2xl/xl/lg/md/sm are whole-page section widths;
     text-lg/md/sm are narrower centered copy blocks. */
  --container-2xl: 85rem;     /* 1360px — header/footer/home sections */
  --container-xl: 80rem;      /* 1280px — product */
  --container-lg: 75rem;      /* 1200px — cart/account, about two-ups */
  --container-md: 71.25rem;   /* 1140px — waitlist/contact two-col bodies */
  --container-sm: 67.5rem;    /* 1080px — how-it-works */
  --container-text-lg: 53.75rem; /* 860px — about hero */
  --container-text-md: 51.25rem; /* 820px — contact/learn hero, problem-state */
  --container-text-sm: 48.75rem; /* 780px — about mission */
  /* Article reading column — ~68-72 characters at the article body size. */
  --container-read: 45rem;       /* 720px — single-post measure */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --grid-gap: clamp(1.25rem, 1.2vw + 1rem, 1.875rem);
  --grid-gap-lg: clamp(2.5rem, 2vw + 2rem, 3.5rem);

  /* The reference design is almost entirely square-cornered — radius is
     reserved for circular badges/avatars (pill) only. */
  --radius-1: 0px;
  --radius-2: 0px;
  --radius-3: 0px;
  --radius-pill: 999px;

  --border-1: 1px solid var(--color-border);
  --shadow-sm: 0 1px 2px rgb(44 33 26 / .08);
  --shadow-md: 0 12px 30px rgb(44 33 26 / .14);
  --shadow-lg: 0 22px 60px rgb(44 33 26 / .18);
  --shadow-drawer: -18px 0 55px rgb(44 33 26 / .20);

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-panel: 420ms;
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --ease-emphasized: cubic-bezier(.2, .9, .2, 1);

  /* --header-height is what the sticky offsets are measured against
     (.c-learn-filters' top, the product gallery's sticky top, and the
     :target / heading scroll-margins). The header is genuinely taller
     on a phone than on desktop — two stacked rows at ~114px versus
     ~76px — so the token moves with it in the media query below;
     leaving it at the desktop value parked anchor targets and the
     sticky filter bar underneath the header. */
  --announcement-height: 2.75rem;
  --header-height: 4.75rem;
  --header-height-compact: 4.25rem;
  --z-header: 100;
  --z-overlay: 400;
  --z-drawer: 500;
  --z-toast: 600;
}

@media (max-width: 47.9375rem) {
  :root {
    --announcement-height: 3.5rem;
    --header-height: 7.125rem;
    --header-height-compact: 6.5rem;
  }
}