/* Vigie : jetons du système de design (source de vérité, voir dashboard/DESIGN.md).
   Palette et polices : charte Anthropic. Matériaux et formes : Apple Liquid Glass (iOS 26/27).
   Contrastes calculés pour le texte (WCAG AA 4,5:1) sur le fond de chaque thème. */

:root {
  color-scheme: light dark;

  /* Palette Anthropic, telle quelle */
  --dark: #141413;
  --light: #faf9f5;
  --mid-gray: #b0aea5;
  --light-gray: #e8e6dc;
  --orange: #d97757;
  --blue: #6a9bcc;
  --green: #788c5d;

  /* ---------- Thème clair ---------- */
  --bg: var(--light);
  --bg-ambient-a: rgb(217 119 87 / 0.10);   /* halos de couleur du fond : le verre s'en nourrit */
  --bg-ambient-b: rgb(106 155 204 / 0.10);
  --bg-ambient-c: rgb(120 140 93 / 0.08);

  --label-rgb: 20 20 19;
  --label: rgb(var(--label-rgb));               /* 17,6:1 */
  --label-2: rgb(var(--label-rgb) / 0.74);      /* ~7:1  texte secondaire */
  --label-3: rgb(var(--label-rgb) / 0.60);      /* ~4,7:1 légendes, heures */
  --label-4: rgb(var(--label-rgb) / 0.32);      /* hors texte : désactivé, repères */
  --separator: rgb(var(--label-rgb) / 0.12);
  --fill: rgb(var(--label-rgb) / 0.06);
  --fill-2: rgb(var(--label-rgb) / 0.04);
  --fill-pressed: rgb(var(--label-rgb) / 0.10);

  /* Matériaux standard (couche de contenu) : épais -> ultra-fin */
  --material-thick: rgb(255 255 255 / 0.86);
  --material-regular: rgb(255 255 255 / 0.70);
  --material-thin: rgb(255 255 255 / 0.52);
  --material-ultrathin: rgb(255 255 255 / 0.34);
  --material-blur: 24px;
  --sunken: rgb(232 230 220 / 0.60);            /* gris clair Anthropic : zones en creux */

  /* Accent (interaction) et encres (même teinte, assombrie pour le texte sur fond clair) */
  --accent: var(--orange);
  --on-accent: var(--dark);                      /* texte sur fond orange : 6,3:1 */
  --accent-ink: #965540;                         /* 5,4:1 */

  /* Couleurs des données (voir DESIGN.md §7) */
  --win: var(--green);        --win-ink: #5a6847;     /* 1er trade gagné : 5,7:1 */
  --again: var(--blue);       --again-ink: #496886;   /* AGAIN / martingale : 5,5:1 */
  --loss: var(--orange);      --loss-ink: #965540;    /* martingale perdue */
  --deleted: var(--orange);   --deleted-ink: #965540; /* message effacé */
  --neutral: var(--mid-gray); --neutral-ink: rgb(var(--label-rgb) / 0.74);
  --tint-alpha: 0.16;                                  /* fond des pastilles colorées */

  /* ---------- Liquid Glass (couche fonctionnelle) ---------- */
  --glass-tint: 0.45;              /* réglage iOS 27 : 0 = ultra-clair … 1 = teinté (réglages) */
  --glass-rgb: 250 249 245;        /* le verre prend la couleur du dessous ; sa base est neutre */
  --glass-alpha: calc(0.18 + var(--glass-tint) * 0.62);   /* 0,18 -> 0,80 */
  --glass-blur: calc(8px + var(--glass-tint) * 16px);     /* 8 -> 24 px */
  --glass-saturate: 1.8;
  --glass-rim: rgb(255 255 255 / 0.75);          /* liseré lumineux (bord spéculaire) */
  --glass-rim-soft: rgb(255 255 255 / 0.10);
  --glass-edge-shade: rgb(0 0 0 / 0.05);
  --glass-shadow: 0 10px 28px -8px rgb(20 20 19 / 0.22), 0 2px 6px -2px rgb(20 20 19 / 0.10);
  --glass-solid: #f3f1ea;                        /* transparence réduite */
  --glass-platter: rgb(var(--label-rgb) / 0.08); /* pastille de l'onglet choisi */
  --dim-layer: rgb(20 20 19 / 0.35);             /* sous le verre clair, au-dessus d'une photo claire */
  --scrim: rgb(20 20 19 / 0.28);                 /* derrière une feuille modale */

  /* ---------- Typographie ---------- */
  --font-display: "Poppins", Arial, sans-serif;    /* titres, contrôles, chiffres */
  --font-text: "Lora", Georgia, serif;             /* texte courant, contenu des messages */
  /* taille / interligne */
  --t-large-title: 600 32px/38px var(--font-display);
  --t-title-1: 600 26px/32px var(--font-display);
  --t-title-2: 600 22px/28px var(--font-display);
  --t-title-3: 600 19px/24px var(--font-display);
  --t-headline: 600 16px/22px var(--font-display);
  --t-body: 400 16px/24px var(--font-text);
  --t-callout: 400 15px/22px var(--font-text);
  --t-subheadline: 500 14px/20px var(--font-display);
  --t-footnote: 400 13px/18px var(--font-display);
  --t-caption-1: 500 12px/16px var(--font-display);
  --t-caption-2: 500 11px/14px var(--font-display);
  --t-metric: 600 34px/40px var(--font-display);   /* grands chiffres (statistiques) */
  --tracking-tight: -0.02em;

  /* ---------- Espacements (grille de 4) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-14: 56px;
  --gutter: 16px;                  /* marge de page : 16 mobile, 24 tablette, 32 bureau */
  --content-max: 1180px;

  /* ---------- Formes concentriques ---------- */
  --r-sheet: 34px;                 /* feuilles, fenêtres */
  --r-section: 26px;               /* sections de contenu */
  --pad-section: 16px;
  --r-inner: calc(var(--r-section) - var(--pad-section));   /* 10 px : éléments dans une section */
  --r-card: 22px;
  --r-control: 14px;
  --r-capsule: 999px;
  --tap: 44px;                     /* cible tactile minimale */

  /* ---------- Mouvement ---------- */
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);   /* morphose (léger rebond) */
  --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);      /* feuilles, barres */
  --d-press: 160ms;
  --d-morph: 320ms;
  --d-sheet: 460ms;

  /* ---------- Superpositions ---------- */
  --z-content: 0;
  --z-edge: 10;        /* effet de bord de défilement */
  --z-nav: 20;         /* barre d'onglets, barre latérale, barre d'outils */
  --z-sheet: 40;
  --z-toast: 50;
}

