/* ============================================================
   PG PROTOCOL — Design System
   Labo/biohacking : charbon très sombre légèrement verdâtre,
   un seul accent vert signal. Tokens repris de DESIGN.md.

   Règle : le vert ne décore pas, il signale (action, sélection,
   état). Ambre pour l'avertissement, rouge pour le danger.
   ============================================================ */

:root {
    /* Neutres — fonds et surfaces, teinte verte discrète */
    --bg-deep: #0b120d;
    --bg-primary: #101a14;
    --bg-secondary: #121b15;
    --bg-card: #121b15;
    --bg-elevated: #18241c;
    --bg-glass: rgba(11, 18, 13, 0.72);

    /* Accent de marque */
    --vert: #5fe084;
    --vert-hi: #8af0a6;
    --on-vert: #07120b;

    /* Accents (noms historiques de l'app, palette PG PROTOCOL) */
    --red: #5fe084;
    --red-dim: #47c46b;
    --red-glow: rgba(95, 224, 132, 0.4);
    --red-subtle: rgba(95, 224, 132, 0.1);
    --blue: #5fe084;
    --blue-dim: #47c46b;
    --blue-glow: rgba(95, 224, 132, 0.3);
    --cyan: #5fe084;
    --green: #5fe084;
    --green-glow: rgba(95, 224, 132, 0.3);
    --yellow: #f0b95f;
    --amber: #f0b95f;
    --danger: #f07a6a;
    --gradient-main: linear-gradient(118deg, #47c46b, #8af0a6);
    --gradient-red: linear-gradient(118deg, #47c46b, #8af0a6);
    --gradient-blue: linear-gradient(118deg, #47c46b, #8af0a6);

    /* Texte — rampe de l'ink vers le muted */
    --text-primary: #f0ede6;
    --text-secondary: #cfc8be;
    --text-muted: #9b938a;
    --text-dark: #07120b;

    /* Bordures */
    --border-subtle: rgba(240, 237, 230, 0.10);
    --border-medium: rgba(240, 237, 230, 0.18);
    --border-accent: rgba(95, 224, 132, 0.35);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;

    /* Typographie — une seule famille, comme la landing page */
    --font-body: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    --font-mono: 'Space Grotesk', ui-monospace, monospace;

    /* Motion — courbe partagée avec la LP, transitions courtes */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Radius — cartes 12px, boutons en pilule */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --theme-transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1);

    --bottom-nav-height: 64px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   LIGHT MODE
   ============================================================ */
[data-theme="light"] {
    --bg-deep: #f2f4f1;
    --bg-primary: #ffffff;
    --bg-secondary: #eef1ec;
    --bg-card: #ffffff;
    --bg-elevated: #f7f9f6;
    --bg-glass: rgba(255, 255, 255, 0.78);

    /* le lime est illisible sur blanc : on descend en vert soutenu */
    --red: #1f9d4d;
    --red-dim: #17753a;
    --red-glow: rgba(31, 157, 77, 0.22);
    --red-subtle: rgba(31, 157, 77, 0.07);
    --blue: #1f9d4d;
    --blue-dim: #17753a;
    --blue-glow: rgba(31, 157, 77, 0.18);
    --cyan: #1f9d4d;
    --green: #1f9d4d;
    --yellow: #b3811f;
    --gradient-main: linear-gradient(118deg, #17753a, #1f9d4d);
    --gradient-red: linear-gradient(118deg, #17753a, #1f9d4d);

    --text-primary: #0b120d;
    --text-secondary: #4a534c;
    --text-muted: #79817b;
    --text-dark: #0b120d;

    --border-subtle: rgba(11, 18, 13, 0.10);
    --border-medium: rgba(11, 18, 13, 0.18);
    --border-accent: rgba(31, 157, 77, 0.28);
}