/* ==================================================
   ÆKOZ - TOKENS.CSS
   Variables globales du design system

   Ce fichier centralise les constantes visuelles :
   couleurs, typographies, espacements, rayons,
   ombres, transitions et largeur de container.
================================================== */

:root {

    /* ==================================================
       COLOR SYSTEM
       Palette principale Ækoz
    ================================================== */

    /* Background global du site */
    --color-bg: #05141B;

    /* Background secondaire pour sections ou zones profondes */
    --color-bg-secondary: #10202D;

    /* Accent principal, utilisé uniquement pour signalétique et actions */
    --color-orange: #E74F01;


    /* ==================================================
       SURFACE SYSTEM
       Niveaux visuels des blocs, cards et panels
    ================================================== */

    /* Surface forte : panels principaux, nav, modals, éléments importants */
    --surface-primary: #10202D;

    /* Surface standard : cards principales, blocs de contenu */
    --surface-secondary: #243644;

    /* Surface discrète : overlays, blocs secondaires, éléments de support */
    --surface-tertiary: #495B69;

    /* Bordures, lignes, contours subtils */
    --surface-border: #99A7AA;

    /* Surface claire rare, à utiliser avec prudence */
    --surface-light: #CCD0CF;


    /* ==================================================
       TEXT COLORS
    ================================================== */

    /* Texte principal */
    --color-text: #FFFFFF;

    /* Texte secondaire */
    --color-text-muted: #99A7AA;

    /* Texte très discret */
    --color-text-soft: #CCD0CF;


    /* ==================================================
       BORDERS
       Versions en transparence pour éviter les contours trop durs
    ================================================== */

    --color-border-soft: rgba(153, 167, 170, 0.12);
    --color-border-medium: rgba(153, 167, 170, 0.24);
    --color-border-strong: rgba(153, 167, 170, 0.38);


    /* ==================================================
       GLOWS / SHADOWS
    ================================================== */

    --glow-orange:
        0 0 25px rgba(231, 79, 1, 0.18);

    --glow-orange-strong:
        0 0 42px rgba(231, 79, 1, 0.34);

    --glow-soft:
        0 0 40px rgba(255, 255, 255, 0.04);

    --shadow-soft:
        0 24px 80px rgba(0, 0, 0, 0.28);

    --shadow-strong:
        0 32px 120px rgba(0, 0, 0, 0.42);


    /* ==================================================
       TYPOGRAPHY
    ================================================== */

    --font-main: "Inter", sans-serif;

    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 32px;
    --text-2xl: 48px;
    --text-hero: 72px;

    /* ==================================================
       TYPOGRAPHY STYLES
    ================================================== */

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

    /* ==================================================
       TEXT COLORS
    ================================================== */

    --text-primary: #FFFFFF;

    --text-secondary: #CCD0CF;

    --text-muted: #99A7AA;

    --text-soft: #6B7280;

    /* ==================================================
       LETTER SPACING
    ================================================== */

    --tracking-tight: -0.04em;

    --tracking-normal: 0;

    --tracking-wide: 0.08em;

    /* ==================================================
       FONT WEIGHTS
    ================================================== */

    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;


    /* ==================================================
       SPACING
       Base 8px
    ================================================== */

    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 48px;
    --space-xl: 96px;
    --space-2xl: 160px;


    /* ==================================================
       BORDER RADIUS
    ================================================== */

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 999px;


    /* ==================================================
       TRANSITIONS
    ================================================== */

    --transition-fast: 0.2s ease;
    --transition-medium: 0.4s ease;
    --transition-slow: 0.8s ease;


    /* ==================================================
       LAYOUT
    ================================================== */

    --container-width: 1400px;

}