/* Winkrew — Design System V1 : jetons. Charte officielle (valeurs reprises du prototype et de la landing). Aucune autre palette. */
:root {
  /* Vert Winkrew */
  --wk-green-900: #00323C;   /* vert très foncé : fonds sombres, texte principal */
  --wk-green-700: #005669;   /* vert Winkrew (pétrole) : couleur structurante */
  --wk-green-500: #00778F;   /* vert/bleu Winkrew : accents secondaires */
  --wk-green-300: #0091B1;
  --wk-green-100: #DCEFF4;   /* teinte claire : fonds de badge, sélection douce */
  /* Orange Winkrew */
  --wk-orange-700: #AF6500;
  --wk-orange-500: #EE8806;  /* orange Winkrew : CTA, états actifs, sélection, accents */
  --wk-orange-300: #F4C378;  /* orange clair */
  --wk-orange-100: #FEE0BC;
  /* Neutres */
  --wk-white: #FFFFFF;
  --wk-cream: #FFF3E3;       /* blanc cassé chaud */
  --wk-paper: #FBF7F1;       /* fond des écrans clairs */
  --wk-line: #EADFD0;
  --wk-ink: #00323C;
  --wk-muted: #6B7C82;
  --wk-soft: #9AA7AC;
  --wk-error: #B23A3A;
  --wk-success: #1C7C4A;
  /* Typo */
  --wk-display: 'Cal Sans', 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --wk-body: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  /* Rayons, ombres, espaces */
  --wk-r-card: 22px; --wk-r-pill: 999px; --wk-r-input: 14px;
  --wk-shadow: 0 6px 24px rgba(0, 50, 60, .08);
  --wk-shadow-lg: 0 14px 40px rgba(0, 50, 60, .16);
  --wk-gap: 16px;
  --wk-nav-h: 66px;
  --wk-sab: env(safe-area-inset-bottom, 0px); /* zone de sécurité basse (barre d'accueil iOS) — surchargée par les tests pour simuler un iPhone */
  --wk-max: 480px;
  /* Dégradés et teintes dérivées (surchargés par les thèmes) */
  --wk-grad-dark: linear-gradient(180deg, #02333E 0%, #03404F 45%, #05566A 100%);   /* léger dégradé vert (fichier de Djé) */
  --wk-grad-dark-end: #05566A;
  --wk-grad-accent: linear-gradient(180deg, #F28904 0%, #F6A441 50%, #FABF73 100%); /* léger dégradé orange (fichier de Djé) */
  --wk-accent-hover: #F5931B;
  --wk-accent-glow: rgba(238, 136, 6, .28);
  --wk-accent-ring: rgba(238, 136, 6, .15);
  --wk-selected-bg: #FFF8EE;
  --wk-gitem-on: #F5B86B;
  --wk-overlay: rgba(0, 50, 60, .55);
  --wk-ghost-bg: rgba(0, 50, 60, .06);
  --wk-page-bg: #001F26;
  --wk-err-on-dark: #FFB4A8;
  /* Surfaces (cartes, champs, barres) et vert « rempli » (fond de bouton ou de carte sous texte blanc) : surchargés en mode sombre */
  --wk-surface: #FFFFFF;
  --wk-green-fill: var(--wk-green-700);
  color-scheme: light;
}

/* ---- Thème Love : rouge romantique élégant. Actif uniquement dans le contexte d'un Krew Love (attribut data-theme posé par l'app
   sur <html> selon le Krew réellement actif ; retiré dès qu'on revient à l'accueil, au compte ou à un autre ADN). Mêmes rôles de jetons :
   le bordeaux remplace le vert structurant, le rouge profond remplace l'orange des actions, le rose doux remplace les teintes claires. ---- */
:root[data-theme="love"] {
  --wk-green-900: #3E0B19;   /* bordeaux très foncé : fonds sombres, texte principal */
  --wk-green-700: #7A1B34;   /* bordeaux : couleur structurante */
  --wk-green-500: #A6304F;
  --wk-green-300: #C2506B;
  --wk-green-100: #FBE3E8;   /* rose très doux : badges, sélection douce */
  --wk-orange-700: #8C1230;
  --wk-orange-500: #C41E3A;  /* rouge profond : CTA, états actifs */
  --wk-orange-300: #F2A6B4;  /* rose doux */
  --wk-orange-100: #FBDDE3;
  --wk-cream: #FFF0F1;
  --wk-paper: #FFF7F6;
  --wk-line: #F0D5D8;
  --wk-ink: #3E0B19;
  --wk-muted: #8A6570;
  --wk-soft: #B59AA1;
  --wk-shadow: 0 6px 24px rgba(74, 15, 30, .10);
  --wk-shadow-lg: 0 14px 40px rgba(74, 15, 30, .20);
  --wk-grad-dark: linear-gradient(180deg, #3E0B19 0%, #5E1129 45%, #8A1E3D 100%);
  --wk-grad-dark-end: #8A1E3D;
  --wk-grad-accent: linear-gradient(180deg, #C41E3A 0%, #D9455F 50%, #F2A6B4 100%);
  --wk-accent-hover: #D0273F;
  --wk-accent-glow: rgba(196, 30, 58, .28);
  --wk-accent-ring: rgba(196, 30, 58, .15);
  --wk-selected-bg: #FFF1F3;
  --wk-gitem-on: #F2A6B4;
  --wk-overlay: rgba(62, 11, 25, .55);
  --wk-ghost-bg: rgba(62, 11, 25, .06);
  --wk-page-bg: #24060E;
  --wk-err-on-dark: #FFD1A6;
}

/* ---- Mode sombre (statut Warrior, choix du compte connecté : attribut data-mode="dark" posé par l'app sur <html>).
   Le fond reprend EXACTEMENT celui de « On s'fait un Wink ? » (--wk-grad-dark, jeton inchangé). Les jetons sont redéfinis sur les
   écrans clairs et les composants partagés (barre de navigation, fenêtres, messages) : les écrans déjà sombres ou orange restent
   tels quels. Mêmes rôles de jetons ; orange et vert Winkrew conservés, éclaircis quand ils servent de texte sur fond sombre. ---- */
:root[data-mode="dark"] { color-scheme: dark; }
:root[data-mode="dark"] .screen.light, :root[data-mode="dark"] .screen.krew, :root[data-mode="dark"] #nav, :root[data-mode="dark"] #modal {
  --wk-surface: rgba(255, 255, 255, .085);   /* cartes et champs : légère élévation sur le vert foncé */
  --wk-ink: #F2F8F9;
  --wk-muted: #CCDFE3;
  --wk-soft: #B4CDD3;
  --wk-line: rgba(255, 255, 255, .18);
  --wk-paper: #05566A;                       /* fin du dégradé (bas d'écran, dégradés des boutons collants) */
  --wk-cream: rgba(255, 255, 255, .10);
  --wk-green-700: #B2EAF3;                   /* vert Winkrew éclairci : texte, contours, liens sur fond sombre */
  --wk-green-fill: #00778F;                  /* vert Winkrew (fond sous texte blanc) */
  --wk-green-100: rgba(142, 220, 234, .16);
  --wk-orange-700: #FFD29E;                  /* orange éclairci pour les textes et liens */
  --wk-orange-100: rgba(238, 136, 6, .22);
  --wk-selected-bg: rgba(238, 136, 6, .20);
  --wk-shadow: 0 6px 24px rgba(0, 0, 0, .22);
  --wk-shadow-lg: 0 14px 40px rgba(0, 0, 0, .35);
  --wk-ghost-bg: rgba(255, 255, 255, .08);
  --wk-error: #FFB4A8;
  --wk-success: #86E3B0;
  --wk-accent-ring: rgba(238, 136, 6, .30);
}
:root[data-mode="dark"] #nav { --wk-surface: #02333E; }       /* barre de navigation : opaque */
:root[data-mode="dark"] #modal { --wk-surface: #084A5A; --wk-cream: rgba(255, 255, 255, .08); } /* fenêtres : opaques, un ton au-dessus du fond */
/* Krew Love en mode sombre : fond sombre Love (bordeaux), textes et accents roses. */
:root[data-mode="dark"][data-theme="love"] .screen.light, :root[data-mode="dark"][data-theme="love"] .screen.krew, :root[data-mode="dark"][data-theme="love"] #nav, :root[data-mode="dark"][data-theme="love"] #modal {
  --wk-ink: #FFF1F3; --wk-muted: #E3B8C2; --wk-soft: #C898A4; --wk-paper: #8A1E3D;
  --wk-green-700: #F7B6C3; --wk-green-fill: #A6304F; --wk-green-100: rgba(247, 182, 195, .16);
  --wk-orange-700: #FFC2CD; --wk-orange-100: rgba(196, 30, 58, .28); --wk-selected-bg: rgba(196, 30, 58, .24); --wk-accent-ring: rgba(196, 30, 58, .35);
}
:root[data-mode="dark"][data-theme="love"] #nav { --wk-surface: #3E0B19; }
:root[data-mode="dark"][data-theme="love"] #modal { --wk-surface: #5A1427; }