/**
 * Design Tokens – Anna Oszajca
 * Source: Figma (reference viewport 1440px)
 *
 * Typography scale has two tiers:
 * - Global (base.css): H1 56px, H2 40px, H3 32px, H4 24px, body 18px
 * - Homepage (homepage.css): hero 96px, section bold 56px, section accent 72px
 *
 * Tokens --text-7xl (72px) and --text-8xl (96px) are used
 * exclusively in homepage.css via BEM classes. Do NOT assign to global H1-H6.
 */

:root {
    /* ─── Colors ─────────────────────────────────────────── */
    --color-primary:       #D93030;
    --color-primary-hover: #B82828;
    --color-primary-light: #fce8e8;

    --color-text-dark:  #0F0F0F;
    --color-text-light: #F2EFE9;
    --color-text-muted: #A4A4A4;

    --color-bg-light-1: #E7E9ED;
    --color-bg-light-2: #E9E9EB;
    --color-bg-warm:    #F0E9E6;
    --color-card-bg:    #FAFAFA;
    --color-footer-bg:  #020202;

    --color-white:    #ffffff;
    --color-gray-50:  #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e5e5e5;
    --color-gray-300: #d4d4d4;
    --color-gray-400: #a3a3a3;
    --color-gray-500: #737373;
    --color-gray-600: #525252;
    --color-gray-700: #404040;
    --color-gray-800: #262626;
    --color-gray-900: #171717;
    --color-black:    #000000;

    --color-success: #16a34a;
    --color-error:   #B82828;
    --color-warning: #f59e0b;
    --color-info:    #2563eb;

    /* ─── Typography ─────────────────────────────────────── */
    --font-heading: 'Libre Baskerville', Georgia, serif;
    --font-accent:  'Playfair Display', Georgia, serif;
    --font-body:    'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --text-xs:     0.6875rem;  /* 11px */
    --text-sm:     0.8125rem;  /* 13px */
    --text-base:   1.125rem;   /* 18px — body base */
    --text-lg:     1.25rem;    /* 20px */
    --text-xl:     1.375rem;   /* 22px */
    --text-2xl:    1.5rem;     /* 24px */
    --text-3xl:    2rem;       /* 32px */
    --text-4xl:    2.5rem;     /* 40px */
    --text-5xl:    3rem;       /* 48px */
    --text-5-5xl:  3.5rem;     /* 56px — global H1 / homepage section bold */
    --text-6xl:    3.75rem;    /* 60px */
    --text-7xl:    4.5rem;     /* 72px — homepage section accent (Arapey) */
    --text-8xl:    6rem;       /* 96px — homepage hero only */

    --leading-tight:  1.2;     /* large headings, single-line */
    --leading-snug:   1.35;    /* multi-line headings */
    --leading-normal: 1.6;     /* body text */
    --leading-relaxed: 1.7;    /* prose / long-form */
    --leading-loose:  1.8;     /* extra spacious */

    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-black:    900;

    /* ─── Spacing ────────────────────────────────────────── */
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */

    /* ─── Layout ─────────────────────────────────────────── */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1200px;
    --container-2xl: 1400px;
    --container-padding: var(--space-5); /* 20px — edge breathing room */

    --header-height: 96px;

    /* ─── Borders & Radius ───────────────────────────────── */
    --radius-sm:         4px;
    --radius-md:         8px;
    --radius-lg:         12px;
    --radius-xl:         16px;
    --radius-full:       9999px;
    --radius-asymmetric: 0;

    --border-light: 1px solid var(--color-gray-200);

    /* ─── Figma-specific ─────────────────────────────────── */
    --bullet-size: 12px;

    /* ─── Shadows ────────────────────────────────────────── */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* ─── Transitions ────────────────────────────────────── */
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --duration:  200ms;
    --duration-slow: 400ms;
}