/*
 * Papillote — jetons de design (préfixe --pa-).
 *
 * Palette « famille ePoc » (docs/DESIGN.md) : encre indigo, framboise, lagon et doré sur papier
 * chaud, plus une couleur par type d'activité. Aucune valeur n'est reprise du lecteur ePoc.
 * Chaque couple texte/fond est vérifié par tests/tokens.test.js (AA, 4,5:1).
 *
 * Thème : selon le système, ou forcé par [data-theme="dark"] / [data-theme="light"] sur <html>.
 * Les composants n'utilisent jamais de couleur brute, seulement ces jetons.
 */

:root {
  color-scheme: light;

  /* Fonds et encres */
  --pa-paper: #FBF8F3;
  --pa-paper-deep: #F4EEE4;
  --pa-surface: #FFFFFF;
  --pa-surface-raised: #FFFFFF;
  --pa-ink: #232845;
  --pa-ink-soft: #5A6080;
  --pa-line: #E6E0D6;
  --pa-line-strong: #CFC7BA;

  /* Couleurs de marque */
  --pa-accent: #C8235F;
  --pa-accent-strong: #A8164C;
  --pa-accent-ink: #FFFFFF;
  --pa-accent-soft: #FDE4EC;
  --pa-lagoon: #0B7190;
  --pa-lagoon-ink: #FFFFFF;
  --pa-lagoon-soft: #DCF1F7;
  --pa-gold: #F5A623;
  --pa-gold-ink: #8F5B00;
  --pa-gold-soft: #FFF0D4;
  --pa-on-gold: #232845;

  /* États */
  --pa-success: #1E7536;
  --pa-success-soft: #E2F5E7;
  --pa-warning: #A85400;
  --pa-warning-soft: #FFEBD6;
  --pa-danger: #B42318;
  --pa-danger-soft: #FDE3E0;
  --pa-focus: #0B7190;

  /* Une couleur par type d'activité : forte (texte, pictogramme) et teinte (fond de carte) */
  --pa-raspberry: #C8235F;
  --pa-raspberry-soft: #FDE4EC;
  --pa-violet: #6B3FC4;
  --pa-violet-soft: #EEE6FC;
  --pa-mint: #17784F;
  --pa-mint-soft: #DBF3E7;
  --pa-indigo: #3646A8;
  --pa-indigo-soft: #E3E7FA;
  --pa-plum: #8E2A77;
  --pa-plum-soft: #F7E3F2;
  --pa-slate: #232845;
  --pa-slate-soft: #ECEAF2;

  /* Bande sombre (« Comment ça marche ») : identique dans les deux thèmes */
  --pa-night: #1B1F3A;
  --pa-night-raised: #262B4D;
  --pa-night-ink: #EEF0F8;
  --pa-night-ink-soft: #B6BBD6;

  /* Dégradés de marque (décor) */
  --pa-gradient-candy: linear-gradient(135deg, #FF7AA8 0%, #C8235F 45%, #F5A623 100%);
  --pa-gradient-lagoon: linear-gradient(135deg, #4FD0F2 0%, #0B7190 100%);
  --pa-glow-raspberry: rgb(200 35 95 / 0.18);
  --pa-glow-lagoon: rgb(11 113 144 / 0.16);
  --pa-glow-gold: rgb(245 166 35 / 0.22);


  /* Typographie : Fraunces (titres) + Atkinson Hyperlegible Next (texte), polices libres et lisibles */
  --pa-font-title: "Fraunces", Georgia, "Times New Roman", serif;
  --pa-font-text: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pa-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --pa-title-weight: 620;
  --pa-title-variation: "SOFT" 100, "WONK" 0;
  --pa-title-tracking: -0.015em;

  --pa-text-xs: 0.8125rem;
  --pa-text-sm: 0.875rem;
  --pa-text-md: 1rem;
  --pa-text-lg: 1.125rem;
  --pa-text-xl: 1.375rem;
  --pa-text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --pa-text-3xl: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  --pa-text-display: clamp(2.4rem, 1.2rem + 4.8vw, 4.6rem);

  /* Espacements (pas de 4 px), rayons, ombres, mouvement */
  --pa-space-1: 0.25rem;
  --pa-space-2: 0.5rem;
  --pa-space-3: 0.75rem;
  --pa-space-4: 1rem;
  --pa-space-5: 1.25rem;
  --pa-space-6: 1.5rem;
  --pa-space-8: 2rem;
  --pa-space-10: 2.5rem;
  --pa-space-12: 3rem;
  --pa-space-16: 4rem;
  --pa-space-20: 5rem;
  --pa-radius-sm: 8px;
  --pa-radius-md: 12px;
  --pa-radius-lg: 20px;
  --pa-radius-xl: 28px;
  --pa-radius-pill: 999px;
  --pa-shadow-1: 0 1px 2px rgb(35 40 69 / 0.06), 0 1px 1px rgb(35 40 69 / 0.04);
  --pa-shadow-2: 0 6px 18px rgb(35 40 69 / 0.08), 0 2px 4px rgb(35 40 69 / 0.05);
  --pa-shadow-3: 0 18px 44px rgb(35 40 69 / 0.14), 0 4px 10px rgb(35 40 69 / 0.06);
  --pa-duration-fast: 120ms;
  --pa-duration-base: 200ms;
  --pa-duration-slow: 320ms;
  --pa-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --pa-target-min: 44px;
  --pa-content-width: 72rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --pa-paper: #14172A;
    --pa-paper-deep: #101322;
    --pa-surface: #1D2138;
    --pa-surface-raised: #252A47;
    --pa-ink: #EEF0F8;
    --pa-ink-soft: #AEB3CC;
    --pa-line: #343A5C;
    --pa-line-strong: #4A5180;
    --pa-accent: #FF7AA8;
    --pa-accent-strong: #FF9DBE;
    --pa-accent-ink: #14172A;
    --pa-accent-soft: #3A1C2C;
    --pa-lagoon: #4FD0F2;
    --pa-lagoon-ink: #14172A;
    --pa-lagoon-soft: #12313F;
    --pa-gold: #F5B84A;
    --pa-gold-ink: #F5B84A;
    --pa-gold-soft: #3A2C12;
    --pa-on-gold: #14172A;
    --pa-success: #6FD38A;
    --pa-success-soft: #15321F;
    --pa-warning: #FFB25C;
    --pa-warning-soft: #3A2612;
    --pa-danger: #FF8A80;
    --pa-danger-soft: #3D1A18;
    --pa-focus: #4FD0F2;
    --pa-raspberry: #FF7AA8;
    --pa-raspberry-soft: #3A1C2C;
    --pa-violet: #B79CFF;
    --pa-violet-soft: #2B2143;
    --pa-mint: #6FD3A4;
    --pa-mint-soft: #14332A;
    --pa-indigo: #9DAAFF;
    --pa-indigo-soft: #1E2448;
    --pa-plum: #F08BD8;
    --pa-plum-soft: #36193A;
    --pa-slate: #EEF0F8;
    --pa-slate-soft: #262A44;
    --pa-night: #0E1124;
    --pa-night-raised: #1A1E38;
    --pa-glow-raspberry: rgb(255 122 168 / 0.16);
    --pa-glow-lagoon: rgb(79 208 242 / 0.12);
    --pa-glow-gold: rgb(245 184 74 / 0.14);
    --pa-shadow-1: 0 1px 2px rgb(0 0 0 / 0.35);
    --pa-shadow-2: 0 6px 18px rgb(0 0 0 / 0.35), 0 2px 4px rgb(0 0 0 / 0.25);
    --pa-shadow-3: 0 18px 44px rgb(0 0 0 / 0.45), 0 4px 10px rgb(0 0 0 / 0.3);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --pa-paper: #14172A;
  --pa-paper-deep: #101322;
  --pa-surface: #1D2138;
  --pa-surface-raised: #252A47;
  --pa-ink: #EEF0F8;
  --pa-ink-soft: #AEB3CC;
  --pa-line: #343A5C;
  --pa-line-strong: #4A5180;
  --pa-accent: #FF7AA8;
  --pa-accent-strong: #FF9DBE;
  --pa-accent-ink: #14172A;
  --pa-accent-soft: #3A1C2C;
  --pa-lagoon: #4FD0F2;
  --pa-lagoon-ink: #14172A;
  --pa-lagoon-soft: #12313F;
  --pa-gold: #F5B84A;
  --pa-gold-ink: #F5B84A;
  --pa-gold-soft: #3A2C12;
  --pa-on-gold: #14172A;
  --pa-success: #6FD38A;
  --pa-success-soft: #15321F;
  --pa-warning: #FFB25C;
  --pa-warning-soft: #3A2612;
  --pa-danger: #FF8A80;
  --pa-danger-soft: #3D1A18;
  --pa-focus: #4FD0F2;
  --pa-raspberry: #FF7AA8;
  --pa-raspberry-soft: #3A1C2C;
  --pa-violet: #B79CFF;
  --pa-violet-soft: #2B2143;
  --pa-mint: #6FD3A4;
  --pa-mint-soft: #14332A;
  --pa-indigo: #9DAAFF;
  --pa-indigo-soft: #1E2448;
  --pa-plum: #F08BD8;
  --pa-plum-soft: #36193A;
  --pa-slate: #EEF0F8;
  --pa-slate-soft: #262A44;
  --pa-night: #0E1124;
  --pa-night-raised: #1A1E38;
  --pa-glow-raspberry: rgb(255 122 168 / 0.16);
  --pa-glow-lagoon: rgb(79 208 242 / 0.12);
  --pa-glow-gold: rgb(245 184 74 / 0.14);
  --pa-shadow-1: 0 1px 2px rgb(0 0 0 / 0.35);
  --pa-shadow-2: 0 6px 18px rgb(0 0 0 / 0.35), 0 2px 4px rgb(0 0 0 / 0.25);
  --pa-shadow-3: 0 18px 44px rgb(0 0 0 / 0.45), 0 4px 10px rgb(0 0 0 / 0.3);
}