/*
 * tokens.css — Design Tokens
 * ─────────────────────────────────────────────────────────────────
 * This file is the single source of truth for all design values.
 * It is the "seam" for swapping in a UI kit:
 *
 *   • Tailwind: map these to tailwind.config.js theme values
 *   • Bootstrap: override Bootstrap's CSS variables here
 *   • Any system: one file to update, everything else follows
 *
 * All other CSS files reference these variables — never hardcode
 * a color, font, or spacing value outside of this file.
 * ─────────────────────────────────────────────────────────────────
 */

:root {

  /* ── Color Palette ─────────────────────────────────────────── */
  --clr-canvas:      #faf9f6;   /* page background          */
  --clr-surface:     #ffffff;   /* nav, cards, panels       */
  --clr-border:      #e8e2d8;   /* subtle dividers          */
  --clr-border-dark: #cfc8bc;   /* stronger borders         */

  --clr-ink:         #1c1814;   /* primary text             */
  --clr-ink-2:       #5c5650;   /* secondary text           */
  --clr-ink-3:       #9c9690;   /* muted / placeholders     */

  --clr-accent:      #c0501c;   /* primary accent           */
  --clr-accent-dk:   #9a3e14;   /* accent hover / pressed   */
  --clr-accent-lt:   #f5ede7;   /* accent tint              */

  --clr-error:       #b3261e;   /* form/validation errors   */
  --clr-on-accent:   #ffffff;   /* text/icons on accent bg  */

  /* ── Typography ────────────────────────────────────────────── */
  --font-display:    'Cormorant Garamond', Georgia, serif;
  --font-ui:         'Outfit', system-ui, sans-serif;

  --text-xs:         0.6875rem;  /* 11px */
  --text-sm:         0.8125rem;  /* 13px */
  --text-base:       1rem;       /* 16px */
  --text-md:         1.125rem;   /* 18px */
  --text-lg:         1.375rem;   /* 22px */
  --text-xl:         1.75rem;    /* 28px */
  --text-2xl:        2.5rem;     /* 40px */
  --text-3xl:        3.75rem;    /* 60px */

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semi:     600;

  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.14em;

  /* ── Spacing Scale ──────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* ── Radii ──────────────────────────────────────────────────── */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* ── Shadows ────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 4px rgba(28, 24, 20, .07);
  --shadow-md:  0 4px 20px rgba(28, 24, 20, .10);
  --shadow-lg:  0 16px 48px rgba(28, 24, 20, .13);

  /* ── Motion ─────────────────────────────────────────────────── */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast:      140ms;
  --dur-mid:       240ms;
  --dur-slow:      400ms;

  /* ── Layout ─────────────────────────────────────────────────── */
  --max-width:     1240px;
  --gutter:        clamp(var(--space-6), 4vw, var(--space-10));
  --section-gap:   clamp(var(--space-8), 8vw, var(--space-16));

  /* ── Nav ────────────────────────────────────────────────────── */
  --nav-height:    72px;
  --nav-bg:        var(--clr-surface);
  --nav-border:    var(--clr-border);
}