/**
 * Chapati Box — design tokens (global)
 * Single source of truth for color, type, space, radius, and shadow.
 */

:root {
    /* —— Color —— */
    --primary-yellow: rgb(201, 150, 12);
    --primary-yellow-bright: #f4be1a;
    --primary-yellow-hover: #e0ab0f;
    --primary-yellow-soft: rgba(201, 150, 12, 0.14);
    --primary-yellow-softer: rgba(244, 190, 26, 0.18);
    --primary-yellow-shadow: rgba(201, 150, 12, 0.35);

    --primary-black: #111111;
    --primary-black-hover: #2a2a2a;

    --warm-bg: #faf8f3;
    --warm-bg-alt: #f1e6d0;
    --warm-bg-white: #ffffff;
    --warm-bg-hero: #fafafa;

    --border-light: #e5e5e5;
    --border-light-soft: rgba(231, 229, 228, 0.9);

    --text-dark: #111111;
    --text-muted: rgba(41, 37, 36, 0.62);
    --text-muted-strong: #4a4a4a;
    --text-muted-light: rgba(41, 37, 36, 0.55);

    --surface-card: #ffffff;
    --surface-overlay: rgba(255, 255, 255, 0.92);

    /* —— Spacing (8px scale) —— */
    --space-1: 0.5rem;   /* 8px */
    --space-2: 0.75rem;  /* 12px */
    --space-3: 1rem;     /* 16px */
    --space-4: 1.5rem;   /* 24px */
    --space-5: 2rem;     /* 32px */
    --space-6: 3rem;     /* 48px */
    --space-7: 4rem;     /* 64px */
    --space-8: 6rem;     /* 96px */

    --section-py: var(--space-7);
    --section-py-lg: var(--space-8);
    --section-gap: var(--space-4);
    --card-padding: var(--space-4);
    --card-padding-lg: 1.75rem;

    /* —— Radius —— */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    /* —— Shadow —— */
    --shadow-sm: 0 2px 8px rgba(17, 17, 17, 0.04);
    --shadow-md: 0 8px 24px rgba(17, 17, 17, 0.06);
    --shadow-lg: 0 16px 40px rgba(17, 17, 17, 0.08);
    --shadow-lift: 0 20px 48px rgba(17, 17, 17, 0.1);
    --shadow-card-hover: 0 16px 40px rgba(17, 17, 17, 0.08);
    --shadow-yellow: 0 8px 22px var(--primary-yellow-shadow);
    --shadow-yellow-soft: 0 12px 36px rgba(201, 150, 12, 0.15);

    /* —— Typography —— */
    --font-display: 'Poppins', 'Montserrat', system-ui, sans-serif;
    --font-sans: 'Inter', 'Manrope', system-ui, sans-serif;

    --text-kicker: 0.6875rem;
    --text-h1: clamp(2.15rem, 4.2vw, 3.5rem);
    --text-h2: clamp(1.5rem, 2.8vw, 2.25rem);
    --text-h3: 1.125rem;
    --text-body: 1rem;
    --text-body-sm: 0.9375rem;
    --text-caption: 0.8125rem;
    --text-small: 0.75rem;

    --leading-tight: 1.12;
    --leading-snug: 1.35;
    --leading-normal: 1.55;
    --leading-relaxed: 1.65;

    --tracking-kicker: 0.16em;

    /* —— Motion —— */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-smooth: 0.28s ease;

    /* —— Legacy aliases (marketing.css) —— */
    --cb-yellow: var(--primary-yellow-bright);
    --cb-section-kicker: var(--primary-yellow);
    --cb-ink: var(--primary-black);
    --cb-cream: var(--warm-bg);
    --cb-beige: var(--warm-bg-alt);
    --cb-line: var(--border-light);
    --cb-radius-btn: var(--radius-md);
    --cb-radius-card: var(--radius-lg);
    --cb-font-display: var(--font-display);
    --cb-shadow-lift: var(--shadow-lift);
}