/* =========================================================
   SAENGÉ — Design Tokens
   Light-luxury K-beauty editorial. Cherry-blossom palette.
   ========================================================= */

:root {
  /* ---- Color: surfaces ---- */
  --color-bg: oklch(98.5% 0.008 20);
  --color-surface: oklch(99.2% 0.004 20);
  --color-surface-2: oklch(96.5% 0.018 18);
  --color-blush: oklch(94% 0.035 14);
  --color-blush-deep: oklch(89% 0.06 12);

  /* ---- Color: ink ---- */
  --color-text: oklch(28% 0.035 25);
  --color-text-soft: oklch(46% 0.03 22);
  --color-text-muted: oklch(62% 0.022 20);
  --color-on-dark: oklch(97% 0.01 30);

  /* ---- Color: brand accents ---- */
  --color-rose: oklch(72% 0.13 18);
  --color-rose-deep: oklch(60% 0.15 16);
  --color-gold: oklch(78% 0.085 70);
  --color-gold-deep: oklch(66% 0.1 65);
  --color-petal: oklch(86% 0.07 6);

  /* ---- Gradients ---- */
  --grad-bloom: radial-gradient(
      120% 90% at 80% 0%,
      oklch(92% 0.06 12) 0%,
      oklch(96% 0.03 18) 45%,
      var(--color-bg) 100%
    );
  --grad-petal: linear-gradient(
      135deg,
      oklch(88% 0.07 8),
      oklch(83% 0.1 16)
    );
  --grad-gold: linear-gradient(
      150deg,
      oklch(85% 0.07 75),
      oklch(70% 0.11 60)
    );
  --grad-serum: linear-gradient(
      180deg,
      oklch(90% 0.05 20) 0%,
      oklch(80% 0.12 18) 100%
    );

  /* ---- Typography ---- */
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --text-hero: clamp(2.4rem, 0.9rem + 6vw, 7rem);

  --leading-tight: 1.04;
  --leading-snug: 1.18;
  --leading-normal: 1.55;
  --tracking-tight: -0.03em;
  --tracking-wide: 0.16em;

  /* ---- Spacing ---- */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --maxw: 1280px;
  --maxw-prose: 60ch;

  /* ---- Radii ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-xs: 0 1px 2px oklch(40% 0.05 20 / 0.06);
  --shadow-sm: 0 4px 14px oklch(40% 0.06 18 / 0.08);
  --shadow-md: 0 14px 40px oklch(40% 0.08 16 / 0.12);
  --shadow-lg: 0 30px 70px oklch(38% 0.1 14 / 0.18);
  --shadow-gold: 0 10px 30px oklch(70% 0.12 60 / 0.28);

  /* ---- Motion ---- */
  --duration-fast: 160ms;
  --duration-normal: 320ms;
  --duration-slow: 620ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Layout helpers ---- */
  --header-h: 76px;
  --z-header: 100;
  --z-promo: 90;
  --z-cart: 200;
}