/* Vetossimo — jetons de design.
   Palette vert & or. Tous les contrastes ont été calculés (formule WCAG) : voir docs/specs/DESIGN-SYSTEM.md.
   Règle d'or : sur fond clair, l'or de marque (--gold-500) ne sert JAMAIS de couleur de texte (2,95:1).
   Texte doré = --gold-text (bronze, 5,95:1) ; icône dorée porteuse de sens = --gold-ui (3,88:1). */

@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin-full-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/fonts/fraunces-latin-ext-full-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'InterVar';
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'InterVar';
  src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* ---------- Palette de marque (invariante) ---------- */
  --green-900: #0F2E22;
  --green-800: #143D2C;
  --green-700: #1B4D3A;
  --green-600: #236B4E;
  --green-500: #2F8461;
  --green-300: #8BBFA5;
  --green-100: #DCEBE2;
  --green-50:  #EEF5F0;
  --gold-500: #B8892B;
  --gold-400: #C9A24B;
  --gold-300: #DDBE7A;
  --gold-100: #F5E9C8;
  --gold-50:  #FBF5E4;
  --gold-ui:  #A0751A;   /* icône / filet porteur de sens sur fond clair — 3,88:1 */
  --gold-text:#7A5A12;   /* bronze : le seul « or » utilisable en texte sur clair — 5,95:1 */

  /* ---------- Rôles : thème clair ---------- */
  --bg:            #F5F1E8;   /* plan de page */
  --surface:       #FAF7F0;   /* ivoire : cartes, barres */
  --surface-2:     #FFFFFF;   /* surface élevée : modales, champs */
  --surface-sunken:#F1ECE0;   /* sable : zones en creux, en-têtes de tableau */
  --surface-brand: var(--green-700);
  --surface-tint:  var(--green-50);

  --text:        #1E2420;
  --text-muted:  #5A574C;
  --text-faint:  #76725F;
  --text-on-brand: #FAF7F0;
  --text-accent: var(--gold-text);

  --primary:        var(--green-700);
  --primary-hover:  var(--green-600);
  --primary-active: var(--green-800);
  --primary-contrast: #FFFFFF;
  --accent:         var(--gold-500);
  --accent-soft:    var(--gold-100);
  --on-accent:      var(--green-900);   /* texte/icône sur bouton doré — 4,64:1 */

  --border:       #DDD5C3;   /* filet décoratif */
  --border-strong:#8C8372;   /* bordure de champ — 3,5:1 */
  --focus:        var(--green-700);

  --success: #1E7A46; --success-bg: #E3F3E8;
  --warning: #8A5A00; --warning-icon: #A86500; --warning-bg: #FCEFC9;
  --danger:  #B3261E; --danger-bg:  #FBE6E3;
  --info:    #1F5F8B; --info-bg:    #E2EEF6;

  /* Séries de graphiques — doublées par étiquettes directes, jamais la couleur seule */
  --series-dog:   #236B4E;
  --series-cat:   #A8741A;
  --series-3:     #3B6E8F;
  --series-4:     #B5533C;
  --series-5:     #6B4C7A;
  --series-male:  #3B6E8F;
  --series-female:#B5533C;
  --grid:         #E3DED0;
  --axis:         #B8B1A0;
  --chart-ref:    #8BBFA5;   /* bande de référence (littérature) */

  --qr-dark: var(--green-900);
  --qr-light: #FFFFFF;

  /* ---------- Typographie ---------- */
  --font-title: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'InterVar', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

  --text-xs: 0.75rem;   /* 12 */
  --text-sm: 0.875rem;  /* 14 */
  --text-md: 1rem;      /* 16 — corps */
  --text-lg: 1.125rem;  /* 18 */
  --text-xl: 1.375rem;  /* 22 */
  --text-2xl: 1.75rem;  /* 28 */
  --text-3xl: 2.25rem;  /* 36 */
  --text-4xl: 3rem;     /* 48 */

  /* ---------- Espacement (grille de 4) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* ---------- Rayons ---------- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* ---------- Ombres (teintées de vert, jamais grises) ---------- */
  --shadow-1: 0 1px 2px rgba(15, 46, 34, .06), 0 1px 1px rgba(15, 46, 34, .04);
  --shadow-2: 0 4px 12px rgba(15, 46, 34, .08);
  --shadow-3: 0 12px 32px rgba(15, 46, 34, .12);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .6);

  /* ---------- Icônes ----------
     Taille AFFICHÉE des icônes, fixée par contexte dans le CSS (les width/height CSS l'emportent
     sur les attributs du SVG ; la valeur passée à icon() n'est qu'un repli). */
  --icon-xs: 16px;    /* dans un badge ; plancher de toute icône */
  --icon-sm: 18px;    /* métadonnée en ligne (espèce à côté de la race), petit bouton */
  --icon-md: 20px;    /* bouton, onglet, ligne de liste */
  --icon-lg: 24px;    /* navigation, bouton-icône, grand bouton, en-tête de carte, bandeau, pastille d'entrée */
  --icon-xl: 28px;    /* bouton QR central, tuiles « Scanner / Saisir / Dicter », document */
  --icon-2xl: 40px;   /* micro de dictée, état d'erreur, intégrité du journal */
  --icon-3xl: 60px;   /* état vide */
  --avatar-icon: 60%; /* part de la pastille d'avatar occupée par l'icône d'espèce */

  /* ---------- Marque ---------- */
  --logo-plate: transparent;   /* pastille sous le logo : invisible sur l'ivoire du thème clair */

  /* ---------- Divers ---------- */
  --tap: 44px;              /* cible tactile minimale */
  --header-h: 64px;
  --tabbar-h: 68px;
  --sidebar-w: 264px;
  --content-max: 1200px;
  --transition: 160ms cubic-bezier(.2, .8, .3, 1);
}

