/* ==========================================================================
   NAKÔBIO & BIOSAIN — DESIGN SYSTEM TOKENS
   Socle commun : typographie, échelle modulaire, espacements et surfaces
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Quicksand:wght@300;400;500;600;700&display=swap');

:root {
  /* ------------------------------------------------------------------------
     1. Fonderie typographique (Playfair Display × Quicksand)
     ------------------------------------------------------------------------ */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

  /* Échelle modulaire */
  --text-xs: 0.75rem;       /* 12px - légendes, notes, repères de plans */
  --text-sm: 0.875rem;      /* 14px - métadonnées, badges, boutons secondaires */
  --text-base: 1rem;        /* 16px - corps de texte par défaut */
  --text-lg: 1.125rem;      /* 18px - introductions, chapeaux de modules */
  --text-xl: 1.35rem;       /* 21.6px - intertitres h3, étapes clés */
  --text-2xl: 1.75rem;      /* 28px - titres de sections h2 */
  --text-3xl: 2.25rem;      /* 36px - grands titres h1 */
  --text-4xl: 3rem;         /* 48px - chiffres d'impact, hero banners */

  /* Hauteurs de ligne */
  --leading-tight: 1.15;    /* Titres en Newsreader */
  --leading-snug: 1.35;     /* Sous-titres */
  --leading-relaxed: 1.6;   /* Corps de texte en Inter */

  /* Poids */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ------------------------------------------------------------------------
     2. Surfaces & Encres neutres (Matières naturelles & sol)
     ------------------------------------------------------------------------ */
  --color-surface: #FFFDF6;          /* Fond chaud naturel (lin / papier parchemin) */
  --color-surface-card: #FFFFFF;     /* Cartes, fiches modules */
  --color-surface-sunken: #F4EED8;   /* Zones techniques, blocs d'étapes, callouts */
  --color-surface-muted: #F8F5EC;    /* Alternance tableaux, survols */

  --color-ink: #1B2318;              /* Noir végétal profond - lecture principale */
  --color-ink-soft: #43492F;         /* Vert olive sombre - textes secondaires */
  --color-ink-faint: #6B684E;        /* Terre d'ombre - métadonnées, légendes */
  --color-ink-inverted: #FFFDF6;     /* Texte sur fond sombre */

  --color-border: rgba(27, 35, 24, 0.12);       /* Bordures discrètes */
  --color-border-strong: rgba(27, 35, 24, 0.24);/* Séparateurs structurants */

  /* ------------------------------------------------------------------------
     3. États fonctionnels
     ------------------------------------------------------------------------ */
  --color-success: #2F7244;
  --color-success-bg: #EAF4EE;
  --color-warning: #C97A1E;
  --color-warning-bg: #FDF4E7;
  --color-danger: #B23A2E;
  --color-danger-bg: #FAECEB;
  --color-info: #2B6282;
  --color-info-bg: #EBF4F9;

  /* ------------------------------------------------------------------------
     4. Système d'espacement (Grille modulaire base 4px / 8px)
     ------------------------------------------------------------------------ */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  /* ------------------------------------------------------------------------
     5. Rayons de courbure (Arrondis doux & naturels)
     ------------------------------------------------------------------------ */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ------------------------------------------------------------------------
     6. Ombres subtiles (Lumière zénithale douce)
     ------------------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(27, 35, 24, 0.05);
  --shadow-md: 0 4px 12px rgba(27, 35, 24, 0.08);
  --shadow-lg: 0 12px 24px -4px rgba(27, 35, 24, 0.12);

  /* ------------------------------------------------------------------------
     7. Valeurs de marque par défaut (Fallback vers Nakôbio)
     ------------------------------------------------------------------------ */
  --color-brand-primary: #2F4A34;
  --color-brand-secondary: #C86832;
  --color-brand-accent: #E0A030;
  --color-brand-primary-light: #416749;
  --color-brand-primary-dark: #1E3324;

  /* ------------------------------------------------------------------------
     8. Animations & Transitions
     ------------------------------------------------------------------------ */
  --transition-fast: 100ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ------------------------------------------------------------------------
     9. Effets de flou (Glassmorphism)
     ------------------------------------------------------------------------ */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 32px;

  /* ------------------------------------------------------------------------
     10. Surfaces Hero & Gradients
     ------------------------------------------------------------------------ */
  --color-surface-hero: #F0E8CC;        /* Gradient end point pour hero */
  --gradient-hero: linear-gradient(180deg, #FFFDF6 0%, #F4EED8 100%);
  --gradient-brand: linear-gradient(135deg, var(--color-brand-primary-dark) 0%, var(--color-brand-primary) 100%);
  --gradient-accent: linear-gradient(135deg, var(--color-brand-secondary) 0%, var(--color-brand-accent) 100%);
  --gradient-surface-card: linear-gradient(145deg, #FFFFFF 0%, #FAFAF4 100%);
}