/*
 * Brand design tokens extracted from chi-chi-mirror/_nuxt/entry.DaEl3vWv.css
 * on 12 Aug 2026.
 *
 * Interior static pages do not load entry.css (Nuxt entry / global chrome).
 * These custom property names must stay identical so reused tale-* markup
 * resolves the same colours and type stacks.
 *
 * Responsive utilities (.-is-desktop / .-is-mobile) and footer/outro pin
 * resets live in interior.css — load that after default.w_WESe8R.css.
 *
 * If brand tokens change, update both this file and entry.DaEl3vWv.css — or,
 * cleaner long-term without touching the homepage Nuxt build: have the local
 * mirror serve rewrite inject a <link> to this tokens.css (or @import it)
 * into index.html and drop the duplicated :root block from a patched copy of
 * entry.css. Until then, treat this file as the hand-maintained twin.
 */

:root {
  --grid-gutter: 16px;
  --grid-margin: 16px;
  --grid-gap: 16px;
  --grid-max-width: 1920px;

  /*
   * Horizontal inset for interior page prose columns.
   * Use via var(--content-inset-inline) or .content-inset — not literal 20px/40px.
   */
  --content-inset-inline: 20px;
  --content-max-width: 1640px;
}

@media (min-width: 48em) {
  :root {
    --grid-margin: 20px;
  }
}

@media (min-width: 64em) {
  :root {
    --grid-margin: 24px;
    --content-inset-inline: 40px;
  }
}

@media (min-width: 90em) {
  :root {
    --grid-gutter: clamp(16px, 1.1111111111vw, 19.1111111111px);
    --grid-margin: clamp(24px, 1.6666666667vw, 28.6666666667px);
  }
}

:root {
  --font-mono: "IBM Plex Mono", monospace;
  --font-sans: "Hanken Grotesk", sans-serif;
  --font-mosaic: "Palette Mosaic", system-ui;
  --font-base: var(--font-sans);

  --color-white: #fff;
  --color-white-30: #ffffff4d;
  --color-black: #030303;
  --color-black-70: #030303b3;
  --color-black-50: #03030380;
  --color-black-30: #0303034d;
  --color-beige: #f4f3eb;
  --color-indaco: #b1b3c3;
  --color-purple: #6a15ff;
  --color-purple-30: #6a15ff4d;
  --color-pink: #ef2b5c;
  --color-primary: var(--color-black);
  --color-bg: var(--color-beige);
  --color-error: #f7323f;
  --color-success: #6ae66f;
  --color-warning: #feee38;
  --color-placeholders: var(--color-black-70);

  --timing-fast: 0.25s;
  --timing-default: 0.4s;
  --timing-mid: 0.5s;
  --timing-slow: 0.75s;
  --timing-slowest: 1.2s;

  --easing-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --easing-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --easing-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-default: 0 4px 8px var(--color-black-30);
  --shadow-expanded: 0 0 20px var(--color-black-30);
  --shadow-top: 0 -3px 8px var(--color-black-30);

  --scale-hover: scale(1.05);

  /*
   * Satoshi tracking — ALL --font-sans / Satoshi text: body copy AND
   * subheads (tasting titles, spec values, recipe names, legal headings,
   * UI chrome). Figma -3% → CSS -0.03em.
   *
   * Not Palette Mosaic chapter titles — those use --display-letter-spacing.
   */
  --sans-letter-spacing: -0.03em;
  --body-letter-spacing: var(--sans-letter-spacing);
  --body-letter-spacing-crushed: var(--sans-letter-spacing);
  --body-line-height: 1.44;
  --body-line-height-sm: 1.42;
  --body-line-height-prose: 1.55;

  /*
   * Display / mosaic chapter titles — Palette Mosaic at 80–286px.
   * Template px crush (~-0.22em) caused overlap; one em token scales at all sizes.
   */
  --display-letter-spacing: -0.05em;

  /*
   * Type weight — bold (600+) reserved for main page h1 and section display titles
   * (e.g. .process-numbers__title). Spec card values, body copy, card content,
   * eyebrows, UI chrome use font-weight 400. Mosaic chapter titles
   * (.chichi-chapter-title) are weight 400 by design.
   */
  --type-weight-display: 400;
  --type-weight-body: 400;

  /*
   * Interior sticky tale-cover hero photos — default anchor matches homepage
   * ICE CREAM / C'est Chic chapters (center 42%). Override per cover via
   * --chichi-cover-object-position on the .tale-cover wrapper when needed.
   */
  --chichi-cover-object-position: center 42%;
}

/*
 * From entry.css — interior pages do not load entry.
 * Tokens alone only define --color-bg; without these resets, UA body margin
 * and content-box + width:100% + horizontal padding overflow the viewport.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  background-color: var(--color-bg);
  min-height: 100%;
  width: 100%;
}

body {
  margin: 0;
  color: var(--color-black);
}