/* ============================================================
   FATAPLUS DESIGN SYSTEM — TOKENS
   Atoms: Design tokens as CSS custom properties
   Source: fataplus.pen (Relume kit, customisé FATAPLUS)
   Verified: MDN CSS custom properties (Baseline, widely available)
   ============================================================ */

:root {
  /* ============================================================
     COLORS — 46 couleurs extraites du .pen, organisées par rôle
     ============================================================ */

  /* Brand primaries */
  --ink: #08040A;              /* Noir chaud. Texte principal, ultra-dark bg */
  --brand: #08583F;            /* Vert FATAPLUS (logo). Deep forest */
  --brand-secondary: #0B6E4F;  /* Vert accent. Liens, focus rings */
  --brand-light: #CEE2DB;      /* Vert pale. Fonds hover */
  --brand-lighter: #E6F0ED;    /* Vert quasi-blanc. Surfaces */
  --brand-dark: #032117;       /* Vert-noir. Fonds sombres */
  --brand-darker: #042C1F;     /* Vert profond. Sections immersives */

  /* Accent categoricals */
  --accent-coral: #CC6147;
  --accent-coral-bright: #FF7262;
  --accent-coral-light: #FFA18A;
  --accent-coral-bg: #FFE4DD;
  --accent-purple: #7B3C99;
  --accent-purple-bright: #9A4CC0;
  --accent-purple-bg: #EADBF2;
  --accent-blue: #224B86;
  --accent-blue-bright: #2B5EA8;
  --accent-blue-bg: #D4DEED;

  /* Neutrals */
  --white: #FFFFFF;
  --neutral-50: #F1F0EE;
  --neutral-100: #F2F2F2;
  --neutral-200: #D9D9DA;
  --neutral-400: #B4B3B5;
  --neutral-500: #838184;
  --neutral-700: #524F53;
  --neutral-900: #201D22;
  --neutral-950: #161616;

  /* Overlays & opacity */
  --overlay-light: rgba(8, 4, 10, 0.15);
  --overlay-medium: rgba(8, 4, 10, 0.60);
  --overlay-dark: rgba(0, 0, 0, 0.40);
  --overlay-hover: rgba(0, 0, 0, 0.10);
  --border-subtle: rgba(8, 4, 10, 0.15);
  --border-dark: rgba(255, 255, 255, 0.20);
  --border-brand: #0B6E4F;
  --border-emphasized: #08040A;

  /* ============================================================
     TYPOGRAPHY — Echelle géométrique base 14 × ratio 1.2
     MDN: clamp() Baseline widely available since July 2020
     ============================================================ */

  /* Display (BIZ UDPMincho) */
  --font-display: clamp(2.5rem, 8vw, 5.25rem);   /* 84px max, 40px min */
  --font-display-lh: 1.1;
  --font-display-ls: -0.84px;

  /* Headings (BIZ UDPMincho) */
  --font-h1: clamp(2rem, 5vw, 3.75rem);           /* 60px max */
  --font-h1-lh: 1.2;
  --font-h1-ls: -0.6px;

  --font-h2: clamp(1.5rem, 4vw, 3rem);            /* 48px max */
  --font-h2-lh: 1.3;
  --font-h2-ls: -0.48px;

  --font-h3: clamp(1.25rem, 3vw, 2rem);           /* 32px max */
  --font-h3-lh: 1.3;
  --font-h3-ls: -0.32px;

  --font-h4: clamp(1.125rem, 2vw, 1.625rem);      /* 26px max */
  --font-h4-lh: 1.5;

  /* Body (Inter) */
  --font-body: clamp(1rem, 1.5vw, 1.125rem);      /* 18px max */
  --font-body-lh: 1.5;

  --font-ui: 1rem;                                /* 16px fixed */
  --font-ui-lh: 1.5;

  --font-label: 1rem;                             /* 16px, weight 600 */
  --font-caption: 0.875rem;                       /* 14px, weight 600 */
  --font-tiny: 0.75rem;                           /* 12px */

  /* Stat numbers */
  --font-stat: clamp(3rem, 7vw, 5rem);            /* 80px max */
  --font-stat-lh: 1.0;
  --font-stat-ls: -0.8px;

  /* Font families */
  --font-family-display: 'BIZ UDPMincho', Georgia, 'Times New Roman', serif;
  --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'Roboto Mono', 'SF Mono', Monaco, Consolas, monospace;

  /* Font weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ============================================================
     SPACING — Echelle 4px
     ============================================================ */

  --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 */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-28: 7rem;     /* 112px */
  --space-32: 8rem;     /* 128px */

  /* Container */
  --container-max: 90rem;          /* 1440px */
  --container-padding: clamp(1.25rem, 5vw, 4rem);  /* 20px mobile → 64px desktop */

  /* Section padding */
  --section-padding-y: clamp(3rem, 8vw, 7rem);     /* 48px mobile → 112px desktop */

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

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* ============================================================
     SHADOWS — 7 tiers extraits du .pen, tous directionnels
     MDN: box-shadow Baseline widely available
     ============================================================ */

  --shadow-xxsmall: 0 1px 1.75px 0 rgba(0, 0, 0, 0.051);
  --shadow-xsmall: 0 1px 1.75px 0 rgba(0, 0, 0, 0.059), 0 1px 2.625px 0 rgba(0, 0, 0, 0.102);
  --shadow-small: 0 2px 3.5px -2px rgba(0, 0, 0, 0.059), 0 4px 7px -2px rgba(0, 0, 0, 0.102);
  --shadow-medium: 0 4px 5.25px -2px rgba(0, 0, 0, 0.031), 0 12px 14px -4px rgba(0, 0, 0, 0.078);
  --shadow-large: 0 8px 7px -4px rgba(0, 0, 0, 0.031), 0 20px 21px -4px rgba(0, 0, 0, 0.078);
  --shadow-xlarge: 0 24px 42px -12px rgba(0, 0, 0, 0.180);
  --shadow-xxlarge: 0 32px 56px -12px rgba(0, 0, 0, 0.141);

  /* ============================================================
     MOTION — Duration + easing tokens
     MDN: transition Baseline widely available
     ============================================================ */

  --duration-instant: 130ms;
  --duration-fast: 175ms;
  --duration-normal: 310ms;
  --duration-medium: 410ms;
  --duration-slow: 730ms;

  --ease-standard: cubic-bezier(0.24, 1, 0.4, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

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

  --z-base: 0;
  --z-content: 10;
  --z-nav: 100;
  --z-overlay: 1000;
  --z-modal: 2000;
  --z-toast: 3000;

  /* ============================================================
     BREAKPOINTS (reference only — use clamp() + container queries)
     ============================================================ */

  --bp-mobile: 375px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;
}

/* ============================================================
   DARK MODE OVERRIDES
   MDN: light-dark() Baseline 2024, but we use class-based toggle
   for Safari < 18 compatibility
   ============================================================ */

:root[data-theme="dark"] {
  --bg-body: var(--ink);
  --bg-surface: var(--neutral-950);
  --bg-elevated: var(--neutral-900);
  --text-primary: var(--white);
  --text-secondary: var(--neutral-400);
  --text-tertiary: var(--neutral-500);
  --border-default: var(--border-dark);
  --border-hover: rgba(255, 255, 255, 0.15);
}

:root[data-theme="light"],
:root {
  --bg-body: var(--white);
  --bg-surface: var(--neutral-50);
  --bg-elevated: var(--white);
  --text-primary: var(--ink);
  --text-secondary: var(--neutral-700);
  --text-tertiary: var(--neutral-500);
  --border-default: var(--border-subtle);
  --border-hover: rgba(8, 4, 10, 0.25);
}