/* ARKHEE — design tokens (palette extraite du logo officiel).
   Grammaire chromatique :
   — cyan→bleu (anneaux)  = le SYSTÈME : actions, données, navigation, focus.
   — bronze/or (le « A ») = la MARQUE : voix d'ARKHEE, repères éditoriaux, décision.
   Aucune valeur en dur hors de ce fichier. */
:root {
  /* Fond */
  --bg: #0a141f;            /* marine profond du logo */
  --bg-deep: #060d16;       /* abysse (fond de page, halos) */
  --bg-elev: #101f2e;       /* cartes */
  --bg-elev2: #16293c;      /* hover / inputs */
  --border: #1f3548;
  --border-soft: rgba(124, 165, 199, 0.14);
  --border-strong: rgba(124, 165, 199, 0.30);

  /* Texte */
  --text: #e8f1f8;
  --text-soft: #b7cadb;     /* sous-titres, labels */
  --text-muted: #8aa3b8;    /* AA 6.9:1 sur --bg */
  --ink: #041019;           /* texte sombre sur fonds accent */

  /* Accents du logo */
  --accent: #4fd1c5;        /* cyan-teal des anneaux */
  --accent-2: #5aa9e6;      /* bleu clair */
  --accent-dim: rgba(79, 209, 197, 0.14);
  --accent-glow: rgba(79, 209, 197, 0.32);
  --gold: #c99a62;          /* bronze du « A » — AA 7.2:1 sur --bg */
  --gold-bright: #ddb488;
  --gold-deep: #a97c47;
  --gold-dim: rgba(201, 154, 98, 0.16);

  /* États */
  --success: #3ecf8e;
  --warning: #e7b549;
  --danger: #e4586b;
  --danger-deep: #c93a50;   /* fonds danger avec texte blanc (AA) */

  /* Dégradés signature */
  --grad-ring: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --grad-ring-v: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
  --grad-gold: linear-gradient(135deg, #d9b184 0%, var(--gold-deep) 100%);
  --grad-hairline: linear-gradient(90deg, transparent, var(--accent) 35%, var(--accent-2) 65%, transparent);

  /* Géométrie */
  --radius: 16px;
  --radius-sm: 10px;
  --gap: 16px;
  --tabbar-h: 62px;
  --tap: 44px;              /* cible tactile minimale */

  /* Typo */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
                  Palatino, Georgia, "Times New Roman", serif;

  /* Ombres & lueurs */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 50px rgba(2, 8, 14, 0.55);
  --glow-accent: 0 2px 14px rgba(79, 209, 197, 0.28);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-1: 140ms;
  --dur-2: 280ms;
  --dur-3: 520ms;
}

/* ── Chrome (barres translucides) & backdrop — variabilisés pour le thème ── */
:root {
  --chrome-bg: rgba(6, 13, 22, 0.85);
  --backdrop: rgba(4, 10, 16, 0.75);
}

/* ── THÈME CLAIR ─────────────────────────────────────────────────────────
   Même grammaire (cyan→bleu = système, bronze = marque), valeurs inversées.
   Contrastes AA : text 14.8:1, muted 5.6:1, gold 5.1:1 sur --bg. */
:root[data-theme="light"] {
  --bg: #eef2f6;
  --bg-deep: #e6ebf1;
  --bg-elev: #ffffff;
  --bg-elev2: #e8eef4;
  --border: #cdd9e3;
  --border-soft: rgba(30, 60, 90, 0.14);
  --border-strong: rgba(30, 60, 90, 0.32);

  --text: #13232f;
  --text-soft: #33475a;
  --text-muted: #4e6a83;
  --ink: #ffffff;

  --accent: #0e7a8f;
  --accent-2: #2b6cb0;
  --accent-dim: rgba(14, 122, 143, 0.10);
  --accent-glow: rgba(14, 122, 143, 0.22);
  --gold: #8f6438;
  --gold-bright: #a97c47;
  --gold-deep: #7a5530;
  --gold-dim: rgba(169, 124, 71, 0.13);

  --danger-deep: #c9304a;

  --shadow-sm: 0 1px 2px rgba(20, 40, 60, 0.10);
  --shadow: 0 4px 18px rgba(20, 40, 60, 0.12);
  --shadow-lg: 0 18px 50px rgba(20, 40, 60, 0.18);
  --glow-accent: 0 2px 14px rgba(14, 122, 143, 0.18);

  --chrome-bg: rgba(255, 255, 255, 0.86);
  --backdrop: rgba(25, 40, 55, 0.45);
}