/* ================================================================
   tokens.css — SiteLoom Design System
   Single source of truth for colors, spacing, typography, motion.
   ================================================================ */

:root {
  /* ---- Brand palette ---- */
  --brand-blue:      #4ea1ff;
  --brand-blue-2:    #2f6bff;
  --brand-orange:    #ff8a2a;
  --brand-blue-soft: rgba(78, 161, 255, .14);
  --brand-orng-soft: rgba(255, 138, 42, .12);

  /* ---- Surfaces ---- */
  --pageBg:          #070b16;
  --canvasBg:        #0b1020;
  --panel:           #0c1224;
  --panel-glass:     rgba(12, 18, 36, .88);
  --panel-glass-2:   rgba(12, 18, 36, .60);
  --overlay:         rgba(5, 8, 18, .72);

  /* ---- Borders ---- */
  --stroke:          rgba(255, 255, 255, .10);
  --stroke-soft:     rgba(255, 255, 255, .06);
  --stroke-hover:    rgba(255, 255, 255, .16);

  /* ---- Text ---- */
  --text:            #eaf1ff;
  --muted:           rgba(234, 241, 255, .60);
  --muted-2:         rgba(234, 241, 255, .38);
  --muted-3:         rgba(234, 241, 255, .22);

  /* ---- Semantic ---- */
  --danger:          #ff5577;
  --success:         #4ade80;
  --warning:         #fbbf24;

  /* ---- Shadows ---- */
  --shadow-xl: 0 30px 80px rgba(0, 0, 0, .50);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .40);
  --shadow-md: 0 8px  32px rgba(0, 0, 0, .30);
  --shadow-sm: 0 4px  16px rgba(0, 0, 0, .20);
  --glow-blue: 0 0 0 1px rgba(78, 161, 255, .35), 0 8px 28px rgba(78, 161, 255, .25);

  /* ---- Radii ---- */
  --r-xs:  6px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---- Spacing scale (8px grid) ---- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---- Typography ---- */
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --fz-xs:  11px;
  --fz-sm:  12px;
  --fz-md:  13px;
  --fz-lg:  14px;
  --fz-xl:  16px;
  --fz-2xl: 20px;
  --fz-3xl: 28px;

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   340ms;
  --dur-slower: 560ms;

  --transition: var(--dur-base) var(--ease-out);

  /* ---- Z-index scale ---- */
  --z-canvas:   1;
  --z-sticky:   50;
  --z-topbar:   100;
  --z-ctx:      500;
  --z-modal:    1000;
  --z-toast:    1500;
  --z-cursor:   9999;
  --z-splash:   10000;
}