/* ============================================================
   PLANTIDICO — DESIGN TOKENS
   Source : DESIGN.md v0.1 (2026-05-07) — DA2-d-eucalyptus
   Lu par tous les composants. Aucune valeur magique en dehors d'ici.
   ============================================================ */

/* Note Lot 2 : @import Google Fonts supprimé. Fonts désormais self-hosted via fontFace dans theme.json. */

:root {
  /* ============== COLORS ============== */

  /* Base & Surface */
  --color-base: #F7F4EE;
  --color-surface: #EBE6D9;
  --color-surface-accent: #DBD3BD;
  --color-surface-elevated: #FAFAF3;

  /* Semantic aliases (linen scale) */
  --linen: #F7F4EE;
  --linen-warm: #EBE6D9;
  --linen-deep: #DBD3BD;
  --linen-soft: #FAFAF3;

  /* Texte */
  --color-text: #1A1F1D;
  --color-text-soft: #383F3C;
  --color-text-mute: #767E7A;
  --ink: #1A1F1D;
  --ink-soft: #383F3C;
  --ink-mute: #767E7A;

  /* Accent primaire — Eucalyptus */
  --color-primary: #7E9082;
  --color-primary-deep: #3F4F44;
  --color-primary-pale: #BCC9BA;
  --color-primary-mist: #E2EAE2;
  --olive: #7E9082;
  --olive-deep: #3F4F44;
  --olive-pale: #BCC9BA;
  --olive-mist: #E2EAE2;

  /* Accent chaud — Pêche */
  --color-accent: #D49477;
  --color-accent-deep: #9E5E43;
  --color-accent-soft: #F2DDCD;
  --terra: #D49477;
  --terra-deep: #9E5E43;
  --terra-soft: #F2DDCD;

  /* Bordures */
  --line: rgba(26, 31, 29, 0.10);
  --line-strong: rgba(26, 31, 29, 0.20);
  --color-border: rgba(26, 31, 29, 0.10);
  --color-border-strong: rgba(26, 31, 29, 0.20);
  --color-focus: #7E9082;

  /* États sémantiques */
  --color-success: #7E9082;
  --color-error: #9E5E43;
  --color-info: #383F3C;
  --color-warning: #D49477;

  /* Overlays */
  --overlay-hero: linear-gradient(180deg, rgba(26, 31, 29, 0) 50%, rgba(26, 31, 29, 0.55) 100%);
  --overlay-hero-side: linear-gradient(90deg, rgba(26, 31, 29, 0.35) 0%, rgba(26, 31, 29, 0) 60%);
  --overlay-header: rgba(247, 244, 238, 0.92);
  --overlay-modal: rgba(26, 31, 29, 0.6);
  --overlay-drawer: rgba(26, 31, 29, 0.55);  /* drawer mobile (Lot 1.3 D2) */


  /* ============== TYPOGRAPHY ============== */

  /* Font families */
  --font-display: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;

  /* Heading sizes (Major Third 1.25 + clamp pour fluide) */
  --text-h1: clamp(2.5rem, 5vw, 3.5rem);
  --text-h2: clamp(2rem, 4vw, 2.75rem);
  --text-h3: clamp(1.5rem, 2.5vw, 2rem);
  --text-h4: 1.5rem;
  --text-h5: 1.125rem;
  --text-h6: 1rem;

  /* Body & specials */
  --text-body-l: 1.3125rem;
  --text-body-m: 1.0625rem;
  --text-body-s: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-eyebrow: 0.6875rem;
  --text-label: 0.625rem;

  /* Line heights par niveau */
  --leading-h1: 1.05;
  --leading-h2: 1.05;
  --leading-h3: 1.15;
  --leading-h4: 1.20;
  --leading-h5: 1.30;
  --leading-h6: 1.40;
  --leading-body-l: 1.45;
  --leading-body-m: 1.78;
  --leading-body-s: 1.65;
  --leading-caption: 1.55;

  /* Letter spacing par niveau */
  --tracking-h1: -0.094em;
  --tracking-h1-hero: -0.04em;
  --tracking-h2: -0.08em;
  --tracking-h3: -0.05em;
  --tracking-h4: -0.03em;
  --tracking-eyebrow: 0.16em;
  --tracking-label: 0.14em;
  --tracking-mono: 0.13em;

  /* Weights */
  --weight-display-bold: 700;
  --weight-display-extra: 800;
  --weight-display-semibold: 600;
  --weight-body-regular: 400;
  --weight-body-medium: 500;
  --weight-body-semibold: 600;
  --weight-body-bold: 700;
  --weight-mono: 500;


  /* ============== SPACING ============== */

  /* Échelle base 4px */
  --space-2: 0.25rem;   /* 4px */
  --space-4: 0.5rem;    /* 8px */
  --space-6: 0.75rem;   /* 12px */
  --space-8: 1rem;      /* 16px */
  --space-12: 1.5rem;   /* 24px */
  --space-16: 2rem;     /* 32px */
  --space-24: 3rem;     /* 48px */
  --space-32: 4rem;     /* 64px */
  --space-44: 5.5rem;   /* 88px */
  --space-48: 6rem;     /* 96px */
  --space-64: 8rem;     /* 128px */


  /* ============== LAYOUT ============== */

  --max-w: 80rem;        /* 1280px */
  --max-w-text: 46.25rem; /* 740px */
  --max-w-narrow: 36rem;  /* 576px */

  --container-padding: 2rem;        /* 32px desktop */
  --container-padding-mobile: 1.25rem; /* 20px mobile */

  --layout-fiche-sidebar: 240px;
  --layout-fiche-gap: 5.5rem; /* 88px */


  /* ============== BORDER RADIUS ============== */

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-3xl: 28px;
  --radius-pill: 999px;
  --radius-circle: 50%;


  /* ============== SHADOWS / ELEVATION ============== */

  --shadow-xs: 0 1px 2px rgba(20, 20, 15, 0.04);
  --shadow-sm: 0 1px 3px rgba(20, 20, 15, 0.06), 0 1px 0 rgba(20, 20, 15, 0.04);
  --shadow-md: 0 12px 32px -16px rgba(20, 20, 15, 0.18);
  --shadow-lg: 0 24px 48px -24px rgba(20, 20, 15, 0.24);
  --shadow-xl: 0 32px 64px -32px rgba(20, 20, 15, 0.30);
  --shadow-focus: 0 0 0 3px rgba(126, 144, 130, 0.30);
  --shadow-focus-error: 0 0 0 3px rgba(158, 94, 67, 0.20);


  /* ============== MOTION ============== */

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-default: 250ms;
  --duration-slow: 400ms;
  --duration-very-slow: 600ms;

  /* Transitions composées prêtes à l'emploi */
  --transition-color: color var(--duration-default) var(--ease-default);
  --transition-bg: background-color var(--duration-default) var(--ease-default);
  --transition-transform: transform var(--duration-default) var(--ease-default);
  --transition-shadow: box-shadow var(--duration-default) var(--ease-default);
  --transition-all: all var(--duration-default) var(--ease-default);


  /* ============== ICON SIZES ============== */
  /* Tailles d'icônes Phosphor (viewBox 256, stroke 24 Bold). Cohérent pour tous composants. */
  --icon-size-xs: 12px;   /* pills micro (blog-cat) */
  --icon-size-sm: 14px;   /* inline link arrow, sources-list */
  --icon-size-md: 16px;   /* botanical-table dt labels */
  --icon-size-lg: 20px;   /* h3/h4 inline (culinary-card) */
  --icon-size-xl: 22px;   /* cercle 32×32 (quick-facts, precaution-block) */
  --icon-size-2xl: 24px;  /* general / décoratif */


  /* ============== Z-INDEX SCALE ============== */

  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-tooltip: 2000;


  /* ============== LAYOUT GLOBAL ============== */

  --header-height: 5.25rem;  /* 84px — mesure réelle desktop sticky (Lot 1.3 D2) */


  /* ============== BREAKPOINTS (référence, non utilisables en CSS) ============== */

  /*
   --bp-mobile-s: 375px
   --bp-mobile:   480px
   --bp-tablet:   768px
   --bp-desktop:  960px
   --bp-desktop-l: 1280px
   --bp-desktop-xl: 1440px

   Utiliser : @media (min-width: 960px) { ... } directement.
  */
}


/* ============================================================
   BASE RESET — minimal, conforme à la philosophie du projet
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  line-height: var(--leading-body-m);
  font-weight: var(--weight-body-regular);
  color: var(--ink);
  background: var(--linen);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Focus visible accessibilité */
:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection {
  background: var(--olive-mist);
  color: var(--ink);
}


/* ============================================================
   TYPOGRAPHIE BASE — tokens appliqués
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
}

h1 {
  font-size: var(--text-h1);
  font-weight: var(--weight-display-bold);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
}

h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-display-bold);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
}

h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-display-semibold);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
}

h4 {
  font-size: var(--text-h4);
  font-weight: var(--weight-display-semibold);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-h4);
}

h5 {
  font-family: var(--font-body);
  font-size: var(--text-h5);
  font-weight: var(--weight-body-semibold);
  line-height: var(--leading-h5);
  letter-spacing: 0;
}

h6 {
  font-family: var(--font-body);
  font-size: var(--text-h6);
  font-weight: var(--weight-body-bold);
  line-height: var(--leading-h6);
  letter-spacing: 0;
}

p {
  font-size: var(--text-body-m);
  line-height: var(--leading-body-m);
  color: var(--ink);
}

p strong {
  font-weight: var(--weight-body-semibold);
  color: var(--ink);
}

p em {
  /* Italique RÉSERVÉ au latin scientifique des espèces */
  font-style: italic;
}

a {
  color: var(--olive-deep);
  text-decoration: underline;
  text-decoration-color: var(--olive-pale);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: var(--transition-color), text-decoration-color var(--duration-fast) var(--ease-default);
  font-weight: var(--weight-body-medium);
}

a:hover {
  text-decoration-color: var(--olive);
}

a:visited {
  color: var(--olive-deep);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}