/* SPC Distribution — design tokens. Palette from assets/Logo.png:
   black canvas, electric blue (brand/action/data), gold sun (SEMANTIC ONLY:
   reorder attention — never decorative), white type. */
:root {
  /* surfaces */
  --bg-0: #060A0F;
  --bg-1: #0C121B;
  --bg-2: #101926;
  --bg-3: #15202F;
  --sidebar: #000000;
  --line: #1B2735;
  --line-strong: #243447;
  --line-blue: #16304A;

  /* type */
  --ink-0: #F4F8FC;
  --ink-1: #C7D5E3;
  --ink-2: #8FA3B8;
  --ink-3: #5D7288;

  /* brand blue (logo panel gradient) */
  --blue-100: #A8D4FF;
  --blue-300: #57B0F6;
  --blue-500: #1E8FE8;
  --blue-600: #1272CE;
  --blue-700: #0B5BB2;
  --blue-dim: rgba(30, 143, 232, 0.14);

  /* gold sun — reorder attention only */
  --gold-300: #FFD35C;
  --gold-500: #F5B211;
  --gold-700: #7A5A03;
  --gold-dim: rgba(245, 178, 17, 0.13);
  --gold-ink: #1C1402;

  /* semantic */
  --ok: #31C48D;
  --ok-dim: rgba(49, 196, 141, 0.14);
  --danger: #F0566B;
  --danger-dim: rgba(240, 86, 107, 0.12);

  --grad-brand: linear-gradient(135deg, #3FAAF2 0%, #0E63C8 100%);

  /* spacing scale (global rule: 4/8/16/24/32/48/64/96) */
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px;
  --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px;

  /* type scale */
  --f-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --f-disp: "Rajdhani", var(--f-body);
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --fs-1: 12px; --fs-2: 13px; --fs-3: 14px; --fs-4: 16px;
  --fs-5: 20px; --fs-6: 24px; --fs-7: 32px; --fs-8: 40px;

  /* shape + depth */
  --r-1: 4px; --r-2: 8px; --r-3: 12px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.5);

  /* layers */
  --z-nav: 100; --z-tip: 900; --z-modal: 1000; --z-toast: 1100;

  --sidebar-w: 224px;
  --content-max: 1440px;
  --speed: 180ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}