/**
 * Design Tokens — CSS Custom Properties
 * Tafaoulat By Yalmos.ma
 *
 * All design decisions for the theme are expressed here as CSS variables.
 * Visual identity: Moroccan flag colors (red #C1272D, green #006233, gold #C9A961).
 */

:root {

    /* =========================================================
       COLORS — Primary (Moroccan flag red)
       ========================================================= */
    --color-primary:       #C1272D;
    --color-primary-dark:  #9A1F24;
    --color-primary-light: #E85055;

    /* Colors — Secondary (Moroccan flag green) */
    --color-secondary:       #006233;
    --color-secondary-dark:  #004D28;
    --color-secondary-light: #2E8B54;

    /* Colors — Accent (gold) */
    --color-accent:       #C9A961;
    --color-accent-dark:  #A88A47;
    --color-accent-light: #E0C989;

    /* =========================================================
       COLORS — Neutrals
       ========================================================= */
    --color-bg:           #FAFAFA;
    --color-surface:      #FFFFFF;
    --color-surface-alt:  #F5F5F5;
    --color-border:       #E5E5E5;
    --color-border-strong:#CCCCCC;
    --color-text:         #1A1A1A;
    --color-text-muted:   #666666;
    --color-text-inverse: #FFFFFF;
    --color-link:         #C1272D;
    --color-link-hover:   #9A1F24;

    /* =========================================================
       COLORS — Status
       ========================================================= */
    --color-live:    #E30613;
    --color-ended:   #666666;
    --color-warning: #D97706;
    --color-success: #059669;

    /* =========================================================
       TYPOGRAPHY — Font families
       ========================================================= */
    --font-heading: 'Tajawal', 'Cairo', system-ui, -apple-system, sans-serif;
    --font-body:    'Cairo', 'Tajawal', system-ui, -apple-system, sans-serif;
    --font-menu:    'Cairo', system-ui, sans-serif;

    /* Font size scale — fluid via clamp() */
    --fs-xs:   clamp(0.75rem, 0.75vw + 0.5rem, 0.8125rem);
    --fs-sm:   clamp(0.8125rem, 1vw + 0.5rem, 0.875rem);
    --fs-base: clamp(1rem, 1vw + 0.5rem, 1.125rem);
    --fs-lg:   clamp(1.125rem, 1.25vw + 0.5rem, 1.25rem);
    --fs-xl:   clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
    --fs-2xl:  clamp(1.5rem, 2vw + 0.5rem, 2rem);
    --fs-3xl:  clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
    --fs-4xl:  clamp(2.25rem, 4vw + 0.5rem, 3.5rem);

    /* Line heights */
    --lh-tight:   1.2;
    --lh-normal:  1.5;
    --lh-relaxed: 1.8;

    /* Font weights */
    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    900;

    /* =========================================================
       SPACING — 8px grid
       ========================================================= */
    --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;

    /* =========================================================
       LAYOUT
       ========================================================= */
    --container-max:     1200px;
    --container-padding: clamp(1rem, 2vw, 2rem);
    --sidebar-width:     300px;
    --grid-gap:          30px;

    /* =========================================================
       BORDERS & RADIUS
       ========================================================= */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-full: 9999px;
    --border-width: 1px;

    /* =========================================================
       SHADOWS
       ========================================================= */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-hero: 0 -2px 5px rgba(0, 0, 0, 0.1);

    /* =========================================================
       Z-INDEX SCALE
       ========================================================= */
    --z-base:         1;
    --z-sticky:       100;
    --z-header:       200;
    --z-modal:        500;
    --z-toast:        900;
    --z-mobile-ad:    999;
    --z-sticky-video: 1000;

    /* =========================================================
       TRANSITIONS
       ========================================================= */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
}