/* ==========================================================================
   ULTRA DAD'S TERMINAL — design tokens
   --------------------------------------------------------------------------
   Single source of truth for colour, type, spacing, radii, elevation and
   motion. Nothing below this file should hardcode a hex value or a pixel
   spacing step — everything references a token so the whole product can be
   retuned from one place.

   Palette intent:
     surface ramp   near-black cool greys, five steps, low chroma so artwork
                    and status colour carry all the visual weight
     accent         signal orange — reserved for primary action and "live"
     cyan           passive / informational state, chain + data readouts
     success/warn/danger  transaction + launch lifecycle states
   ========================================================================== */

:root {
  /* ---- Surfaces ---------------------------------------------------------- */
  --surface-0: #08090c;   /* app background */
  --surface-1: #0d0f14;   /* sunken wells, inputs */
  --surface-2: #11141b;   /* cards, sidebar */
  --surface-3: #171b24;   /* raised card, hover */
  --surface-4: #1e2430;   /* popovers, active nav */

  --border: #222836;
  --border-strong: #2e3646;
  --border-subtle: #191d27;

  /* ---- Text ------------------------------------------------------------- */
  --text: #eef1f6;
  --text-2: #a4aebe;
  --text-3: #6d7789;
  --text-4: #4a5262;

  /* ---- Accent ----------------------------------------------------------- */
  --accent: #ff5a1f;
  --accent-hover: #ff733f;
  --accent-press: #e04a13;
  --accent-soft: rgba(255, 90, 31, 0.12);
  --accent-ring: rgba(255, 90, 31, 0.28);
  --accent-ink: #0a0d12;  /* text on top of accent fills */

  --cyan: #3ecfe0;
  --cyan-soft: rgba(62, 207, 224, 0.12);

  /* ---- Status ----------------------------------------------------------- */
  --success: #3ddc84;
  --success-soft: rgba(61, 220, 132, 0.12);
  --warn: #f5b544;
  --warn-soft: rgba(245, 181, 68, 0.13);
  --danger: #f2415d;
  --danger-soft: rgba(242, 65, 93, 0.13);
  --neutral: #7b8598;
  --neutral-soft: rgba(123, 133, 152, 0.13);
  --violet: #9b7dff;
  --violet-soft: rgba(155, 125, 255, 0.14);

  /* ---- Typography ------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: 32px;

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.65;

  --tracking-caps: 0.09em;
  --tracking-wide: 0.03em;

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* ---- Radii ------------------------------------------------------------ */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* ---- Elevation -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px var(--accent-ring), 0 8px 32px rgba(255, 90, 31, 0.12);

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 340ms;

  /* ---- Layout ----------------------------------------------------------- */
  --sidebar-w: 236px;
  --topbar-h: 64px;
  --tabbar-h: 60px;
  --content-max: 1360px;
  --z-drawer: 60;
  --z-topbar: 40;
  --z-tabbar: 50;
  --z-modal: 90;
  --z-toast: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }