/* ==========================================================
   Thème "cassettes" — surcharge de pico_classless.css
   -------------------------------------------------------- */


:root, :host {
  /* Beaucoup d'utilisateurs Windows/dev ont déjà Cascadia Mono
     installée (Windows Terminal, VS Code) — le fallback système
     "Cascadia Code" et "Consolas" assure une dégradation propre
     avant même le chargement du woff2. */
  --pico-font-family-monospace:
    'Cascadia Mono', 'Cascadia Code', ui-monospace, Consolas,
    'Liberation Mono', monospace, var(--pico-font-family-emoji);
}


/* --------------------------------------------------------
   MODE CLAIR
   -------------------------------------------------------- */

[data-theme=light],
:root:not([data-theme=dark]),
:host(:not([data-theme=dark])) {

  /* Base */
  --pico-background-color: #f5f5eb;
  --pico-color: #40411f;

  /* Primary — #0a7b7b passe l'AA en texte (4.63:1) sur le fond crème.
     #0b8888 (ta valeur d'origine) reste dispo comme accent brut. */
  --pico-primary-raw: #0b8888;
  --pico-primary: #0a7b7b;
  --pico-primary-background: var(--pico-primary);
  --pico-primary-border: var(--pico-primary-background);
  --pico-primary-underline: color-mix(in srgb, var(--pico-primary) 55%, transparent);
  --pico-primary-hover: color-mix(in srgb, var(--pico-primary) 82%, black);
  --pico-primary-hover-background: var(--pico-primary-hover);
  --pico-primary-hover-border: var(--pico-primary-hover-background);
  --pico-primary-hover-underline: var(--pico-primary-hover);
  --pico-primary-focus: color-mix(in srgb, var(--pico-primary-raw) 38%, transparent);
  --pico-primary-inverse: #fff;

  /* Secondary / contrast : dérivés du texte, pour rester dans la même famille chromatique */
  --pico-secondary: color-mix(in srgb, var(--pico-color) 75%, var(--pico-background-color));
  --pico-secondary-background: color-mix(in srgb, var(--pico-color) 85%, var(--pico-background-color));
  --pico-secondary-border: var(--pico-secondary-background);
  --pico-secondary-underline: color-mix(in srgb, var(--pico-secondary) 50%, transparent);
  --pico-secondary-hover: var(--pico-color);
  --pico-secondary-hover-background: var(--pico-color);
  --pico-secondary-hover-border: var(--pico-secondary-hover-background);
  --pico-secondary-hover-underline: var(--pico-secondary-hover);
  --pico-secondary-focus: color-mix(in srgb, var(--pico-secondary) 30%, transparent);
  --pico-secondary-inverse: var(--pico-background-color);

  --pico-contrast: var(--pico-color);
  --pico-contrast-background: var(--pico-color);
  --pico-contrast-border: var(--pico-contrast-background);
  --pico-contrast-hover: color-mix(in srgb, var(--pico-color) 90%, black);
  --pico-contrast-hover-background: var(--pico-contrast-hover);
  --pico-contrast-hover-border: var(--pico-contrast-hover-background);
  --pico-contrast-inverse: var(--pico-background-color);

  /* Texte atténué / bordures neutres */
  --pico-muted-color: color-mix(in srgb, var(--pico-color) 58%, var(--pico-background-color));
  --pico-muted-border-color: color-mix(in srgb, var(--pico-color) 12%, var(--pico-background-color));

  /* Titres — dégradé du plus sombre (h1) au plus doux (h6), même famille que le texte */
  --pico-h1-color: var(--pico-color);
  --pico-h2-color: color-mix(in srgb, var(--pico-color) 92%, var(--pico-background-color));
  --pico-h3-color: color-mix(in srgb, var(--pico-color) 84%, var(--pico-background-color));
  --pico-h4-color: color-mix(in srgb, var(--pico-color) 76%, var(--pico-background-color));
  --pico-h5-color: color-mix(in srgb, var(--pico-color) 68%, var(--pico-background-color));
  --pico-h6-color: var(--pico-muted-color);

  /* Mise en valeur */
  --pico-mark-background-color: color-mix(in srgb, var(--pico-primary-raw) 28%, var(--pico-background-color));
  --pico-mark-color: var(--pico-color);
  --pico-ins-color: color-mix(in srgb, var(--pico-primary-raw) 70%, var(--pico-color));
  --pico-del-color: #8a4a3a;

  --pico-blockquote-border-color: var(--pico-muted-border-color);
  --pico-blockquote-footer-color: var(--pico-muted-color);

  --pico-table-border-color: var(--pico-muted-border-color);
  --pico-table-row-stripped-background-color: color-mix(in srgb, var(--pico-color) 4%, transparent);

  /* Blocs de code — fond légèrement plus sombre que le fond de page */
  --pico-code-background-color: color-mix(in srgb, var(--pico-color) 6%, var(--pico-background-color));
  --pico-code-color: color-mix(in srgb, var(--pico-color) 80%, var(--pico-background-color));
  --pico-code-kbd-background-color: var(--pico-color);
  --pico-code-kbd-color: var(--pico-background-color);

  /* Champs de formulaire */
  --pico-form-element-background-color: color-mix(in srgb, var(--pico-color) 3%, var(--pico-background-color));
  --pico-form-element-selected-background-color: color-mix(in srgb, var(--pico-color) 14%, var(--pico-background-color));
  --pico-form-element-border-color: color-mix(in srgb, var(--pico-color) 22%, var(--pico-background-color));
  --pico-form-element-color: var(--pico-color);
  --pico-form-element-placeholder-color: var(--pico-muted-color);
  --pico-form-element-active-background-color: var(--pico-background-color);
  --pico-form-element-invalid-border-color: #a05445;
  --pico-form-element-invalid-active-border-color: #8a4a3a;
  --pico-form-element-valid-border-color: color-mix(in srgb, var(--pico-primary) 70%, var(--pico-color));
  --pico-form-element-valid-active-border-color: var(--pico-primary);

  /* Switch / range */
  --pico-switch-background-color: var(--pico-muted-border-color);
  --pico-switch-color: var(--pico-background-color);
  --pico-range-border-color: var(--pico-muted-border-color);
  --pico-range-active-border-color: color-mix(in srgb, var(--pico-color) 30%, var(--pico-background-color));
  --pico-range-thumb-border-color: var(--pico-background-color);
  --pico-range-thumb-color: var(--pico-secondary-background);

  /* Accordéon */
  --pico-accordion-border-color: var(--pico-muted-border-color);
  --pico-accordion-close-summary-color: var(--pico-color);
  --pico-accordion-open-summary-color: var(--pico-muted-color);

  /* Cartes */
  --pico-card-background-color: var(--pico-background-color);
  --pico-card-border-color: var(--pico-muted-border-color);
  --pico-card-sectioning-background-color: color-mix(in srgb, var(--pico-color) 3%, var(--pico-background-color));

  /* Modale / tooltip */
  --pico-modal-overlay-background-color: color-mix(in srgb, var(--pico-color) 45%, transparent);
  --pico-tooltip-background-color: var(--pico-color);
  --pico-tooltip-color: var(--pico-background-color);

  --pico-progress-background-color: var(--pico-muted-border-color);
  --pico-progress-color: var(--pico-primary-background);

  --pico-text-selection-color: color-mix(in srgb, var(--pico-primary-raw) 30%, transparent);
}


