/* ==========================================================================
   PERUN — Design Tokens
   The visual identity. Electric, precise, honest. Dark-first, light-aware.
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --brand-h: 245;               /* electric indigo/violet — the storm */
  --brand: hsl(245 90% 66%);
  --brand-strong: hsl(248 92% 60%);
  --brand-soft: hsl(245 90% 66% / 0.14);
  --brand-glow: hsl(245 100% 70% / 0.45);

  --spark: hsl(190 95% 55%);    /* cyan lightning — secondary accent */
  --spark-soft: hsl(190 95% 55% / 0.14);

  /* ---- Semantic market colors (colorblind-safe teal/amber, not red/green) */
  --up: hsl(158 72% 45%);
  --up-soft: hsl(158 72% 45% / 0.15);
  --up-strong: hsl(158 78% 40%);
  --down: hsl(6 78% 60%);
  --down-soft: hsl(6 78% 60% / 0.15);
  --down-strong: hsl(6 82% 55%);
  --warn: hsl(38 95% 58%);
  --warn-soft: hsl(38 95% 58% / 0.15);
  --info: var(--spark);

  /* ---- Surfaces (dark theme default) ------------------------------------ */
  --bg-0: hsl(240 24% 6%);      /* app background, deepest */
  --bg-1: hsl(240 20% 8.5%);    /* panels */
  --bg-2: hsl(240 18% 11%);     /* raised cards */
  --bg-3: hsl(240 16% 14%);     /* hover / active fills */
  --bg-inset: hsl(240 28% 4.5%);/* wells, inputs, chart bg */

  --glass: hsl(240 20% 12% / 0.62);
  --glass-brdr: hsl(240 30% 90% / 0.08);
  --glass-brdr-strong: hsl(240 30% 90% / 0.14);
  --glass-blur: 18px;

  /* ---- Text ------------------------------------------------------------- */
  --text-0: hsl(240 30% 97%);   /* primary */
  --text-1: hsl(240 14% 74%);   /* secondary */
  --text-2: hsl(240 10% 54%);   /* muted / labels */
  --text-3: hsl(240 8% 38%);    /* disabled / faint */
  --text-on-brand: hsl(240 40% 99%);

  /* ---- Lines ------------------------------------------------------------ */
  --line: hsl(240 20% 90% / 0.07);
  --line-strong: hsl(240 20% 90% / 0.13);

  /* ---- Radii ------------------------------------------------------------ */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-full: 999px;

  /* ---- Elevation -------------------------------------------------------- */
  --sh-sm: 0 1px 2px hsl(240 40% 2% / 0.4);
  --sh-md: 0 6px 20px -6px hsl(240 40% 2% / 0.5);
  --sh-lg: 0 18px 48px -12px hsl(240 50% 2% / 0.62);
  --sh-glow: 0 0 0 1px var(--brand-soft), 0 8px 30px -6px var(--brand-glow);

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

  --fs-2xs: 10.5px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14.5px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  --fs-2xl: 30px;
  --fs-3xl: 42px;

  --lh-tight: 1.15;
  --lh-normal: 1.5;

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.12s;
  --dur-2: 0.22s;
  --dur-3: 0.4s;

  /* ---- Layout ----------------------------------------------------------- */
  --rail-w: 74px;
  --topbar-h: 58px;
  --maxw: 1560px;

  color-scheme: dark;
}

/* Light theme — kept honest and legible, not an afterthought */
:root[data-theme="light"] {
  --bg-0: hsl(240 30% 97%);
  --bg-1: hsl(0 0% 100%);
  --bg-2: hsl(240 30% 99%);
  --bg-3: hsl(240 24% 94%);
  --bg-inset: hsl(240 28% 95.5%);

  --glass: hsl(0 0% 100% / 0.72);
  --glass-brdr: hsl(240 30% 20% / 0.08);
  --glass-brdr-strong: hsl(240 30% 20% / 0.14);

  --text-0: hsl(240 30% 12%);
  --text-1: hsl(240 14% 32%);
  --text-2: hsl(240 10% 46%);
  --text-3: hsl(240 8% 62%);

  --line: hsl(240 20% 20% / 0.09);
  --line-strong: hsl(240 20% 20% / 0.15);

  --sh-md: 0 6px 20px -8px hsl(240 30% 40% / 0.22);
  --sh-lg: 0 18px 48px -14px hsl(240 30% 40% / 0.28);

  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}