/* ============================================================================
   ENEM — Design Tokens (porté à l'identique depuis le thème Tailwind/maritime)
   Palette, typographie, ombres, rayons, variables sémantiques light/dark.
   ============================================================================ */

/* --- Polices auto-hébergées (indépendant du réseau) --- */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/jakarta.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
  font-style: normal;
}

:root {
  /* === Échelles de marque (maritime) === */
  --primary-50: #e6f0fa;  --primary-100: #cce1f5; --primary-200: #99c3eb;
  --primary-300: #66a5e0; --primary-400: #3387d6; --primary-500: #0066cc;
  --primary-600: #0052a3; --primary-700: #003d7a; --primary-800: #002952;
  --primary-900: #001429; --primary-950: #000a14;

  --accent-50: #e6f7fa;  --accent-100: #cceff5; --accent-200: #99dfeb;
  --accent-300: #66cfe0; --accent-400: #33bfd6; --accent-500: #00a8cc;
  --accent-600: #0086a3; --accent-700: #00657a; --accent-800: #004352;
  --accent-900: #002229;

  --gold-50: #fef9e6;  --gold-100: #fdf3cc; --gold-200: #fbe799;
  --gold-300: #f9db66; --gold-400: #f7cf33; --gold-500: #f5c300;
  --gold-600: #c49c00; --gold-700: #937500;

  --success-50: #e6f9f0; --success-100: #ccf3e1; --success-500: #00b368;
  --success-600: #008f53; --success-700: #006b3f;
  --warning-50: #fff4e6; --warning-500: #ff9500; --warning-700: #995900;
  --error-50: #fde8e8;   --error-100: #fbd1d1;   --error-500: #e53e3e;
  --error-600: #c53030;  --error-700: #9b2c2c;

  /* === Variables sémantiques (thème clair) — triplets HSL === */
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --primary: 210 100% 40%;
  --primary-foreground: 0 0% 100%;
  --accent: 192 100% 40%;
  --accent-foreground: 0 0% 100%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 210 100% 40%;
  --destructive: 0 84.2% 60.2%;

  /* === Typographie === */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', var(--font-sans);
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Échelle typographique fluide (clamp) */
  --text-display-xl: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --text-display-lg: clamp(2rem, 4vw + 0.5rem, 3.5rem);
  --text-display-md: clamp(1.75rem, 3vw + 0.5rem, 2.75rem);
  --text-h1: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
  --text-h2: clamp(1.25rem, 2vw + 0.25rem, 1.875rem);
  --text-h3: clamp(1.125rem, 1.5vw + 0.25rem, 1.5rem);

  /* Espacements de section fluides */
  --section-sm: clamp(2rem, 5vw, 4rem);
  --section-md: clamp(3rem, 8vw, 6rem);
  --section-lg: clamp(4rem, 10vw, 8rem);

  /* === Rayons === */
  --radius: 0.75rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-2xl: 1rem;

  /* === Ombres douces === */
  --shadow-soft-sm: 0 2px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-soft-md: 0 4px 8px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-soft-lg: 0 8px 16px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.06);
  --shadow-soft-xl: 0 16px 32px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.08);
  --shadow-glass: 0 8px 32px rgba(0,102,204,.1);
  --shadow-primary: 0 10px 40px -10px rgba(0,102,204,.3);

  /* Layout */
  --header-height: 4rem;
  --sidebar-width: 16rem;
  --container-max: 1400px;
}

/* === Thème sombre === */
.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 6%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 8%;
  --popover-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --primary: 210 100% 50%;
  --primary-foreground: 0 0% 100%;
  --accent: 192 100% 50%;
  --accent-foreground: 0 0% 100%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 210 100% 50%;
  --shadow-glass: 0 8px 32px rgba(0,0,0,.3);
}

/* ============================================================================
   Keyframes (effets premium maritimes)
   ============================================================================ */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes aurora {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(4%,-3%,0) rotate(8deg) scale(1.15); }
  100% { transform: translate3d(-3%,4%,0) rotate(-6deg) scale(1.05); }
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes shine { 0% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(220%) skewX(-20deg); } }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes gradientX { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes sonar { 0% { transform: scale(.35); opacity: .55; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes gridDrift { 0% { background-position: 0 0; } 100% { background-position: 44px 44px; } }
@keyframes rise {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  12% { opacity: .7; } 88% { opacity: .5; }
  100% { transform: translateY(-130px) translateX(14px) scale(1.35); opacity: 0; }
}
@keyframes caustic {
  0%,100% { opacity: .25; transform: translate3d(0,0,0) scale(1); }
  50% { opacity: .55; transform: translate3d(2%,3%,0) scale(1.08); }
}
@keyframes scanY { 0%,100% { background-position: 0 -10%; } 50% { background-position: 0 110%; } }
@keyframes waveX { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }