/*
 * tokens.css — Otium
 * Source de vérité TECHNIQUE du design system.
 * Direction figée : Style 03 — Soft 2024 (glassmorphism, halos, gradients).
 * Palette : orange logo #f6911d + orange foncé #ef902d + crème + encre.
 */

:root {
  /* ========================================
     COULEURS — palette finale (4 valeurs)
     ======================================== */

  /* Orange (identité Otium) — palette « logo » validée sur l'accueil,
     appliquée uniformément à tout le site. Mapping « Foncé = principal ». */
  --color-orange: #f6911d;          /* Orange logo — usage plein (CTA, brand dot, halo, icônes) */
  --color-orange-deep: #ef902d;     /* Orange foncé — texte d'accent, dégradés, eyebrow */
  --color-orange-soft: #FBD38D;     /* Orange pâle — décoratif uniquement */

  /* Crème / blanc (fond) */
  --color-bg: #FAF7F2;              /* Crème principal — fond de page */
  --color-bg-warm: #FEF3D9;         /* Crème +1 cran chaud — début du gradient hero */
  --color-bg-alt: #F5EFE3;          /* Crème +1 cran neutre — sections alternées */
  --color-white: #FFFFFF;           /* Cards, surfaces glassy de base */

  /* Encre (texte) */
  --color-ink: #1A2332;             /* Presque-noir teinté — texte principal */
  --color-ink-soft: #5F6B7C;        /* Gris ardoise — texte secondaire */

  /* Lignes / bordures */
  --color-line: #E5DDD0;            /* Filet chaud sur fond crème */
  --color-line-glass: rgba(255, 255, 255, 0.5);  /* Bordure cards glassy */

  /* Surfaces glassy (Soft 2024 signature) */
  --glass-bg: rgba(255, 255, 255, 0.7);          /* Cards, eyebrow */
  --glass-bg-strong: rgba(255, 255, 255, 0.85);  /* Hover, focus */

  /* Canaux RGB pour reflets/halos en rgba() — orange clair #ffa901
     (halos plus lumineux que l'orange plein, comme sur l'accueil). */
  --c-orange-rgb: 255, 169, 1;

  /* Halos (radial gradients d'ambiance) — opacité douce pour transition progressive */
  --halo-orange: rgba(var(--c-orange-rgb), 0.22);
  --halo-orange-strong: rgba(var(--c-orange-rgb), 0.45);

  /* Sémantique */
  --color-success: #10B981;         /* Vert validation — badge Qualiopi */

  /* ========================================
     TYPOGRAPHIE — Inter (sans humaniste neutre)
     ======================================== */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Échelle typographique (fluide via clamp) */
  --text-xs: 0.8125rem;             /* 13px — meta, labels */
  --text-sm: 0.875rem;              /* 14px — UI secondaire */
  --text-base: 1rem;                /* 16px — corps */
  --text-md: 1.125rem;              /* 18px — lead, sous-titres */
  --text-lg: 1.25rem;               /* 20px — petits titres */
  --text-xl: clamp(1.5rem, 2.5vw, 1.875rem);    /* 24-30px — H3 */
  --text-2xl: clamp(2rem, 3.5vw, 2.75rem);      /* 32-44px — H2 */
  --text-3xl: clamp(2.5rem, 5vw, 3.75rem);      /* 40-60px — H1 */

  /* Line heights */
  --leading-tight: 1.05;
  --leading-snug: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.55;

  /* Tracking */
  --tracking-tight: -0.03em;        /* H1, H2 */
  --tracking-tighter: -0.04em;      /* H1 large */
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* Graisses Inter */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ========================================
     DÉGRADÉS SIGNATURES (Soft 2024)
     ======================================== */
  --gradient-hero: linear-gradient(180deg, #FEF3D9 0%, #FAF7F2 75%);
  /* Mots en couleur : orange clair à gauche → orange foncé à droite (comme le logo). */
  --gradient-text: linear-gradient(90deg, #ffa901 0%, #f6911d 100%);
  --gradient-icon: linear-gradient(135deg, #f6911d 0%, #ef902d 100%);
  --gradient-cta-finale: linear-gradient(180deg, #1A2332 0%, #0F1825 100%);

  /* ========================================
     COULEURS THÉMATIQUES SST (8) — roue des thématiques auditées.
     Tons jewel/terreux saturés (pas de pastel SaaS), lisibles avec
     une icône blanche par-dessus.
     ======================================== */
  --theme-c1: #C2410C;   /* terracotta */
  --theme-c2: #E08A1E;   /* ambre */
  --theme-c3: #7C7D2E;   /* olive */
  --theme-c4: #3E8E5A;   /* vert */
  --theme-c5: #0F8280;   /* teal */
  --theme-c6: #2F6DA0;   /* bleu acier */
  --theme-c7: #6A4C86;   /* prune */
  --theme-c8: #A23A54;   /* grenat */

  /* ========================================
     ESPACEMENTS (échelle 4/8)
     ======================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ========================================
     LAYOUT
     ======================================== */
  --container: 1200px;
  --container-narrow: 880px;
  --side-padding: 32px;

  /* ========================================
     BORDURES & RAYONS (généreux — Soft 2024)
     ======================================== */
  --radius-sm: 8px;                 /* Chips, badges */
  --radius-md: 12px;                /* Inputs */
  --radius-lg: 16px;                /* Petits blocs */
  --radius-xl: 20px;                /* Bandes stats */
  --radius-2xl: 24px;               /* Cards (par défaut) */
  --radius-3xl: 32px;               /* Hero visual, gros blocs */
  --radius-pill: 9999px;            /* Boutons, eyebrows */
  --border-width: 1px;

  /* ========================================
     OMBRES (soft multi-couches — signature Soft 2024)
     ======================================== */
  --shadow-sm: 0 2px 12px rgba(26, 35, 50, 0.04);
  --shadow-md: 0 8px 32px rgba(26, 35, 50, 0.06);
  --shadow-lg: 0 12px 40px rgba(26, 35, 50, 0.10);
  --shadow-orange: 0 6px 24px rgba(245, 166, 35, 0.4);
  --shadow-orange-strong: 0 10px 30px rgba(245, 166, 35, 0.5);
  --shadow-ink: 0 4px 16px rgba(26, 35, 50, 0.15);

  /* Filtres glassmorphism */
  --blur-glass: blur(20px);
  --blur-glass-light: blur(10px);
  --blur-halo: blur(90px);

  /* ========================================
     MOTION
     ======================================== */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-cinematic: 800ms; /* transitions de scène immersives (zoom bâtiment) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ========================================
     Z-INDEX
     ======================================== */
  --z-base: 0;
  --z-halo: 1;
  --z-content: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-megamenu: 300;
  --z-modal: 1000;
}

/* ========================================
   ADAPTATIONS RESPONSIVES
   ======================================== */
@media (max-width: 1024px) {
  :root {
    --side-padding: 24px;
  }
}

@media (max-width: 640px) {
  :root {
    --side-padding: 16px;
  }
}

/* ========================================
   PRÉFÉRENCES UTILISATEUR
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-cinematic: 0ms;
  }
}