/* --------------------------------------------------------
   MODE SOMBRE (dérivé — à ajuster si besoin)
   Mêmes teintes que le clair, rôles inversés : le texte
   crème devient fond très sombre, le fond crème devient texte.
   -------------------------------------------------------- */

[data-theme=dark] {
  --pico-background-color: #212117;
  --pico-color: #f1f1e4;

  --pico-primary-raw: #3cdddd;
  --pico-primary: #3cdddd;
  --pico-primary-background: color-mix(in srgb, var(--pico-primary) 88%, black);
  --pico-primary-border: var(--pico-primary-background);
  --pico-primary-underline: color-mix(in srgb, var(--pico-primary) 55%, transparent);
  --pico-primary-hover: color-mix(in srgb, var(--pico-primary) 85%, white);
  --pico-primary-hover-background: color-mix(in srgb, var(--pico-primary-hover) 88%, black);
  --pico-primary-hover-border: var(--pico-primary-hover-background);
  --pico-primary-hover-underline: var(--pico-primary-hover);
  --pico-primary-focus: color-mix(in srgb, var(--pico-primary) 38%, transparent);
  --pico-primary-inverse: #0b0b07;

  --pico-secondary: color-mix(in srgb, var(--pico-color) 70%, var(--pico-background-color));
  --pico-secondary-background: color-mix(in srgb, var(--pico-color) 55%, var(--pico-background-color));
  --pico-secondary-border: var(--pico-secondary-background);
  --pico-secondary-hover: var(--pico-color);
  --pico-secondary-hover-background: color-mix(in srgb, var(--pico-color) 75%, var(--pico-background-color));
  --pico-secondary-hover-border: var(--pico-secondary-hover-background);
  --pico-secondary-inverse: var(--pico-background-color);

  --pico-contrast: var(--pico-color);
  --pico-contrast-background: var(--pico-color);
  --pico-contrast-border: var(--pico-contrast-background);
  --pico-contrast-hover: #fff;
  --pico-contrast-hover-background: #fff;
  --pico-contrast-hover-border: #fff;
  --pico-contrast-inverse: var(--pico-background-color);

  --pico-muted-color: color-mix(in srgb, var(--pico-color) 55%, var(--pico-background-color));
  --pico-muted-border-color: color-mix(in srgb, var(--pico-color) 14%, var(--pico-background-color));

  --pico-h1-color: var(--pico-color);
  --pico-h2-color: color-mix(in srgb, var(--pico-color) 92%, var(--pico-background-color));
  --pico-h3-color: color-mix(in srgb, var(--pico-color) 84%, var(--pico-background-color));
  --pico-h4-color: color-mix(in srgb, var(--pico-color) 76%, var(--pico-background-color));
  --pico-h5-color: color-mix(in srgb, var(--pico-color) 68%, var(--pico-background-color));
  --pico-h6-color: var(--pico-muted-color);

  --pico-mark-background-color: color-mix(in srgb, var(--pico-primary) 30%, var(--pico-background-color));
  --pico-mark-color: var(--pico-background-color);
  --pico-ins-color: color-mix(in srgb, var(--pico-primary) 75%, var(--pico-color));
  --pico-del-color: #d68a76;

  --pico-blockquote-border-color: var(--pico-muted-border-color);
  --pico-blockquote-footer-color: var(--pico-muted-color);

  --pico-table-border-color: var(--pico-muted-border-color);
  --pico-table-row-stripped-background-color: color-mix(in srgb, var(--pico-color) 5%, transparent);

  --pico-code-background-color: color-mix(in srgb, black 25%, var(--pico-background-color));
  --pico-code-color: color-mix(in srgb, var(--pico-color) 75%, var(--pico-background-color));
  --pico-code-kbd-background-color: var(--pico-color);
  --pico-code-kbd-color: var(--pico-background-color);

  --pico-form-element-background-color: color-mix(in srgb, black 15%, var(--pico-background-color));
  --pico-form-element-selected-background-color: color-mix(in srgb, var(--pico-color) 18%, var(--pico-background-color));
  --pico-form-element-border-color: color-mix(in srgb, var(--pico-color) 25%, var(--pico-background-color));
  --pico-form-element-color: var(--pico-color);
  --pico-form-element-placeholder-color: var(--pico-muted-color);
  --pico-form-element-active-background-color: color-mix(in srgb, black 15%, var(--pico-background-color));

  --pico-switch-background-color: var(--pico-muted-border-color);
  --pico-switch-color: var(--pico-background-color);
  --pico-range-border-color: var(--pico-muted-border-color);
  --pico-range-thumb-color: var(--pico-secondary-background);

  --pico-accordion-border-color: var(--pico-muted-border-color);
  --pico-accordion-close-summary-color: var(--pico-color);
  --pico-accordion-open-summary-color: var(--pico-muted-color);

  --pico-card-background-color: color-mix(in srgb, white 4%, var(--pico-background-color));
  --pico-card-border-color: var(--pico-card-background-color);
  --pico-card-sectioning-background-color: color-mix(in srgb, black 15%, var(--pico-background-color));

  --pico-modal-overlay-background-color: color-mix(in srgb, black 55%, transparent);
  --pico-tooltip-background-color: var(--pico-color);
  --pico-tooltip-color: var(--pico-background-color);

  --pico-progress-background-color: var(--pico-muted-border-color);
  --pico-progress-color: var(--pico-primary-background);
}

