/* ============================================================
   QreaLAB V01 — tokens.css
   ------------------------------------------------------------
   TOUTES les variables du design : couleurs, profondeur, lumière,
   espacements, polices, durées, ombres, rayons.

   > Règle d'or héritée du PROTO : on ne met JAMAIS une valeur brute
     dans un autre fichier. On utilise la variable.

   ── Direction V02 — AURORA CORE + Q SPECTRUM ───────────────
   Composition spatiale abstraite. Noir profond, matières froides
   (graphite → graphite bleu → acier → blanc froid), et deux
   signatures lumineuses rares mais franches :
     cyan électrique  = fonctionnement, énergie, alimentation
     violet électrique = anomalie, mystère, secret
   Le centre du Q vit entre le blanc froid et ces deux lumières.

   « La lumière révèle l'installation, elle ne la décore pas. »
   ============================================================ */

:root {

    /* ══════════════════════════════════════════════════════
       1. FONDS — noir profond vers graphite bleuté
       ══════════════════════════════════════════════════════ */

    --bg-void: #010205;        /* le noir de la périphérie : aucun détail */
    --bg-deep: #030509;        /* fond général */
    --bg-floor: #06090f;       /* l'assise de l'installation */
    --bg-panel: #0b0f17;       /* surfaces techniques */
    --bg-raised: #10151f;      /* surfaces touchées par la lumière du Q */
    --bg-overlay: #06090f;     /* journal, terminal, modale */

    /* ══════════════════════════════════════════════════════
       2. MATIÈRES — graphite → graphite bleu → acier → blanc froid
       ══════════════════════════════════════════════════════ */

    --metal-900: #141a24;
    --metal-800: #1b2330;
    --metal-700: #242e3d;
    --metal-600: #2e3a4c;
    --metal-500: #3a4a5f;
    --metal-400: #4c6076;
    --steel-300: #7f95ad;      /* acier froid : arêtes éclairées */
    --frost-200: #b9c9d9;      /* gris clair froid : surfaces proches du Q */

    /* ══════════════════════════════════════════════════════
       3. TEXTE — blanc froid vers gris très discret
       ══════════════════════════════════════════════════════ */

    --text-bright: #eef5fb;    /* blanc froid : titres, Q */
    --text-primary: #ccd7e3;   /* contenu principal */
    --text-secondary: #93a3b5; /* informations secondaires */
    --text-muted: #64748a;     /* informations tertiaires */
    --text-dim: #3d4854;       /* très discret, limite du lisible */

    /* ══════════════════════════════════════════════════════
       4. LUMIÈRE & SIGNAL
       ──────────────────────────────────────────────────────
       Le Q mélange trois lumières : blanc froid au centre,
       cyan électrique et violet électrique autour du noyau.

       Cyan = activité, alimentation, fonctionnement.
       Violet = anomalie, secret, information inhabituelle.
       Les couleurs lumineuses sont RARES, mais leur apparition
       a de l'impact.
       ══════════════════════════════════════════════════════ */

    --q-white: #f3f9ff;        /* le cœur du Q */
    --q-cyan: #5fe8ff;         /* cyan électrique — signature du Q */
    --q-violet: #a970ff;       /* violet électrique — signature du Q */

    --signal: #58d2ee;         /* cyan de fonctionnement — surfaces, câbles actifs */
    --signal-dim: #2f6072;     /* cyan éteint — câble alimenté mais inactif */
    --signal-hot: #2ee6ff;     /* cyan vif — points de lumière uniquement */
    --signal-dead: #232d38;    /* connexion coupée : plus de couleur du tout */

    /* Anomalies / secrets — plus saturé et plus lumineux que le cyan. */
    --anomaly: #a26bff;
    --anomaly-dim: #4d3a82;
    --anomaly-hot: #c9a4ff;

    /* ══════════════════════════════════════════════════════
       4b. SIGNATURES DES MODULES
       ──────────────────────────────────────────────────────
       Chaque module porte une signature secondaire, volontairement
       discrète : elle différencie les expériences sans transformer
       QreaLAB en interface multicolore. Le Q reste la seule vraie
       source de lumière. Le cyan (fonctionnement) et le violet
       (anomalie) gardent leur rôle premier.
       ══════════════════════════════════════════════════════ */

    /* Cyan — fonctionnement (module-01). */
    --mod-cyan: #5fe8ff;
    --mod-cyan-hot: #2ee6ff;
    --mod-cyan-dim: #2f6072;
    --mod-cyan-glow: rgba(95, 232, 255, 0.16);

    /* Violet — anomalie / structure (module-02). */
    --mod-violet: #a970ff;
    --mod-violet-hot: #c9a4ff;
    --mod-violet-dim: #4d3a82;
    --mod-violet-glow: rgba(169, 112, 255, 0.16);

    /* Vert — mémoire / observation (module-03). */
    --mod-green: #7ee8b0;
    --mod-green-hot: #9dffc6;
    --mod-green-dim: #2f6e52;
    --mod-green-glow: rgba(126, 232, 176, 0.14);

    /* Bleu profond — réserve (module-04). */
    --mod-blue: #79a6ff;
    --mod-blue-hot: #a3c4ff;
    --mod-blue-dim: #3a4f8f;
    --mod-blue-glow: rgba(121, 166, 255, 0.14);

    /* Acier — réserve (module-05). */
    --mod-steel: #9fb3c8;
    --mod-steel-hot: #c8d7e6;
    --mod-steel-dim: #4c6076;
    --mod-steel-glow: rgba(159, 179, 200, 0.1);

    /* ══════════════════════════════════════════════════════
        4c. CHÂSSIS DES MODULES (refonte V02)
        ──────────────────────────────────────────────────────
        Enveloppe physique + écran intérieur : la présence d'un
        module se lit dès l'arrivée, quelle que soit son état.
        ══════════════════════════════════════════════════════ */

    --chassis-border: rgba(180, 205, 230, 0.14);  /* arêtes de l'enveloppe */
    --chassis-face: rgba(27, 35, 48, 0.72);       /* face sombre du châssis */
    --chassis-raised: rgba(44, 56, 72, 0.62);     /* seam / reliefs internes */
    --screen-face: rgba(2, 4, 7, 0.9);            /* fenêtre noire de l'écran */
    --screen-border: rgba(180, 205, 230, 0.22);   /* liseré de l'écran */

    /* ══════════════════════════════════════════════════════
        5. PROFONDEUR (2.5D)
       ──────────────────────────────────────────────────────
       La profondeur est suggérée, jamais réaliste : échelle,
       léger flou, extinction dans le noir.
       depth 0 = premier plan, depth 1 = fond de l'installation.
       ══════════════════════════════════════════════════════ */

    --depth-scale-near: 1;      /* échelle à depth 0 */
    --depth-scale-far: 0.72;    /* échelle à depth 1 */
    --depth-blur-far: 1.2px;    /* flou d'éloignement à depth 1 */
    --depth-fade-far: 0.38;     /* opacité à depth 1 */

    /* Facteurs de parallaxe par couche (× le déplacement caméra). */
    --parallax-back: 0.86;
    --parallax-mid: 0.94;
    --parallax-front: 1.07;

    /* Bornes de zoom : exploration du cadrage, pas inspection. */
    --zoom-min: 0.5;
    --zoom-max: 1.85;

    /* ══════════════════════════════════════════════════════
       6. OMBRES & HALOS
       ══════════════════════════════════════════════════════ */

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.55);
    --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 14px 44px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 26px 80px rgba(0, 0, 0, 0.85);

    /* Halos larges et faibles = lumière. Le Q mélange cyan et violet :
       c'est sa signature spectrale. */
    --glow-q: 0 0 80px rgba(95, 232, 255, 0.18), 0 0 180px rgba(169, 112, 255, 0.1);
    --glow-signal: 0 0 18px rgba(88, 210, 238, 0.28);
    --glow-signal-soft: 0 0 34px rgba(88, 210, 238, 0.14);
    --glow-anomaly: 0 0 22px rgba(162, 107, 255, 0.32);

    /* Ombre portée elliptique posée au sol sous un objet. */
    --contact-shadow: radial-gradient(50% 50% at 50% 50%,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.34) 55%,
        rgba(0, 0, 0, 0) 100%);

    /* ══════════════════════════════════════════════════════
       7. BORDURES & RAYONS
       ══════════════════════════════════════════════════════ */

    --line-subtle: rgba(180, 205, 230, 0.05);
    --line: rgba(180, 205, 230, 0.09);
    --line-strong: rgba(200, 225, 245, 0.15);
    --line-signal: rgba(88, 210, 238, 0.24);
    --line-anomaly: rgba(162, 107, 255, 0.3);

    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-xl: 22px;
    --radius-full: 9999px;

    /* ══════════════════════════════════════════════════════
       8. ESPACEMENT — grille de base 8px (repris du PROTO)
       ══════════════════════════════════════════════════════ */

    --space-2xs: 0.25rem;  /*  4px */
    --space-xs: 0.5rem;    /*  8px */
    --space-sm: 0.75rem;   /* 12px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4.5rem;   /* 72px */

    /* ══════════════════════════════════════════════════════
       9. TYPOGRAPHIE — deux familles, pas plus
       ──────────────────────────────────────────────────────
       Sans-serif pour l'interface et la narration.
       Monospace UNIQUEMENT pour système / logs / terminal /
       identifiants. Pas de monospace partout.
       ══════════════════════════════════════════════════════ */

    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'Courier New', monospace;

    --fs-2xs: 0.6875rem;  /* 11px — identifiants système */
    --fs-xs: 0.75rem;     /* 12px */
    --fs-sm: 0.8125rem;   /* 13px */
    --fs-base: 0.9375rem; /* 15px */
    --fs-md: 1.0625rem;   /* 17px */
    --fs-lg: 1.25rem;     /* 20px */
    --fs-xl: 1.5rem;      /* 24px */
    --fs-2xl: 2rem;       /* 32px */
    --fs-3xl: 2.75rem;    /* 44px */

    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;

    --lh-tight: 1.15;
    --lh-normal: 1.5;
    --lh-relaxed: 1.7;

    /* Interlettrage : les étiquettes système respirent. */
    --ls-label: 0.14em;
    --ls-wide: 0.24em;

    /* ══════════════════════════════════════════════════════
       10. MOUVEMENT
       ══════════════════════════════════════════════════════ */

    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-cam: cubic-bezier(0.16, 0.84, 0.24, 1);  /* déplacements caméra */

    --t-instant: 90ms;
    --t-fast: 160ms;
    --t-normal: 280ms;
    --t-slow: 520ms;
    --t-cine: 900ms;   /* transitions cinématiques */

    /* ══════════════════════════════════════════════════════
       11. EMPILEMENT
       ══════════════════════════════════════════════════════ */

    --z-floor: 1;
    --z-cables: 2;
    --z-objects: 3;
    --z-ambient: 4;
    --z-vignette: 5;
    --z-hud: 20;
    --z-drawer: 40;
    --z-terminal: 50;
    --z-modal: 60;
    --z-discovery: 65;   /* découverte d'un fragment (au-dessus de la modale) */
    --z-toast: 70;
    --z-gatekeeper: 90;
    --z-flash: 95;

    /* ══════════════════════════════════════════════════════
       12. GABARITS D'INTERFACE
       ══════════════════════════════════════════════════════ */

    --hud-height: 52px;
    --drawer-width: 420px;
    --terminal-width: 480px;
    --terminal-height: 340px;

    /* Marges sûres (encoches, barres système mobiles). */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* ──────────────────────────────────────────────────────────
   AJUSTEMENTS PAR PALIER
   Le responsive n'est pas une réduction : les gabarits changent.
   ────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
    :root {
        --hud-height: 48px;
        --drawer-width: 380px;
    }
}

@media (max-width: 767px) {
    :root {
        --hud-height: 56px;
        --drawer-width: 100vw;
        --terminal-width: 100vw;
        --terminal-height: 46vh;
        /* Moins de flou de profondeur : coûteux et peu lisible en petit. */
        --depth-blur-far: 0.8px;
        --depth-scale-far: 0.78;
    }
}