/* SkinFusion v2 — Design Tokens · Recipe B "The Effervescence"
   Brief: ~/.claude/web-build/sessions/2026-06-09-skinfusion-v2/brief.md */

:root {
  /* == Color: evolved earth-lux, duotone + one accent ====================== */
  --bg: #FAF6EF;                 /* warm porcelain cream */
  --bg-elevated: #FFFDF8;
  --bg-tint: #F3ECE0;            /* section alternation step */
  --ink-bg: #221B14;             /* deep espresso */
  --fg: #221B14;
  --fg-secondary: #5C5042;
  --fg-muted: #877A68;
  --border: #E2D7C5;
  --accent: #8B6F47;             /* warm bronze — THE accent */
  --accent-hover: #6F5538;
  --accent-fg: #FAF6EF;
  --gold-stamp: #C9A961;         /* value stamps only, max 1 per screen */
  /* ink-mode pairs */
  --ink-fg: #FAF6EF;
  --ink-fg-muted: #C9BCA8;
  --ink-border: rgba(250, 246, 239, 0.14);
  --ink-accent: #C9A961;
  /* the bubble motif renders translucent, never a palette color */
  --bubble: rgba(139, 111, 71, 0.22);
  --bubble-ink: rgba(255, 248, 230, 0.34);
  --bubble-gold: rgba(214, 183, 121, 0.55);
  /* semantic */
  --success: #5E7A52;
  --danger: #9A4A3A;

  /* == Type ================================================================ */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;

  --text-xs: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --text-sm: clamp(0.85rem, 0.82rem + 0.2vw, 0.92rem);
  --text-base: clamp(1rem, 0.96rem + 0.25vw, 1.06rem);
  --text-lg: clamp(1.12rem, 1.05rem + 0.4vw, 1.25rem);
  --text-xl: clamp(1.3rem, 1.18rem + 0.6vw, 1.55rem);
  --text-2xl: clamp(1.6rem, 1.4rem + 0.9vw, 2rem);
  --text-3xl: clamp(2rem, 1.7rem + 1.4vw, 2.7rem);
  --text-4xl: clamp(2.6rem, 2.1rem + 2.2vw, 3.8rem);
  --text-display: clamp(3.1rem, 2rem + 5.6vw, 7rem);

  /* == Spacing (4px grid) ================================================== */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px;  --s-10: 40px; --s-12: 48px;
  --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; --s-40: 160px;

  /* == Radii: sharp-corner brand discipline ================================ */
  --radius-sm: 0px;
  --radius-md: 2px;
  --radius-lg: 4px;

  /* == Elevation (two-shadow ramp, levels 1-3 only) ======================== */
  --elev-1: 0 1px 2px rgba(34, 27, 20, 0.10), 0 1px 3px 1px rgba(34, 27, 20, 0.05);
  --elev-2: 0 1px 2px rgba(34, 27, 20, 0.12), 0 2px 6px 2px rgba(34, 27, 20, 0.06);
  --elev-3: 0 1px 3px rgba(34, 27, 20, 0.14), 0 4px 8px 3px rgba(34, 27, 20, 0.07);

  /* == Motion (two easings site-wide, M3 tokens) =========================== */
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);   /* emphasized decelerate — entrances */
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);    /* emphasized accelerate — exits */
  --dur-fast: 150ms;
  --dur-normal: 400ms;
  --dur-slow: 600ms;

  /* layout */
  --container: 1280px;
  --container-text: 680px;
}