/* ============================================
   Yotipro Méditerranée — Design Tokens
   Palette alignée sur l'application Yotipro (navy #0F4C81 / copper #C17F59)
   ============================================ */

:root {
  /* Colors — Primary */
  --abyss: #051E36;
  --abyss-deep: #031525;          /* R13 — fond le plus sombre (sections show) */
  --abyss-light: #082C4E;         /* R13 — élévation 1 sur abyss (cards) */
  --midnight: #082C4E;
  --midnight-2: #0B3A66;
  --ivory: #FAFBFD;
  --ivory-2: #F0F4F8;
  --pearl: #FFFFFF;
  --brass: #C17F59;
  --brass-deep: #985C36;
  --brass-soft: #D4A574;
  --slate: #4A5B70;
  --slate-2: #5A6B7F;
  --slate-soft: #8899AB;          /* R13 — texte secondaire sur fond abyss (WCAG AA ≥ 4.5:1 sur #06111E) */
  --ink: #0C1829;
  --rule: #E2E8F0;
  --rule-dark: #103759;
  --ivory-muted: rgba(232, 237, 243, 0.74);  /* R13 — texte body courant sur abyss */
  --ivory-soft:  rgba(232, 237, 243, 0.88);  /* R13 — lede italique sur abyss */
  --rule-brass-dark: rgba(193, 127, 89, 0.26); /* R13 — filets brass sur abyss */

  /* Colors — Functional (rare usage) */
  --emergency: #DC2626;
  --emergency-soft: #F08A7A;
  --success: #059669;
  --info: #0F4C81;

  /* Typography families */
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-serif:   "Fraunces", Georgia, serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Font sizes */
  --fs-hero: clamp(3.5rem, 8vw, 7.5rem);
  --fs-display: clamp(2.75rem, 6vw, 5.25rem);
  --fs-h1: clamp(2.25rem, 4.5vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 3.2vw, 2.625rem);
  --fs-h3: clamp(1.375rem, 2vw, 1.75rem);
  --fs-h4: 1.25rem;
  --fs-eyebrow: 0.8125rem;
  --fs-lede: 1.375rem;
  --fs-body: 1.0625rem;
  --fs-body-serif: 1.125rem;
  --fs-small: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-mono: 0.875rem;
  --fs-legal: 0.75rem;

  /* Line-heights */
  --lh-display: 0.95;
  --lh-tight: 1.05;
  --lh-snug: 1.15;
  --lh-base: 1.5;
  --lh-relaxed: 1.65;
  --lh-loose: 1.75;

  /* Letter-spacing */
  --ls-display: -0.025em;
  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-normal: 0;
  --ls-eyebrow: 0.16em;
  --ls-mono: 0.04em;

  /* Spacing (4pt grid) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;
  --s-12: 256px;

  /* Containers */
  --container-prose: 680px;
  --container-narrow: 920px;
  --container-wide: 1280px;
  --container-ultra: 1440px;
  --pad-x: 1.5rem;

  /* Radius */
  --r-0: 0;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  /* Shadows */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(12,24,41,.03), 0 4px 16px rgba(12,24,41,.02);
  --shadow-2: 0 2px 8px rgba(12,24,41,.05), 0 8px 28px rgba(12,24,41,.045);
  --shadow-3: 0 4px 12px rgba(12,24,41,.06), 0 18px 44px rgba(12,24,41,.08);
  --shadow-glow-brass: 0 0 0 1px rgba(193,127,89,.32), 0 8px 24px -4px rgba(193,127,89,.20);
  --shadow-inset-dark: inset 0 1px 0 0 rgba(255,255,255,.04);
  --shadow-ring: 0 0 0 2px var(--brass), 0 0 0 4px var(--ivory);

  /* Transitions */
  --t-fast: 150ms cubic-bezier(.4,0,.2,1);
  --t-base: 250ms cubic-bezier(.4,0,.2,1);
  --t-slow: 600ms cubic-bezier(.16,1,.3,1);

  /* Z-index */
  --z-header: 100;
  --z-dropdown: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
}

@media (min-width: 768px)  { :root { --pad-x: 2.5rem; } }
@media (min-width: 1280px) { :root { --pad-x: 5rem; } }

/* ============================================
   Surfaces Yotipro — dégradés & cartes
   ============================================ */
:root {
  --navy-500: #0F4C81;
  --navy-400: #1a6bb5;
  --navy-50:  #EFF6FF;
  --grad-ocean:       linear-gradient(135deg, #0F4C81 0%, #064E7B 50%, #0B3A66 100%);
  --grad-ocean-dark:  linear-gradient(180deg, #082C4E 0%, #051E36 100%);
  --grad-ocean-light: linear-gradient(135deg, #EFF6FF 0%, #F0F7FF 50%, #E8F4FE 100%);
  --grad-copper:      linear-gradient(135deg, #C17F59 0%, #D4A574 100%);
}