/**
 * Design Tokens - Style Notion/Discord
 * Variables CSS pour le système de design
 */

:root {
    /* ═══════════════════════════════════════════
       COULEURS - Mode Light
       ═══════════════════════════════════════════ */

    /* Fond */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f7f7f5;
    --color-bg-tertiary: #f1f1ef;
    --color-bg-elevated: #ffffff;
    --color-bg-hover: rgba(55, 53, 47, 0.04);
    --color-bg-active: rgba(55, 53, 47, 0.08);

    /* Texte */
    --color-text-primary: #37352f;
    --color-text-secondary: #6b6b6b;
    --color-text-tertiary: #9b9a97;
    --color-text-inverse: #ffffff;

    /* Bordures */
    --color-border-default: rgba(55, 53, 47, 0.09);
    --color-border-strong: rgba(55, 53, 47, 0.16);

    /* Accent - Bleu Discord/Notion */
    --color-accent-primary: #2383e2;
    --color-accent-hover: #1a6fc4;
    --color-accent-light: rgba(35, 131, 226, 0.1);

    /* Sémantiques */
    --color-success: #0f7b6c;
    --color-success-bg: rgba(15, 123, 108, 0.1);
    --color-warning: #d9730d;
    --color-warning-bg: rgba(217, 115, 13, 0.1);
    --color-error: #e03e3e;
    --color-error-bg: rgba(224, 62, 62, 0.1);
    --color-info: #2383e2;
    --color-info-bg: rgba(35, 131, 226, 0.1);

    /* Catégories d'épreuves */
    --color-sprint: #6940a5;
    --color-demi-fond: #2383e2;
    --color-fond: #0f7b6c;
    --color-haies: #d9730d;
    --color-sauts: #e03e3e;
    --color-lancers: #9065b0;
    --color-marche: #6940a5;
    --color-relais: #dfab01;

    /* ═══════════════════════════════════════════
       TYPOGRAPHIE
       ═══════════════════════════════════════════ */

    --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-mono: "SFMono-Regular", Menlo, Consolas, "PT Mono", monospace;

    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.8125rem;   /* 13px */
    --font-size-base: 0.875rem;  /* 14px */
    --font-size-md: 1rem;        /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */

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

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ═══════════════════════════════════════════
       ESPACEMENT
       ═══════════════════════════════════════════ */

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

    /* ═══════════════════════════════════════════
       RAYONS DE BORDURE
       ═══════════════════════════════════════════ */

    --radius-none: 0;
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* ═══════════════════════════════════════════
       OMBRES
       ═══════════════════════════════════════════ */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.04);
    --shadow-elevated: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.08);

    /* ═══════════════════════════════════════════
       TRANSITIONS
       ═══════════════════════════════════════════ */

    --transition-fast: 0.1s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-spring: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ═══════════════════════════════════════════
       Z-INDEX
       ═══════════════════════════════════════════ */

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 300;
    --z-modal: 400;
    --z-bottomsheet: 500;
    --z-toast: 600;
    --z-tooltip: 700;

    /* ═══════════════════════════════════════════
       LAYOUT
       ═══════════════════════════════════════════ */

    --sidebar-width: 260px;
    --sidebar-collapsed-width: 60px;
    --header-height: 52px;
    --bottomsheet-max-height: 85vh;
    --content-max-width: 1200px;
}

/* ═══════════════════════════════════════════
   MODE DARK
   ═══════════════════════════════════════════ */

[data-theme="dark"] {
    /* Fond */
    --color-bg-primary: #191919;
    --color-bg-secondary: #202020;
    --color-bg-tertiary: #2d2d2d;
    --color-bg-elevated: #252525;
    --color-bg-hover: rgba(255, 255, 255, 0.055);
    --color-bg-active: rgba(255, 255, 255, 0.1);

    /* Texte */
    --color-text-primary: rgba(255, 255, 255, 0.9);
    --color-text-secondary: rgba(255, 255, 255, 0.6);
    --color-text-tertiary: rgba(255, 255, 255, 0.4);

    /* Bordures */
    --color-border-default: rgba(255, 255, 255, 0.09);
    --color-border-strong: rgba(255, 255, 255, 0.16);

    /* Accent */
    --color-accent-primary: #529cca;
    --color-accent-hover: #6aacda;
    --color-accent-light: rgba(82, 156, 202, 0.15);

    /* Sémantiques */
    --color-success: #4dab9a;
    --color-success-bg: rgba(77, 171, 154, 0.15);
    --color-warning: #e9a55b;
    --color-warning-bg: rgba(233, 165, 91, 0.15);
    --color-error: #eb6f6f;
    --color-error-bg: rgba(235, 111, 111, 0.15);
    --color-info: #529cca;
    --color-info-bg: rgba(82, 156, 202, 0.15);

    /* Ombres */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.2);
    --shadow-elevated: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 4px 12px rgba(0, 0, 0, 0.4);
}