/* tramplus — canonical brand token sheet.
   Single source of truth for colors, radii, shadows, fonts, layout.
   Loaded on every page BEFORE its own stylesheet. Portal-aligned. */

:root {
  /* ---- Primary green scale ---- */
  --tp-green:     #4DB969;
  --tp-green-50:  #EBF7EF;
  --tp-green-100: #D2EFDB;
  --tp-green-300: #8CD49F;
  --tp-green-700: #2F8A47;
  --tp-green-900: #1E5A2E;

  /* ---- Ink / neutral ramp ---- */
  --ink-900: #010101;
  --ink-800: #1A1D22;
  --ink-700: #2A2E34;
  --ink-600: #3A3F46;
  --ink-500: #4E4E4E;
  --ink-400: #767A82;
  --ink-300: #A5A9B0;
  --ink-200: #D4D7DB;
  --ink-100: #ECEEF0;
  --ink-50:  #F6F7F8;

  /* ---- Secondary accents (brand-named) ---- */
  --tp-teal:    #48B6C7;
  --tp-orange:  #FFB34F;
  --tp-coral:   #C75948;
  --tp-magenta: #B94D9C;
  --tp-blue:    #4DA9FF;

  /* ~10–12% tints (flat hex, mixed against white) */
  --tp-teal-50:    #E4F3F6;
  --tp-orange-50:  #FFF2DC;
  --tp-coral-50:   #F7E1DD;
  --tp-magenta-50: #F4E1EF;
  --tp-blue-50:    #E1EFFE;

  /* ---- Legacy secondary aliases (compat) ---- */
  --tp-cyan: var(--tp-teal);
  --tp-red:  var(--tp-coral);

  /* ---- Semantic surfaces ---- */
  --bg:       #F6F7F8;
  --card:     #FFFFFF;
  --border-1: #ECEEF0;
  --border-2: #D4D7DB;
  --scrim:    rgba(1, 1, 1, 0.6);

  /* ---- Radii ---- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 999px;

  /* ---- Shadows (canonical: two tiers; sh-3 aliased for migration) ---- */
  --sh-1: 0 1px 2px rgba(1,1,1,0.06), 0 1px 1px rgba(1,1,1,0.04);
  --sh-2: 0 2px 6px rgba(1,1,1,0.08), 0 1px 2px rgba(1,1,1,0.04);
  --sh-3: var(--sh-2);

  /* ---- Fonts (no Univia Pro anywhere in UI chrome; logo is a PNG) ---- */
  --font-body: 'Quicksand', 'Noto Sans HK', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-zh:   'Noto Sans HK', var(--font-body);

  /* ---- Layout ---- */
  --sidebar-w: 240px;
  --tap-min:   44px;
  --logo-h-sm: 22px;
  --logo-h-lg: 40px;
}

/* ---- Global focus ring ---- */
:focus-visible {
  outline: 2px solid var(--tp-green-700);
  outline-offset: 2px;
}

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