/* ============================================================
   Bullet v2 — Cal AI-inspired tokens
   Pure white surfaces. No cream. No warm tints. No yellow.
   ============================================================ */

:root {
  /* ---- Surfaces ---- */
  --bg:           #FFFFFF;
  --surface:      #F4F4F6;   /* unselected pills, subtle cards */
  --surface-2:    #FAFAFA;   /* large card backgrounds */
  --surface-warm: #FFF8F8;   /* soft pink — used sparingly for section bgs */
  --hairline:     #EAEAEC;   /* dividers, progress track */

  /* ---- Ink ---- */
  --ink:          #2C2C2C;   /* primary text, CTAs, dark fills — single black across the app */
  --ink-2:        #2C2C2C;
  --ink-muted:    #6B6B6B;   /* body / subline */
  --ink-soft:     #9A9AA1;   /* helper / timestamp */

  /* ---- Accents (used sparingly) ---- */
  --accent:       #FFE000;   /* Bullet yellow — inline emphasis, progress */
  --accent-ink:   #2C2C2C;   /* highlighted words stay dark; yellow is bg accent */
  --accent-soft:  #FFF3A8;   /* yellow-tinted highlight for small bg accents */
  --success:      #22C55E;   /* green tick + live dot */
  --danger:       #EF4444;

  /* ---- Shapes ----
     EVERYTHING is 8px. Even the "pill" token — pill shapes were creating
     inconsistency across screens (welcome stamp, status chips, etc).
     Only explicit `50%` border-radius is allowed for actual circles
     (avatars, back-chevron button, padlock badge). */
  --r-sm: 8px;
  --r-md: 8px;
  --r-lg: 8px;
  --r-xl: 8px;
  --r-pill: 8px;

  /* ---- Shadows (very subtle — Cal AI uses almost none) ---- */
  --shadow-card: 0 1px 2px rgba(10,10,10,0.04), 0 4px 14px rgba(10,10,10,0.04);
  --shadow-elev: 0 6px 20px rgba(10,10,10,0.08);

  /* ---- Type ----
     DM Sans for UI (body, labels, numbers). Fraunces for display where
     a serif moment is wanted. Loaded globally in base.css. System-font
     fallbacks remain so first paint isn't blank. */
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Fraunces', Georgia, "Times New Roman", -apple-system, BlinkMacSystemFont, serif;

  /* Splash dark */
  --ink-dark-bg: #2C2C2C;

  /* ---- Sizes ---- */
  --fs-xs:   13px;
  --fs-sm:   15px;
  --fs-md:   18px;
  --fs-lg:   19px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  32px;
  --fs-4xl:  36px;

  /* ---- Layout ---- */
  --app-max: 430px;
  --gutter:  24px;
  --cta-pad: 20px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-med:  320ms;
  --dur-slow: 520ms;
}

@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;
  }
}