/* ─────────────────────────────────────────────────────────────────
   tokens.css — Design tokens for HoneyWay.
   CSS custom properties that drive color, type, spacing, and elevation.
   Change these to retheme the site.
   ───────────────────────────────────────────────────────────────── */

:root {
    /* ── Color ── */
    --color-honey:      #d4a04a;
    --color-honey-dark: #8b6420;
    --color-cream:      #faf6ee;
    --color-ink:        #1a1a1a;
    --color-mute:       #6b6b6b;
    --color-line:       #e8e2d4;
    --color-bg:         #ffffff;

    /* Semantic aliases (use these in component CSS so retheming is easy) */
    --color-text:       var(--color-ink);
    --color-text-mute:  var(--color-mute);
    --color-link:       var(--color-honey-dark);
    --color-link-hover: var(--color-honey);
    --color-accent:     var(--color-honey);
    --color-surface:    var(--color-bg);
    --color-surface-2:  var(--color-cream);
    --color-border:     var(--color-line);

    /* ── Typography ── */
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;

    /* ── Layout ── */
    --container:    1200px;
    --container-sm: 720px;
    --container-md: 960px;
    --container-lg: 1200px;
    --header-h:     88px;

    /* ── Spacing scale ── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* ── Radius ── */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* ── Shadow ── */
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
    --shadow-pop:  0 8px 32px rgba(0, 0, 0, 0.12);

    /* ── Motion ── */
    --ease:    cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 0.15s;
    --dur-mid:  0.25s;
}