/* tokens.css — GioBiz canonical design tokens (Lane 2a slice 1, chief c544).
 * WHAT: the single source of truth for color / spacing / radii / breakpoints, for the
 *       responsive SHELL (shell.css/shell.js) and all NEW screens (React-inside-shell).
 * SCOPE: shell + new screens ONLY. Existing per-page :root blocks are NOT force-migrated
 *        (chief c544 ruling 3) — they fold in later as their own per-page slices.
 * PALETTE: mirrors the primary app palette (assets/css/index.css :root) so new screens are
 *          visually identical to the live app — never invent brand colors.
 * BREAKPOINTS ARE LAW (chief c544 ruling 1): phone <=640 (ref 390) · tablet 641-1024 (ref 800)
 *          · desktop >=1025 (ref 1280). NOTE: CSS @media cannot read var() — shell.css @media
 *          rules MUST hardcode-mirror these exact values; shell.js reads them via
 *          getComputedStyle for JS-side breakpoint logic. This block is the canonical reference. */
:root {
  /* ── brand green scale (canonical, = index.css) ── */
  --g900: #071F17;
  --g800: #0A3D2E;
  --g700: #0F5A43;
  --g600: #1A7A5E;
  --g500: #26A07A;
  --acc:  #00E5A0;
  --acc2: #00C896;
  --lite: #F0FBF6;
  --lite2:#E3F7EE;
  --white:#FFFFFF;
  --ink:  #0A1F16;
  --ink2: #2E5045;
  --mute: #7A9E8E;
  --mute2:#B0CCBF;
  --bg:   #F2F8F5;
  --warn: #F59E0B;
  --danger:#EF4444;
  --info: #3B82F6;

  /* ── elevation ── */
  --shadow:    0 1px 12px rgba(10,61,46,0.08);
  --shadow-md: 0 4px 24px rgba(10,61,46,0.12);

  /* ── radii ── */
  --r:    16px;
  --r-sm: 10px;
  --r-lg: 24px;

  /* ── type ── */
  --font: 'Plus Jakarta Sans', sans-serif;
  --mono: 'DM Mono', monospace;

  /* ── spacing scale (4px base — canonical for new work) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10:40px;

  /* ── breakpoints (LAW — see header note on @media limitation) ── */
  --bp-phone-max:  640px;  /* phone: max-width 640 */
  --bp-tablet-max: 1024px; /* tablet: 641-1024; desktop: >=1025 */
  --bp-phone-ref:  390px;  /* screenshot reference widths */
  --bp-tablet-ref: 800px;
  --bp-desktop-ref:1280px;

  /* ── shell chrome sizing (used by shell.css) ── */
  --shell-sidebar-w: 248px; /* desktop left nav */
  --shell-maxw:      1280px;/* desktop content max width (no infinite stretch) */
  --shell-bottomnav-h: 60px;/* phone bottom nav */

  /* ── motion (WO-MOTION-PASS, chief c585) — canonical durations + easings. The opt-in utility
   *    classes live in motion.css, which references these with var() FALLBACKS so it also works on
   *    surfaces that do not load tokens.css (e.g. giochat owns its own :root). Keep values in sync. ── */
  --dur-fast: 120ms;   /* taps / small state changes */
  --dur-med:  200ms;   /* entrances / element transitions */
  --dur-slow: 320ms;   /* larger surface transitions */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* decelerate — entrances settling in */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* symmetric — reversible state changes */
}