/* ==========================================================================
   BGrowth — Design tokens (v2, aligned on the high-fidelity mockups in assets/mock)
   Every mockup is drawn at 1536 px. --u is "one mockup pixel" scaled to a real screen:
   0.72px from 761 to 2399 px wide (0.8px above, 0.7px on phones), set inline in <head>.
   ========================================================================== */
:root {
  --u: 0.72px;

  /* Brand (logo) */
  --cyan-200: #BAEEFA;
  --cyan-300: #49C9F8;
  --cyan-400: #38D3F5;
  --blue-400: #4D94F8;
  --blue-500: #2A7BF4;
  --blue-600: #1660F2;
  --blue-700: #0E4FD8;
  --indigo-800: #232C8D;
  --navy-900: #0F1A47;
  --navy-950: #0A1230;

  /* Ink */
  --ink: #0B1033;
  --ink-2: #1F2A48;
  --ink-3: #56637E;
  --ink-4: #7F8BA5;
  --ink-5: #A9B4CB;

  /* Surfaces */
  --page: #F6F9FE;
  --line: #E1E8F4;
  --line-2: #D3DDEE;
  --ice-1: #F3F7FE;
  --ice-2: #EAF1FD;
  --ice-3: #DCE8FB;
  --glass: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 255, 255, .86);
  --glass-line: rgba(255, 255, 255, .9);

  /* Semantic */
  --pos: #17A35F;
  --pos-2: #12894F;
  --pos-bg: #E5F7ED;
  --neg: #E5484D;
  --neg-bg: #FDECEC;

  /* Gradients */
  --grad-cta: linear-gradient(180deg, #2A73FF 0%, #0F57F0 100%);
  --grad-text: linear-gradient(95deg, #2F7BFF 0%, #0E4FE8 70%);
  --grad-brand: linear-gradient(135deg, #49C9F8 0%, #2480EF 45%, #1658E3 100%);
  --grad-track: linear-gradient(90deg, #35D7F6 0%, #2F7BFF 100%);

  /* Type */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Shadows (soft, long, blue-tinted as in the mockups) */
  --sh-card: 0 calc(18 * var(--u)) calc(48 * var(--u)) calc(-22 * var(--u)) rgba(31, 78, 168, .16), 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(15, 30, 80, .04);
  --sh-float: 0 calc(30 * var(--u)) calc(70 * var(--u)) calc(-28 * var(--u)) rgba(31, 78, 168, .26), 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(15, 30, 80, .05);
  --sh-btn: 0 calc(14 * var(--u)) calc(28 * var(--u)) calc(-12 * var(--u)) rgba(15, 87, 240, .6);
  --ring: 0 0 0 4px rgba(22, 96, 242, .18);

  /* Motion */
  --e-out: cubic-bezier(.22, 1, .36, 1);
  --e-inout: cubic-bezier(.65, 0, .35, 1);
  --d-fast: 160ms; --d-base: 260ms; --d-slow: 460ms;

  /* Layout system (docs/08-equilibre-et-rythme.md) — one grid, one rhythm for every section */
  --content: calc(1468 * var(--u));          /* shared content width: every block aligns on these two edges */
  --gutter: 40px;
  --sec-y: calc(108 * var(--u));             /* identical top / bottom padding for every section */
  --head-gap: calc(60 * var(--u));           /* section head -> section content */
  --col-gap: calc(84 * var(--u));            /* gap of every two-column layout */
  --stack-gap: calc(22 * var(--u));          /* eyebrow -> title, title -> lead */
  --card-gap: calc(20 * var(--u));           /* gap between sibling cards */
  --fs-h2: calc(56 * var(--u));              /* every section title */
  --fs-lead: max(16px, calc(22 * var(--u))); /* every section intro */
  --fs-card-t: max(15px, calc(21 * var(--u)));
  --fs-card-p: max(13.5px, calc(19 * var(--u)));
  --inset: clamp(8px, 1vw, 16px);            /* closing dark block inset */
  --end-r: clamp(20px, calc(36 * var(--u)), 32px);
}
@media (max-width: 1199px) {
  :root { --sec-y: 84px; --head-gap: 36px; --col-gap: 40px; }
}
@media (max-width: 760px) {
  :root { --gutter: 22px; --sec-y: 64px; --head-gap: 28px; --stack-gap: 14px; }
}