/* ============================================================
   Thési — Design Tokens (premium light)
   Single source of truth: spacing, type, radius, elevation, color.
   ============================================================ */
:root {
  /* ---- Color: neutrals (ink scale) ---- */
  --ink-900: #0d0f12;   /* primary text, primary buttons */
  --ink-800: #1c2127;
  --ink-700: #3a4049;
  --ink-600: #565d67;
  --ink-500: #767d88;   /* secondary text */
  --ink-400: #9aa1ab;
  --ink-300: #c2c7ce;   /* disabled */
  --ink-200: #e2e5e9;   /* lines */
  --ink-100: #eef0f2;   /* subtle fills */
  --ink-050: #f6f7f8;   /* panels / app bg */
  --white:   #ffffff;

  /* ---- Surfaces ---- */
  --bg:        var(--ink-050);
  --surface:   #ffffff;
  --surface-2: var(--ink-100);
  --scrim:     rgba(13, 15, 18, 0.45);

  /* ---- Text ---- */
  --text:      var(--ink-900);
  --text-2:    var(--ink-500);
  --text-3:    var(--ink-400);
  --on-dark:   #ffffff;

  /* ---- Lines / borders ---- */
  --line:        var(--ink-200);
  --line-strong: #d3d7dc;

  /* ---- Brand & status (used sparingly) ---- */
  --brand:        #0d0f12;   /* primary action = ink (Uber-style restraint) */
  --live:         #157a4e;   /* available / go — the only green, used small */
  --live-tint:    #e7f1ec;
  --warning:      #b4690e;
  --warning-tint: #fbf0e1;
  --danger:       #b3261e;
  --danger-tint:  #fbeae9;
  --info:         #1f5fbf;
  --info-tint:    #e9f0fb;

  /* status by remaining time (calm, muted) */
  --st-go:    #157a4e;   /* plenty of time */
  --st-soon:  #b4690e;   /* a few minutes */
  --st-now:   #b3261e;   /* imminent */

  /* ---- Typography ---- */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-16: 16px; --fs-18: 18px; --fs-22: 22px; --fs-28: 28px;
  --lh-tight: 1.2; --lh: 1.45;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --tracking-tight: -0.01em;

  /* ---- Spacing (4-based) ---- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;

  /* ---- Radius (restrained) ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  /* ---- Elevation (subtle) ---- */
  --e1: 0 1px 2px rgba(13,15,18,.06), 0 1px 3px rgba(13,15,18,.08);
  --e2: 0 4px 16px rgba(13,15,18,.10);
  --e3: 0 16px 40px rgba(13,15,18,.16);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 0.24s;

  /* ---- Layout ---- */
  --topbar-h: 56px;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}