/* ============================================================
   Trivie Business Brokers — Design Tokens (v3 · DAYLIGHT / "THE LINE")
   A from-scratch third direction: full morning daylight, a field
   that fades white into brand blue. Navy is the ink, orange is the
   one line, the blue is the air. Editorial didone + grotesque.
   Display: Bodoni Moda. Text: Hanken Grotesk.
   NB: token NAMES are kept stable so shared components recolor;
   the .soil-* aliases now resolve to DARK ink (every page is light).
   ============================================================ */

:root {
  /* ---- L1 Primitives ---- */
  --marigold:  #F6C24A;
  --sun:       #E87A2A;   /* the one orange line */
  --sun-deep:  #C75F18;
  --rust:      #B5481A;
  --navy-700:  #2A4A74;
  --navy-800:  #173456;
  --navy-900:  #0D2847;   /* brand navy — the ink */
  --navy-950:  #081B30;
  --navy-ink:  #050E18;

  /* the daylight field — white at the top, brand blue toward the floor */
  --sky-0:  #FFFFFF;
  --sky-1:  #FBFCFE;
  --sky-2:  #F0F5FC;
  --sky-3:  #E2ECF8;
  --sky-4:  #CFE0F4;
  --sky-5:  #B7D0EE;

  --paper:     #FFFFFF;
  --cream:     #FBFCFE;
  --ink-warm:  #0D2847;

  --neutral-100: #EEF3FA;
  --neutral-300: #C3D2E6;
  --neutral-500: #607A99;
  --neutral-600: #3F5874;

  /* ---- L2 Semantic — LIGHT theme ---- */
  --ink:            var(--navy-900);
  --ink-muted:      #44618A;
  --ink-on-soil:    var(--navy-900);   /* legacy alias — pages are light now */
  --ink-on-soil-muted: #4E688A;
  --accent:         var(--sun);
  --accent-ink:     #FFFFFF;
  --line:           color-mix(in srgb, var(--navy-900) 14%, transparent);
  --line-sky:       color-mix(in srgb, var(--navy-900) 12%, transparent);
  --line-soil:      color-mix(in srgb, var(--navy-900) 12%, transparent);
  --focus:          2px solid var(--sun);
  --ok: #1F8A4C;  --err: #C0392B;

  /* surfaces + a real elevation ladder for depth on light (ink-tinted, +Y) */
  --surface:        var(--sky-1);
  --surface-raised: #FFFFFF;
  --e1: 0 1px 2px color-mix(in srgb, var(--navy-900) 10%, transparent),
        0 1px 1px color-mix(in srgb, var(--navy-900) 6%, transparent);
  --e2: 0 1px 2px color-mix(in srgb, var(--navy-900) 10%, transparent),
        0 8px 18px -6px color-mix(in srgb, var(--navy-900) 14%, transparent);
  --e3: 0 2px 4px color-mix(in srgb, var(--navy-900) 10%, transparent),
        0 18px 36px -10px color-mix(in srgb, var(--navy-900) 16%, transparent);
  --e4: 0 2px 6px color-mix(in srgb, var(--navy-900) 12%, transparent),
        0 36px 70px -18px color-mix(in srgb, var(--navy-900) 22%, transparent);

  /* ---- Spacing — 4-based, 16px heartbeat ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px; --space-11: 160px; --space-12: 224px;

  /* ---- Type scale — 1.333 perfect fourth ---- */
  --ms-0: 1rem;        --ms-1: 1.333rem;   --ms-2: 1.777rem;   --ms-3: 2.369rem;
  --ms-4: 3.157rem;    --ms-5: 4.209rem;   --ms-6: 5.61rem;    --ms-7: 7.478rem;
  --ms-dn1: 0.78rem;   --ms-dn2: 0.66rem;

  --font-display: "Bodoni Moda", "Didot", Georgia, serif;
  --font-text: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* ---- Radius ---- */
  --r-xs: 3px;  --r-sm: 6px;  --r-md: 10px;  --r-lg: 18px; --r-pill: 999px; --r-full: 50%;

  /* ---- Motion — ONE vocabulary ---- */
  --ease-standard:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-expressive: cubic-bezier(0.16, 1, 0.30, 1);
  --dur-micro: 120ms; --dur-element: 200ms; --dur-section: 320ms;
  --dur-reveal: 560ms; --dur-cinematic: 720ms;
  --stagger: 80ms;

  /* ---- Layout ---- */
  font-size: clamp(1rem, 0.95rem + 0.28vw, 1.1875rem);
  --section-y: clamp(4.5rem, 3rem + 6vw, 10rem);
  --gutter:    clamp(1.25rem, 0.8rem + 2vw, 3rem);
  --edge:      clamp(1.1rem, 0.6rem + 1.4vw, 1.75rem);
  --measure:   60ch;
  --shell:        min(100% - 2 * var(--edge), 76rem);
  --shell-wide:   min(100% - 2 * var(--edge), 92rem);
  --shell-narrow: min(100% - 2 * var(--edge), 46rem);

  /* ---- The daylight fields ---- */
  --sky-grad:  linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 30%, var(--sky-2) 70%, var(--sky-3) 100%);
  --soil-grad: linear-gradient(180deg, var(--sky-2) 0%, var(--sky-4) 100%);
  --page-grad: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 24%, var(--sky-2) 58%, var(--sky-3) 86%, var(--sky-4) 100%);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}