/* ============================================================
   Koki Hair Braiding — Design tokens
   Concept: "Every braid tells your story."
   Editorial beauty direction — obsidian / ivory / burnt clay
   ============================================================ */

:root {
  /* Palette */
  --obsidian: #15120f;
  --obsidian-soft: #1e1a16;
  --ivory: #f5efe6;
  --ivory-deep: #ede4d5;
  --clay: #a95336;
  --clay-dark: #8c4229;
  --gold: #b99762;
  --cocoa: #4a3028;

  /* Semantic */
  --bg-page: var(--ivory);
  --text-strong: var(--obsidian);
  --text-body: #3d342c;
  --text-muted: #7a6d5f;
  --text-on-dark: var(--ivory);
  --text-on-dark-muted: rgba(245, 239, 230, 0.64);
  --accent: var(--clay);
  --accent-hover: var(--clay-dark);
  --line: rgba(21, 18, 15, 0.14);
  --line-on-dark: rgba(245, 239, 230, 0.16);

  /* Typography */
  --font-display: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --font-body: "Manrope", "Segoe UI", -apple-system, sans-serif;

  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.88rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.25vw, 1.06rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3.1rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.6vw, 4.6rem);
  --step-5: clamp(3.2rem, 2.2rem + 5.2vw, 6.2rem);

  /* Spacing & layout */
  --space-xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.65rem);
  --space-s: clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  --space-m: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  --space-l: clamp(2.6rem, 2.2rem + 2vw, 3.8rem);
  --space-xl: clamp(4rem, 3.2rem + 4vw, 6.5rem);
  --space-2xl: clamp(5.5rem, 4.2rem + 6.5vw, 9.5rem);

  --container: 74rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Details */
  --radius-s: 4px;
  --radius-m: 10px;
  --shadow-photo: 0 24px 60px -24px rgba(21, 18, 15, 0.45);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.55s;

  --header-h: 4.75rem;
}