/* ---------------------------------------------------------
   tokens.css — design tokens (CSS custom properties)
   Bup online — editorial × high-end cosme EC
   --------------------------------------------------------- */

:root {
  /* ---- Color: surface ---- */
  --bg: #FAF7F4;
  --bg-elevated: #FFFFFF;
  --bg-subtle: #F3EEE8;

  /* ---- Color: ink ---- */
  --ink: #1A1614;
  --ink-muted: #6B6560;
  --ink-soft: #9A938C;

  /* ---- Color: accent ---- */
  --accent: #C8A790;
  --accent-deep: #8C6D58;
  --blush: #F4DCD0;
  --cream: #FBF5EE;
  --champagne: #E5C9B5;
  --mocha: #A88770;
  --beige: #D8BFA8;
  --rose-gold: #D9B5A4;
  --pearl: #F4E8E0;
  --pink-point: #E89B9B;
  --pink-point-soft: #F6D6D6;

  /* ---- Color: structural ---- */
  --line: #E8E1D9;
  --line-strong: #D6CCC1;
  --success: #7B8F73;

  /* ---- Typography ---- */
  --font-en-serif: "Cormorant Garamond", "Times New Roman", serif;
  --font-jp-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  /* type scale */
  --text-xs:    0.75rem;     /* 12 */
  --text-sm:    0.8125rem;   /* 13 */
  --text-base:  1rem;        /* 16 */
  --text-md:    1.0625rem;   /* 17 */
  --text-lg:    1.25rem;     /* 20 */
  --text-xl:    1.5rem;      /* 24 */
  --text-2xl:   2rem;        /* 32 */
  --text-3xl:   2.75rem;     /* 44 */
  --text-display: clamp(3rem, 9vw, 7rem);  /* 48 - 112 */

  /* ---- Spacing (8pt grid) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;

  /* ---- Radius ---- */
  --radius-card: 2px;
  --radius-chip: 9999px;

  /* ---- Border ---- */
  --border-hair: 1px solid var(--line);
  --border-hair-strong: 1px solid var(--line-strong);

  /* ---- Shadow (subtle, editorial) ---- */
  --shadow-card: 0 1px 2px rgba(26, 22, 20, 0.04), 0 8px 24px rgba(26, 22, 20, 0.04);
  --shadow-card-hover: 0 2px 4px rgba(26, 22, 20, 0.06), 0 20px 48px rgba(26, 22, 20, 0.10);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 320ms;
  --dur-fast: 180ms;
  --dur-slow: 520ms;

  /* ---- Layout ---- */
  --container: 1280px;
  --container-narrow: 880px;
  --gutter-mobile: 20px;
  --gutter-tablet: 32px;
  --gutter-desktop: 48px;

  /* ---- Header height (used for sticky offsets) ---- */
  --header-h: 72px;
  --controls-h: 64px;
}