/* ============================================================
   SC Cargo Pro — Design Tokens
   Dark default. Light variant under [data-theme="light"].
   ============================================================ */

:root {
  /* ── Typography ─────────────────────────────────────────── */
  --font-ui:   'Inter Tight', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ── Surfaces (dark default) ────────────────────────────── */
  --bg-0: #02040a;   /* deepest — body, canvas bg           */
  --bg-1: #07090f;   /* app shell — topbar, botbar          */
  --bg-2: #0c1018;   /* panels — rail, lpanel, rpanel       */
  --bg-3: #111722;   /* elevated — card, section            */
  --bg-4: #181f2d;   /* hover / active surface              */

  /* ── Text ───────────────────────────────────────────────── */
  --text-0: #eaeff6;   /* primary headings                  */
  --text-1: #bcc5d4;   /* body, labels                      */
  --text-2: #7e8fa0;   /* secondary, meta                   */
  --text-3: #4e5a6a;   /* placeholder, disabled             */

  /* ── Borders ────────────────────────────────────────────── */
  --line-1: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-3: rgba(255, 255, 255, 0.16);

  /* ── Accent palette ─────────────────────────────────────── */
  --accent:    hsl(166 72% 52%);   /* teal-green — OK/go     */
  --accent-hi: hsl(166 78% 62%);   /* hover / bright          */
  --accent-dim: hsl(166 50% 30%);  /* muted / tint            */
  --accent-tint: rgba(33, 198, 155, 0.08);

  --warn: hsl(35 82% 58%);         /* amber — caution         */
  --warn-tint: rgba(224, 167, 74, 0.10);
  --info: hsl(210 80% 62%);        /* blue — informational    */
  --info-tint: rgba(74, 158, 224, 0.10);
  --bad:  hsl(2 70% 58%);          /* red — error/danger      */
  --bad-tint: rgba(224, 74, 74, 0.10);
  --good: hsl(142 60% 52%);        /* green — profit/positive */

  /* ── Layout ─────────────────────────────────────────────── */
  --topbar-h:   44px;
  --rail-w:     48px;
  --lpanel-w:  340px;
  --rpanel-w:  420px;
  --botbar-h:   72px;

  /* ── Transitions ────────────────────────────────────────── */
  --t-fast: 0.14s ease;
  --t-mid:  0.22s ease;
  --t-slow: 0.36s ease;

  /* ── Radii ──────────────────────────────────────────────── */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-panel: 0 2px 16px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.7);
  --shadow-card:  0 1px 4px rgba(0, 0, 0, 0.35);

  /* ── Scrollbar ──────────────────────────────────────────── */
  --scrollbar-track: var(--bg-1);
  --scrollbar-thumb: var(--bg-4);

  /* ── Mobile / touch ─────────────────────────────────────── */
  --tap: 44px;                     /* minimum touch-target size */
  --rail-w-tablet: 56px;           /* tablet persistent left rail */
  --sheet-radius: 18px;            /* bottom-sheet top-corner radius */
  --sheet-peek: 42vh;              /* default peek height for bottom sheets */
  --sheet-max: 92vh;               /* max expanded height */
  --sheet-backdrop: rgba(0, 0, 0, 0.52);
  --hud-chrome: rgba(12, 16, 24, 0.92);

  /* ── Safe-area insets (with fallbacks) ──────────────────── */
  --sa-top:    env(safe-area-inset-top, 0px);
  --sa-right:  env(safe-area-inset-right, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left:   env(safe-area-inset-left, 0px);
}

/* ── Light variant ──────────────────────────────────────────── */
[data-theme="light"] {
  --bg-0: #f0f2f5;
  --bg-1: #ffffff;
  --bg-2: #f5f6f9;
  --bg-3: #eceef3;
  --bg-4: #e0e3ea;

  --text-0: #0f1117;
  --text-1: #2d3340;
  --text-2: #5a6375;
  --text-3: #8a94a6;

  --line-1: rgba(0, 0, 0, 0.06);
  --line-2: rgba(0, 0, 0, 0.10);
  --line-3: rgba(0, 0, 0, 0.16);

  --accent:    hsl(166 72% 38%);
  --accent-hi: hsl(166 78% 30%);
  --accent-dim: hsl(166 50% 65%);
  --accent-tint: rgba(0, 160, 118, 0.08);

  --warn: hsl(35 82% 44%);
  --warn-tint: rgba(180, 120, 20, 0.10);
  --info: hsl(210 80% 48%);
  --info-tint: rgba(20, 100, 200, 0.08);
  --bad:  hsl(2 70% 48%);
  --bad-tint: rgba(200, 50, 50, 0.08);
  --good: hsl(142 60% 36%);

  --shadow-panel: 0 2px 12px rgba(0, 0, 0, 0.10);
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.20);
  --shadow-card:  0 1px 4px rgba(0, 0, 0, 0.08);

  --scrollbar-track: var(--bg-2);
  --scrollbar-thumb: var(--bg-4);

  --sheet-backdrop: rgba(0, 0, 0, 0.28);
  --hud-chrome: rgba(255, 255, 255, 0.92);
}