/* Dark auto (prefers-color-scheme) sans attribut data-theme explicite —
   redéfinit les mêmes variables que [data-theme=dark] ci-dessus, pour les
   visiteurs qui n'ont pas encore touché ton bouton de bascule. */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  :host(:not([data-theme])) {
    --pico-background-color: #212117;
    --pico-color: #f1f1e4;

    --pico-primary-raw: #3cdddd;
    --pico-primary: #3cdddd;
    --pico-primary-background: color-mix(in srgb, var(--pico-primary) 88%, black);
    --pico-primary-border: var(--pico-primary-background);
    --pico-primary-underline: color-mix(in srgb, var(--pico-primary) 55%, transparent);
    --pico-primary-hover: color-mix(in srgb, var(--pico-primary) 85%, white);
    --pico-primary-hover-background: color-mix(in srgb, var(--pico-primary-hover) 88%, black);
    --pico-primary-hover-border: var(--pico-primary-hover-background);
    --pico-primary-hover-underline: var(--pico-primary-hover);
    --pico-primary-focus: color-mix(in srgb, var(--pico-primary) 38%, transparent);
    --pico-primary-inverse: #0b0b07;

    --pico-secondary: color-mix(in srgb, var(--pico-color) 70%, var(--pico-background-color));
    --pico-secondary-background: color-mix(in srgb, var(--pico-color) 55%, var(--pico-background-color));
    --pico-secondary-border: var(--pico-secondary-background);
    --pico-secondary-hover: var(--pico-color);
    --pico-secondary-hover-background: color-mix(in srgb, var(--pico-color) 75%, var(--pico-background-color));
    --pico-secondary-hover-border: var(--pico-secondary-hover-background);
    --pico-secondary-inverse: var(--pico-background-color);

    --pico-contrast: var(--pico-color);
    --pico-contrast-background: var(--pico-color);
    --pico-contrast-border: var(--pico-contrast-background);
    --pico-contrast-hover: #fff;
    --pico-contrast-hover-background: #fff;
    --pico-contrast-hover-border: #fff;
    --pico-contrast-inverse: var(--pico-background-color);

    --pico-muted-color: color-mix(in srgb, var(--pico-color) 55%, var(--pico-background-color));
    --pico-muted-border-color: color-mix(in srgb, var(--pico-color) 14%, var(--pico-background-color));

    --pico-h1-color: var(--pico-color);
    --pico-h2-color: color-mix(in srgb, var(--pico-color) 92%, var(--pico-background-color));
    --pico-h3-color: color-mix(in srgb, var(--pico-color) 84%, var(--pico-background-color));
    --pico-h4-color: color-mix(in srgb, var(--pico-color) 76%, var(--pico-background-color));
    --pico-h5-color: color-mix(in srgb, var(--pico-color) 68%, var(--pico-background-color));
    --pico-h6-color: var(--pico-muted-color);

    --pico-mark-background-color: color-mix(in srgb, var(--pico-primary) 30%, var(--pico-background-color));
    --pico-mark-color: var(--pico-background-color);
    --pico-ins-color: color-mix(in srgb, var(--pico-primary) 75%, var(--pico-color));
    --pico-del-color: #d68a76;

    --pico-blockquote-border-color: var(--pico-muted-border-color);
    --pico-blockquote-footer-color: var(--pico-muted-color);

    --pico-table-border-color: var(--pico-muted-border-color);
    --pico-table-row-stripped-background-color: color-mix(in srgb, var(--pico-color) 5%, transparent);

    --pico-code-background-color: color-mix(in srgb, black 25%, var(--pico-background-color));
    --pico-code-color: color-mix(in srgb, var(--pico-color) 75%, var(--pico-background-color));
    --pico-code-kbd-background-color: var(--pico-color);
    --pico-code-kbd-color: var(--pico-background-color);

    --pico-form-element-background-color: color-mix(in srgb, black 15%, var(--pico-background-color));
    --pico-form-element-selected-background-color: color-mix(in srgb, var(--pico-color) 18%, var(--pico-background-color));
    --pico-form-element-border-color: color-mix(in srgb, var(--pico-color) 25%, var(--pico-background-color));
    --pico-form-element-color: var(--pico-color);
    --pico-form-element-placeholder-color: var(--pico-muted-color);
    --pico-form-element-active-background-color: color-mix(in srgb, black 15%, var(--pico-background-color));

    --pico-switch-background-color: var(--pico-muted-border-color);
    --pico-switch-color: var(--pico-background-color);
    --pico-range-border-color: var(--pico-muted-border-color);
    --pico-range-thumb-color: var(--pico-secondary-background);

    --pico-accordion-border-color: var(--pico-muted-border-color);
    --pico-accordion-close-summary-color: var(--pico-color);
    --pico-accordion-open-summary-color: var(--pico-muted-color);

    --pico-card-background-color: color-mix(in srgb, white 4%, var(--pico-background-color));
    --pico-card-border-color: var(--pico-card-background-color);
    --pico-card-sectioning-background-color: color-mix(in srgb, black 15%, var(--pico-background-color));

    --pico-modal-overlay-background-color: color-mix(in srgb, black 55%, transparent);
    --pico-tooltip-background-color: var(--pico-color);
    --pico-tooltip-color: var(--pico-background-color);

    --pico-progress-background-color: var(--pico-muted-border-color);
    --pico-progress-color: var(--pico-primary-background);
  }
}