/* ---------- Thème sombre ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #0E1612;
    --surface: #15211B;
    --surface-2: #1D2C24;
    --surface-sunken: #111A15;
    --surface-brand: #15211B;
    --surface-tint: #17251E;

    --text: #ECE8DC;
    --text-muted: #A9B3A8;
    --text-faint: #8C9A8E;
    --text-on-brand: #ECE8DC;
    --text-accent: #E0B85A;

    --primary: #7CC8A2;
    --primary-hover: #93D6B3;
    --primary-active: #6ABB94;
    --primary-contrast: #0F2E22;
    --accent: #E0B85A;
    --accent-soft: #2A2416;
    --on-accent: #0F2E22;
    --gold-ui: #E0B85A;
    --gold-text: #E0B85A;

    --border: #2E4236;
    --border-strong: #6F8577;
    --focus: #7CC8A2;

    --success: #6DD394; --success-bg: #14301F;
    --warning: #F2C14E; --warning-icon: #F2C14E; --warning-bg: #302710;
    --danger:  #FF8A80; --danger-bg:  #33191A;
    --info:    #7DB9E8; --info-bg:    #14273A;

    --series-dog: #7CC8A2;
    --series-cat: #E0B85A;
    --series-3: #7DB9E8;
    --series-4: #F0917A;
    --series-5: #B79AD0;
    --series-male: #7DB9E8;
    --series-female: #F0917A;
    --grid: #263830;
    --axis: #4A5C51;
    --chart-ref: #38564A;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, .45);
    --shadow-3: 0 12px 32px rgba(0, 0, 0, .55);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .04);

    --logo-plate: #FAF7F0;   /* pastille ivoire : le vert foncé du logo reste lisible */
  }
}

/* ---------- Bascule manuelle (prioritaire sur le réglage système) ---------- */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0E1612;
  --surface: #15211B;
  --surface-2: #1D2C24;
  --surface-sunken: #111A15;
  --surface-brand: #15211B;
  --surface-tint: #17251E;

  --text: #ECE8DC;
  --text-muted: #A9B3A8;
  --text-faint: #8C9A8E;
  --text-on-brand: #ECE8DC;
  --text-accent: #E0B85A;

  --primary: #7CC8A2;
  --primary-hover: #93D6B3;
  --primary-active: #6ABB94;
  --primary-contrast: #0F2E22;
  --accent: #E0B85A;
  --accent-soft: #2A2416;
  --on-accent: #0F2E22;
  --gold-ui: #E0B85A;
  --gold-text: #E0B85A;

  --border: #2E4236;
  --border-strong: #6F8577;
  --focus: #7CC8A2;

  --success: #6DD394; --success-bg: #14301F;
  --warning: #F2C14E; --warning-icon: #F2C14E; --warning-bg: #302710;
  --danger:  #FF8A80; --danger-bg:  #33191A;
  --info:    #7DB9E8; --info-bg:    #14273A;

  --series-dog: #7CC8A2;
  --series-cat: #E0B85A;
  --series-3: #7DB9E8;
  --series-4: #F0917A;
  --series-5: #B79AD0;
  --series-male: #7DB9E8;
  --series-female: #F0917A;
  --grid: #263830;
  --axis: #4A5C51;
  --chart-ref: #38564A;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, .45);
  --shadow-3: 0 12px 32px rgba(0, 0, 0, .55);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .04);

  --logo-plate: #FAF7F0;   /* pastille ivoire : le vert foncé du logo reste lisible */
}