/* ============================================================
   ChoHeel — Design Tokens
   Direction: Luxury × Editorial. Warm ivory canvas, espresso
   ink, single oxblood accent. Bodoni Moda display / Karla body.
   ============================================================ */

:root {
  /* --- Color --- */
  --color-bg: #f4efe6;            /* warm ivory canvas */
  --color-surface: #ece4d3;       /* slightly deeper ivory for panels */
  --color-ink: #211a13;           /* warm off-black (espresso) */
  --color-muted: #6e6356;         /* secondary text, 4.6:1 on ivory */
  --color-accent: #a11d24;        /* oxblood — the one accent */
  --color-accent-deep: #7c151b;   /* pressed / hover accent */
  --color-dark: #1c1610;          /* dark section canvas */
  --color-dark-text: #f4efe6;     /* text on dark */
  --color-dark-muted: #b3a68f;    /* secondary text on dark */
  --color-border: rgba(33, 26, 19, 0.16);
  --color-border-strong: rgba(33, 26, 19, 0.55);
  --color-dark-border: rgba(244, 239, 230, 0.18);

  /* --- Type --- */
  --font-display: "Bodoni Moda", "Times New Roman", serif;
  --font-body: "Karla", "Helvetica Neue", sans-serif;

  --text-xs: 0.72rem;     /* eyebrows, legal */
  --text-sm: 0.9rem;      /* nav, captions */
  --text-base: 1.0625rem; /* body copy */
  --text-lg: 1.25rem;     /* lead paragraphs */
  --text-h3: clamp(1.5rem, 2.6vw, 2.25rem);
  --text-h2: clamp(2.25rem, 4.5vw, 3.75rem);
  --text-h1: clamp(3.4rem, 9.5vw, 8rem);     /* hero display */
  --text-giant: clamp(4rem, 16vw, 15rem);    /* outline wordmark */

  --track-display: -0.025em;
  --track-eyebrow: 0.22em;

  /* --- Space --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 144px;
  --gutter: clamp(20px, 4vw, 64px);

  /* --- Radius / shadow --- */
  --radius-sm: 3px;
  --radius-md: 8px;
  --shadow-1: 0 2px 8px rgba(33, 26, 19, 0.10);
  --shadow-2: 0 8px 28px rgba(33, 26, 19, 0.14);
  --shadow-3: 0 24px 64px rgba(33, 26, 19, 0.20);

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
}