/* Ly's Brain design tokens. Source of truth for the hub and every lobe.
   System modelled on thedrake.ca (see research/drake-teardown.md).
   Fonts (final, free, Vietnamese-ready): Be Vietnam Pro for display and body,
   IBM Plex Mono for labels. Chosen 9 Oct 2026 in place of the paid Drake fonts. */

:root {
  color-scheme: only light; /* the design sets every colour; stop browsers auto-darkening it */

  /* Colour: shell */
  --ink: #222223;
  --white: #ffffff;
  --cream: #f0eeeb;
  --black: #000000;
  --jade: #20a556;
  --jade-dark: #13733c;
  --coral: #e25856;

  /* Colour: one per lobe */
  --lobe-peptide: #d5e7b5;   /* pistachio, ink text */
  --lobe-brand: #672b3c;     /* wine, white text */
  --lobe-ai: #3e64cf;        /* sapphire, white text */
  --lobe-marketing: #b5b7d8; /* lavender, ink text */

  /* Page wash (JS swaps these as you scroll) */
  --page-bg: var(--white);
  --fg: var(--ink);

  /* Type families */
  --font-display: "Be Vietnam Pro", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Type scale (Drake values) */
  --fs-hero: clamp(3.25rem, 1.9rem + 5.8vw, 7.5rem);
  --fs-display: clamp(3rem, 2.21rem + 3.38vw, 5.25rem);
  --fs-h2: clamp(2.5rem, 1.6rem + 3.9vw, 5.5rem);
  --fs-h4: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem);
  --fs-h5: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem);
  --fs-body: 1.0625rem;
  --fs-mono: 0.875rem;
  --fs-chip: 0.75rem;
  --fs-tiny: 0.625rem;
  --weight-display: 500;
  --track-display: -0.03em;

  /* Grid */
  --cols: 4;
  --margin: 16px;
  --gutter: 16px;
  --max: 1920px;
  --chip-h: 44px;
  --rule: 1px solid currentColor;

  /* Motion: Drake spring curve, fast start, long soft settle */
  --spring: linear(0, .012 .9%, .049 2%, .409 9.3%, .513 11.9%, .606 14.7%, .691 17.9%, .762 21.3%, .82 25%, .868 29.1%, .907 33.6%, .937 38.7%, .976 51.3%, .994 68.8%, 1);
  --t-fast: .2s;
  --t: .4s;
  --t-slow: .6s;
  --t-slower: .8s;
  --t-in: 1s;
  --t-out: .36s;
  --stagger: .1s;
}

@media (min-width: 700px) {
  :root { --margin: 32px; --gutter: 20px; }
}
@media (min-width: 1000px) {
  :root { --cols: 12; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t: 0s; --t-slow: 0s; --t-slower: 0s; --t-in: 0s; --t-out: 0s; --stagger: 0s; }
}