/* ------------------------------------------------------------------
   Bunna — design tokens (single source of truth for the whole UI).
   All values are CSS custom properties; components never hard-code
   colors, spacing, radii or shadows.

   Breakpoints reference (CSS variables cannot be used inside media
   queries — use these literal values in min-width queries):
     --bp-sm: 30rem (480px)
     --bp-md: 48rem (768px)
     --bp-lg: 64rem (1024px)
     --bp-xl: 80rem (1280px)
   ------------------------------------------------------------------ */

:root {
    /* Colors — coffee palette */
    --color-bg: #faf6f1;
    --color-surface: #ffffff;
    --color-surface-alt: #f3ebe2;
    --color-primary: #6f4e37;
    --color-primary-dark: #4b3425;
    --color-primary-soft: #efe3d8;
    --color-accent: #c8a27c;
    --color-text: #2b211a;
    --color-text-muted: #7a6a5d;
    --color-border: #e7ddd2;

    /* Feedback */
    --color-success: #2e7d4f;
    --color-success-bg: #e7f5ec;
    --color-danger: #b3422e;
    --color-danger-bg: #fbeae6;
    --color-focus: #1d6fd1;

    /* Overlay & dark surfaces (footer, mobile nav backdrop) */
    --color-overlay: rgba(43, 33, 26, 0.55);
    --color-footer-bg: #3c2a1e;
    --color-on-dark: #f6efe8;
    --color-on-dark-muted: #cbb8a7;

    /* Typography */
    --font-body: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-display: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
    --text-xs: 0.8rem;
    --text-sm: 0.9rem;
    --text-md: 1rem;
    --text-lg: 1.15rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 2.5rem;
    --leading-body: 1.8;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4rem;

    /* Radius */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-full: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(43, 33, 26, 0.08);
    --shadow-md: 0 6px 18px rgba(43, 33, 26, 0.10);
    --shadow-lg: 0 12px 32px rgba(43, 33, 26, 0.16);

    /* Layout & motion */
    --container-max: 70rem;
    --header-height: 4rem;
    --transition: 180ms ease;
    --transition-reveal: 550ms ease-out;
}