/* Design system: the ONLY place with colours, fonts, radii, shadows.
   Colours are bare HSL triplets: use hsl(var(--primary)) or hsl(var(--primary) / .3).
   Direction (2026-11-10, Léo's reference: Ultimate Brain, thomasjfrank.com/brain):
   near-black page, one calm indigo, Figtree only, big white titles, product windows on colourful gradients,
   lots of air. No neon: the indigo stays soft, glows are faint. */
:root {
  color-scheme: dark;
  --font-title: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Page (measured on the reference: rgb(15,15,18) / rgb(244,244,245) / white 72 %) */
  --background: 240 9% 6.5%;
  --foreground: 240 5% 96%;
  --heading: 240 6% 90%;
  --muted-foreground: 240 4% 71%;
  --subtle-foreground: 240 4% 62%;   /* raised from 56 % (critique 3: small grey lines unreadable in the sun) */
  --card: 240 6% 10%;
  --card-raised: 240 5% 13%;
  --card-foreground: 240 5% 96%;
  --muted: 240 5% 15%;
  --border: 240 4% 19%;
  --border-strong: 240 4% 28%;
  --input: 240 4% 26%;

  /* Indigo (rgb(79,70,229)) */
  --primary: 243 75% 59%;
  --primary-hover: 243 80% 65%;
  --primary-foreground: 0 0% 100%;
  --primary-soft: 243 45% 17%;
  --primary-line: 239 84% 74%;      /* check marks, small accents on dark */
  --ring: 239 84% 70%;

  /* Navy sections: linear-gradient(160deg, rgb(34,41,66), #000) */
  --navy: 226 32% 20%;
  --navy-deep: 228 40% 4%;

  /* Light product windows (the "app" inside the gradient frames) */
  --window: 0 0% 100%;
  --window-soft: 240 5% 96%;
  --window-line: 240 6% 89%;
  --window-ink: 240 10% 12%;
  --window-ink-soft: 240 5% 40%;
  --window-bar: 240 5% 93%;
  --window-accent: 243 62% 50%;
  --ask-bg: 45 96% 84%;
  --ask-ink: 28 72% 26%;
  --dot-red: 4 90% 63%;
  --dot-yellow: 41 95% 58%;
  --dot-green: 135 55% 52%;

  /* States (tuned for a dark page) */
  --success: 152 58% 56%;
  --success-soft: 152 38% 13%;
  --warning: 38 92% 62%;
  --warning-soft: 36 45% 13%;
  --destructive: 0 84% 68%;
  --destructive-soft: 0 45% 15%;
  --note-bg: 48 96% 74%;            /* yellow "À VÉRIFIER" notes, dev only */
  --note-ink: 30 60% 16%;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px hsl(240 30% 2% / .5);
  --shadow-md: 0 14px 40px -18px hsl(243 60% 4% / .9), 0 2px 6px hsl(240 30% 2% / .4);
  --shadow-lg: 0 40px 80px -30px hsl(243 70% 30% / .45), 0 10px 30px -12px hsl(240 40% 2% / .8);
  --shadow-window: 0 30px 60px -24px hsl(250 60% 6% / .75), 0 0 0 1px hsl(0 0% 100% / .06);
  --shadow-btn: 0 10px 24px -12px hsl(var(--primary) / .9), inset 0 1px 0 hsl(0 0% 100% / .14);
  --glow-text: 0 0 18px hsl(0 0% 100% / .45), 0 0 42px hsl(243 90% 70% / .35);

  /* Gradients (the frames behind the product windows, like the reference) */
  --grad-promo: linear-gradient(220deg, hsl(239 84% 67%), hsl(244 55% 41%));
  --grad-navy: linear-gradient(160deg, hsl(var(--navy)), hsl(var(--navy-deep)) 85%);
  --grad-magenta: linear-gradient(135deg, hsl(330 72% 52%), hsl(276 60% 46%) 55%, hsl(232 70% 52%));
  --grad-sunset: linear-gradient(135deg, hsl(18 88% 60%), hsl(338 74% 56%) 60%, hsl(290 52% 48%));
  --grad-ocean: linear-gradient(135deg, hsl(190 80% 44%), hsl(222 76% 56%) 60%, hsl(256 62% 56%));
  --grad-violet: linear-gradient(135deg, hsl(256 70% 62%), hsl(243 75% 56%) 50%, hsl(212 85% 52%));

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --text-xs: .8rem;
  --text-sm: .9rem;
  --text-base: 1.0625rem;
  --text-lg: 1.2rem;
  --h3: 1.3rem;
  --h2: clamp(2rem, 1.35rem + 2.6vw, 3rem);
  --h1: clamp(2.75rem, 1.4rem + 5.6vw, 5.4rem);
  --h1-long: clamp(2.15rem, 1.2rem + 3.6vw, 3.9rem);

  --measure: 720px;
  --wide: 1180px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 120ms;
  --t-med: 240ms;
}

@media (min-width: 768px) { :root { --text-base: 1.125rem; } }

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; }
}
