/*
 * CapSecur — tokens du design system
 *
 * Source de vérité des valeurs visuelles. Les composants n'utilisent que ces
 * variables, jamais de couleur en dur.
 *
 * Couleurs issues de la charte EEUdF (nuancier 2020) :
 * - bleu CoMa (couleur officielle de la Commission Marine) pour l'interface ;
 * - vert / jaune / rouge du Mouvement pour les statuts, assombris si besoin
 *   pour atteindre un contraste de texte suffisant (WCAG AA) ;
 * - couleurs du logo (--brand-*) réservées aux touches de marque.
 *
 * Thème : clair par défaut (usage en extérieur), sombre via la préférence
 * système ou en forçant data-theme="dark" / "light" sur <html>.
 */

:root {
  /* --- Couleurs de marque EEUdF : logo et touches décoratives uniquement --- */
  --brand-coma: #003e62;     /* CoMa · C100 M30 J0 N65 */
  --brand-vert-1: #95c11f;   /* Vert 1 · cercle et texte du logo */
  --brand-vert-2: #3aaa35;   /* Vert 2 */
  --brand-jaune: #ffe500;    /* Jaune */
  --brand-rouge: #be1622;    /* Rouge */

  /* --- Neutres (teintés vers le bleu CoMa) --- */
  --color-bg: #f3f6f8;
  --color-surface: #ffffff;
  --color-surface-sunken: #e6edf2;
  --color-border: #c7d3dc;
  --color-border-strong: #8597a5;
  --color-text: #0d1f2d;
  --color-text-muted: #475a69;

  /* --- Action principale : bleu CoMa --- */
  --color-primary: #003e62;
  --color-primary-hover: #002b45;
  --color-primary-soft: #dde9f1;
  --color-on-primary: #ffffff;

  /* --- Statuts (toujours doublés d'une icône + d'un libellé) --- */
  --color-ok: #2b7a26;          /* Vert 2 assombri */
  --color-ok-soft: #e3f4e1;
  --color-warn: #7a5a00;        /* texte sur fond jaune */
  --color-warn-soft: #fff6c2;
  --color-warn-solid: #ffdd00;  /* Ocre */
  --color-danger: #be1622;      /* Rouge */
  --color-danger-soft: #fce6e7;
  --color-neutral: #575756;     /* CoCom */
  --color-neutral-soft: #ebeef0;

  /* --- Couleurs de foulard (identité visuelle d'un groupe local) ---
     Couleurs réelles de tissu : fixes, indépendantes du thème clair/sombre. */
  --foulard-rouge: #c41e26;
  --foulard-orange: #e2720c;
  --foulard-jaune: #f4c400;
  --foulard-vert: #2e8b3d;
  --foulard-bleu: #1a5fa8;
  --foulard-marine: #16314f;
  --foulard-violet: #6a3d9a;
  --foulard-bordeaux: #7a1f3d;
  --foulard-marron: #6b4226;
  --foulard-gris: #8b96a0;
  --foulard-noir: #22272b;
  --foulard-blanc: #ffffff;

  /* --- Couleurs de coque d'un bateau (palette des foulards + teintes de
     l'inventaire). Fixes, indépendantes du thème clair/sombre. --- */
  --coque-rouge: var(--foulard-rouge);
  --coque-rose: #e07a9f;
  --coque-orange: var(--foulard-orange);
  --coque-jaune: var(--foulard-jaune);
  --coque-champagne: #e6d7a8;
  --coque-vert: var(--foulard-vert);
  --coque-ciel: #7fb8e0;
  --coque-bleu: var(--foulard-bleu);
  --coque-marine: var(--foulard-marine);
  --coque-violet: var(--foulard-violet);
  --coque-bordeaux: var(--foulard-bordeaux);
  --coque-marron: var(--foulard-marron);
  --coque-gris: var(--foulard-gris);
  --coque-noir: var(--foulard-noir);
  --coque-blanc: var(--foulard-blanc);

  /* --- Typographie (voir fonts.css) --- */
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Atkinson Hyperlegible Next", "Verdana", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", "Consolas", monospace;

  --text-xs: 0.8125rem;  /* 13px — mentions, légendes */
  --text-sm: 0.9375rem;  /* 15px — tableaux, aides */
  --text-md: 1.0625rem;  /* 17px — texte courant */
  --text-lg: 1.25rem;    /* 20px — titres de carte */
  --text-xl: 1.625rem;   /* 26px — titres de section */
  --text-2xl: 2.125rem;  /* 34px — titres de page */
  --text-3xl: 2.875rem;  /* 46px — titre d'écran d'accueil */

  --leading-tight: 1.2;
  --leading-body: 1.5;

  /* --- Espacements (base 4px) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* --- Formes --- */
  --radius-sm: 3px;   /* badges, plaques */
  --radius-md: 6px;   /* champs, boutons */
  --radius-lg: 10px;  /* cartes, panneaux */
  --border-width: 1px;
  --shadow-raised: 0 1px 2px rgb(13 31 45 / 0.08), 0 2px 8px rgb(13 31 45 / 0.06);
  --shadow-overlay: 0 8px 24px rgb(13 31 45 / 0.18);

  /* --- Interaction --- */
  --tap-min: 48px;          /* cible tactile minimale (doigts, gants) */
  --color-focus: #057bbf;   /* bleu Arc-en-Seine, distinct du bleu CoMa */
  --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 5px var(--color-focus);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #08141d;
    --color-surface: #0f2230;
    --color-surface-sunken: #0b1a25;
    --color-border: #234055;
    --color-border-strong: #4b6a80;
    --color-text: #e5eef4;
    --color-text-muted: #9fb5c4;
    --color-primary: #7fb6db;
    --color-primary-hover: #a6cde8;
    --color-primary-soft: #0f3550;
    --color-on-primary: #08141d;
    --color-ok: #74cf6c;
    --color-ok-soft: #12361a;
    --color-warn: #ffdd00;
    --color-warn-soft: #3a3208;
    --color-warn-solid: #ffdd00;
    --color-danger: #ff6f73;
    --color-danger-soft: #451519;
    --color-neutral: #b5b9bc;
    --color-neutral-soft: #1d2c37;
    --color-focus: #5dc5ea;
    --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg: #08141d;
  --color-surface: #0f2230;
  --color-surface-sunken: #0b1a25;
  --color-border: #234055;
  --color-border-strong: #4b6a80;
  --color-text: #e5eef4;
  --color-text-muted: #9fb5c4;
  --color-primary: #7fb6db;
  --color-primary-hover: #a6cde8;
  --color-primary-soft: #0f3550;
  --color-on-primary: #08141d;
  --color-ok: #74cf6c;
  --color-ok-soft: #12361a;
  --color-warn: #ffdd00;
  --color-warn-soft: #3a3208;
  --color-warn-solid: #ffdd00;
  --color-danger: #ff6f73;
  --color-danger-soft: #451519;
  --color-neutral: #b5b9bc;
  --color-neutral-soft: #1d2c37;
  --color-focus: #5dc5ea;
  --shadow-raised: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}