@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; --t-large-title: 600 40px/46px var(--font-display); } }

/* ---------- Thème sombre : réglage système, sauf choix « Clair » ; ou choix « Sombre » ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--dark);
    --bg-ambient-a: rgb(217 119 87 / 0.14);
    --bg-ambient-b: rgb(106 155 204 / 0.13);
    --bg-ambient-c: rgb(120 140 93 / 0.10);
    --label-rgb: 250 249 245;
    --label-2: rgb(var(--label-rgb) / 0.72);
    --label-3: rgb(var(--label-rgb) / 0.56);     /* ~6:1 sur #141413 */
    --label-4: rgb(var(--label-rgb) / 0.30);
    --separator: rgb(var(--label-rgb) / 0.12);
    --fill: rgb(var(--label-rgb) / 0.08);
    --fill-2: rgb(var(--label-rgb) / 0.05);
    --fill-pressed: rgb(var(--label-rgb) / 0.14);
    --material-thick: rgb(38 37 35 / 0.90);
    --material-regular: rgb(250 249 245 / 0.06);
    --material-thin: rgb(250 249 245 / 0.045);
    --material-ultrathin: rgb(250 249 245 / 0.03);
    --sunken: rgb(0 0 0 / 0.22);
    --accent-ink: #d97757;                       /* 6,3:1 sur #141413 */
    --win-ink: #8fa274;   --again-ink: #7fa9d4;   --loss-ink: #e08b6f;
    --deleted-ink: #e08b6f; --neutral-ink: rgb(var(--label-rgb) / 0.72);
    --tint-alpha: 0.20;
    --glass-rgb: 30 29 27;
    --glass-rim: rgb(255 255 255 / 0.22);
    --glass-rim-soft: rgb(255 255 255 / 0.04);
    --glass-edge-shade: rgb(0 0 0 / 0.25);
    --glass-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.55), 0 2px 6px -2px rgb(0 0 0 / 0.35);
    --glass-solid: #262523;
    --glass-platter: rgb(var(--label-rgb) / 0.12);
    --scrim: rgb(0 0 0 / 0.45);
  }
}
:root[data-theme="dark"] {
  --bg: var(--dark);
  --bg-ambient-a: rgb(217 119 87 / 0.14);
  --bg-ambient-b: rgb(106 155 204 / 0.13);
  --bg-ambient-c: rgb(120 140 93 / 0.10);
  --label-rgb: 250 249 245;
  --label-2: rgb(var(--label-rgb) / 0.72);
  --label-3: rgb(var(--label-rgb) / 0.56);
  --label-4: rgb(var(--label-rgb) / 0.30);
  --separator: rgb(var(--label-rgb) / 0.12);
  --fill: rgb(var(--label-rgb) / 0.08);
  --fill-2: rgb(var(--label-rgb) / 0.05);
  --fill-pressed: rgb(var(--label-rgb) / 0.14);
  --material-thick: rgb(38 37 35 / 0.90);
  --material-regular: rgb(250 249 245 / 0.06);
  --material-thin: rgb(250 249 245 / 0.045);
  --material-ultrathin: rgb(250 249 245 / 0.03);
  --sunken: rgb(0 0 0 / 0.22);
  --accent-ink: #d97757;
  --win-ink: #8fa274;   --again-ink: #7fa9d4;   --loss-ink: #e08b6f;
  --deleted-ink: #e08b6f; --neutral-ink: rgb(var(--label-rgb) / 0.72);
  --tint-alpha: 0.20;
  --glass-rgb: 30 29 27;
  --glass-rim: rgb(255 255 255 / 0.22);
  --glass-rim-soft: rgb(255 255 255 / 0.04);
  --glass-edge-shade: rgb(0 0 0 / 0.25);
  --glass-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.55), 0 2px 6px -2px rgb(0 0 0 / 0.35);
  --glass-solid: #262523;
  --glass-platter: rgb(var(--label-rgb) / 0.12);
  --scrim: rgb(0 0 0 / 0.45);
}

/* ---------- Accessibilité : réglages du système ou choix dans Réglages ---------- */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-alpha: 1; --glass-blur: 0px; --material-blur: 0px; }
}
:root[data-transparency="reduced"] { --glass-alpha: 1; --glass-blur: 0px; --material-blur: 0px; }

@media (prefers-contrast: more) {
  :root {
    --label-2: rgb(var(--label-rgb) / 0.86);
    --label-3: rgb(var(--label-rgb) / 0.76);
    --separator: rgb(var(--label-rgb) / 0.30);
    --glass-alpha: 0.94;
    --glass-rim: rgb(var(--label-rgb) / 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-press: 0ms; --d-morph: 0ms; --d-sheet: 0ms; --ease-spring: linear; }
}