/* ── KRIO DESIGN TOKENS — Platform Edition 2026 ── */

:root {
  /* ── Canvas ─────────────────────────────── */
  --page:          #08080F;
  --page-2:        #0D0D16;
  --page-3:        #13131C;
  --page-4:        #191924;

  /* ── Surfaces ────────────────────────────── */
  --surface:       rgba(255,255,255,0.04);
  --surface-solid: #13131C;
  --surface-2:     rgba(255,255,255,0.07);
  --surface-3:     rgba(255,255,255,0.10);
  --surface-glass: rgba(8,8,15,0.88);

  /* ── Cards ───────────────────────────────── */
  --card:          rgba(255,255,255,0.035);
  --card-hover:    rgba(255,255,255,0.065);
  --card-border:   rgba(255,255,255,0.07);
  --card-border-hover: rgba(255,255,255,0.14);

  /* ── Borders ─────────────────────────────── */
  --line:          rgba(255,255,255,0.07);
  --line-soft:     rgba(255,255,255,0.04);
  --line-mid:      rgba(255,255,255,0.10);
  --line-bright:   rgba(99,179,237,0.40);
  --line-inner:    rgba(255,255,255,0.06);

  /* ── Typography ──────────────────────────── */
  --text:          #EFF3F8;
  --text-2:        #D4DCE8;
  --muted:         #7A8BA0;
  --muted-2:       #4D6070;
  --muted-3:       #354555;

  /* ── Brand — Electric Blue ───────────────── */
  --brand:         #3B82F6;
  --brand-2:       #60A5FA;
  --brand-3:       #93C5FD;
  --brand-soft:    rgba(59,130,246,0.10);
  --brand-mid:     rgba(59,130,246,0.18);
  --brand-glow:    rgba(59,130,246,0.24);

  /* ── Semantic ────────────────────────────── */
  --green:         #34D399;
  --green-2:       #6EE7B7;
  --green-soft:    rgba(52,211,153,0.10);
  --green-mid:     rgba(52,211,153,0.18);

  --orange:        #FBBF24;
  --orange-2:      #FCD34D;
  --orange-soft:   rgba(251,191,36,0.10);
  --orange-mid:    rgba(251,191,36,0.18);

  --red:           #F87171;
  --red-2:         #FCA5A5;
  --red-soft:      rgba(248,113,113,0.10);
  --red-mid:       rgba(248,113,113,0.18);

  --purple:        #A78BFA;
  --purple-2:      #C4B5FD;
  --purple-soft:   rgba(167,139,250,0.10);
  --purple-mid:    rgba(167,139,250,0.18);

  /* ── Shadows (blue-tinted, no pure black) ─── */
  --shadow-xs:  0 2px  8px  rgba(4,8,20,0.40);
  --shadow-sm:  0 6px  18px rgba(4,8,20,0.48), 0 1px 4px rgba(4,8,20,0.30);
  --shadow-md:  0 12px 32px rgba(4,8,20,0.56), 0 2px 8px rgba(4,8,20,0.36);
  --shadow-lg:  0 24px 56px rgba(4,8,20,0.64), 0 4px 14px rgba(4,8,20,0.40);
  --shadow-xl:  0 40px 96px rgba(4,8,20,0.72), 0 8px 24px rgba(4,8,20,0.44);
  --shadow-glow:    0 0 0 1px rgba(59,130,246,0.28), 0 8px 32px rgba(59,130,246,0.22);
  --shadow-glow-lg: 0 0 0 1px rgba(59,130,246,0.20), 0 16px 48px rgba(59,130,246,0.18);
  --shadow-brand:   0 6px 24px rgba(59,130,246,0.36);
  --shadow-inner:   inset 0 1px 1px rgba(255,255,255,0.07);
  --shadow-inner-lg: inset 0 2px 4px rgba(0,0,0,0.40);

  /* ── Layout ──────────────────────────────── */
  --app-max: 1400px;
  --sidebar-w: 256px;

  /* ── Radius ──────────────────────────────── */
  --r-full: 9999px;
  --r-3xl: 32px;
  --r-2xl: 24px;
  --r-xl:  18px;
  --r-lg:  14px;
  --r-md:  10px;
  --r-sm:  7px;
  --r-xs:  5px;
  --r-2xs: 3px;

  /* ── Motion ──────────────────────────────── */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:   cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:  0.15s;
  --t-base:  0.22s;
  --t-slow:  0.36s;
  --t-enter: 0.42s;

  /* ── Font ────────────────────────────────── */
  --font: 'Outfit', 'SF Pro Display', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', ui-monospace, monospace;
}

/* ── LIGHT THEME ────────────────────────────── */
[data-theme="light"] {
  --page:          #F1F5FB;
  --page-2:        #E8EFF8;
  --page-3:        #DCE6F2;
  --page-4:        #D0DDED;
  --surface:       rgba(255,255,255,0.80);
  --surface-solid: #FFFFFF;
  --surface-2:     rgba(255,255,255,0.95);
  --surface-3:     rgba(255,255,255,1);
  --surface-glass: rgba(241,245,251,0.94);
  --card:          rgba(255,255,255,0.72);
  --card-hover:    rgba(255,255,255,0.94);
  --card-border:   rgba(30,60,110,0.10);
  --card-border-hover: rgba(30,60,110,0.20);
  --line:          rgba(30,60,110,0.12);
  --line-soft:     rgba(30,60,110,0.07);
  --line-mid:      rgba(30,60,110,0.16);
  --line-bright:   rgba(37,99,235,0.30);
  --line-inner:    rgba(255,255,255,0.80);
  --text:          #0C1422;
  --text-2:        #1E2D42;
  --muted:         #485E78;
  --muted-2:       #88A0BA;
  --muted-3:       #AABDD2;
  --brand:         #2563EB;
  --brand-2:       #3B82F6;
  --brand-3:       #60A5FA;
  --brand-soft:    rgba(37,99,235,0.07);
  --brand-mid:     rgba(37,99,235,0.13);
  --brand-glow:    rgba(37,99,235,0.18);
  --green:         #059669;
  --green-2:       #10B981;
  --green-soft:    rgba(5,150,105,0.08);
  --green-mid:     rgba(5,150,105,0.14);
  --orange:        #D97706;
  --orange-2:      #F59E0B;
  --orange-soft:   rgba(217,119,6,0.08);
  --orange-mid:    rgba(217,119,6,0.14);
  --red:           #DC2626;
  --red-2:         #EF4444;
  --red-soft:      rgba(220,38,38,0.07);
  --red-mid:       rgba(220,38,38,0.13);
  --purple:        #7C3AED;
  --purple-2:      #8B5CF6;
  --purple-soft:   rgba(124,58,237,0.08);
  --purple-mid:    rgba(124,58,237,0.14);
  --shadow-xs:  0 1px  4px  rgba(15,30,60,0.08);
  --shadow-sm:  0 4px  12px rgba(15,30,60,0.10), 0 1px 3px rgba(15,30,60,0.06);
  --shadow-md:  0 8px  24px rgba(15,30,60,0.12), 0 2px 6px rgba(15,30,60,0.07);
  --shadow-lg:  0 16px 40px rgba(15,30,60,0.14), 0 4px 12px rgba(15,30,60,0.08);
  --shadow-xl:  0 32px 72px rgba(15,30,60,0.16), 0 8px 20px rgba(15,30,60,0.09);
  --shadow-glow:    0 0 0 1px rgba(37,99,235,0.20), 0 6px 24px rgba(37,99,235,0.14);
  --shadow-glow-lg: 0 0 0 1px rgba(37,99,235,0.15), 0 12px 36px rgba(37,99,235,0.11);
  --shadow-brand:   0 4px 16px rgba(37,99,235,0.28);
  --shadow-inner:   inset 0 1px 1px rgba(255,255,255,0.90);
  --shadow-inner-lg: inset 0 2px 4px rgba(15,30,60,0.06);
}

/* ── RESETS ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  font-family: var(--font);
  background: var(--page);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Grain overlay — fixed, pointer-events-none */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.90' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.030'/%3E%3C/svg%3E");
  opacity: 1;
}

button, input, select, textarea { font: inherit; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Skip link — accessibility */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--brand);
  color: #fff;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: 16px; }

/* Tabular numbers for data */
.tabular { font-variant-numeric: tabular-nums; }

/* ── ANIMATIONS ──────────────────────────────── */
@keyframes krio-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes krio-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes krio-scale-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes krio-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0.28); }
  50%       { box-shadow: 0 0 0 6px rgba(52,211,153,0); }
}

@keyframes krio-pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.28); }
  50%       { box-shadow: 0 0 0 6px rgba(248,113,113,0); }
}

@keyframes krio-shimmer {
  from { background-position: -500px 0; }
  to   { background-position: 500px 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

@keyframes brand-glow-pulse {
  0%   { opacity: 0.6; transform: scale(1); }
  50%  { opacity: 0.9; transform: scale(1.08); }
  100% { opacity: 0.6; transform: scale(1); }
}

@keyframes orbit-cw  { to { transform: rotate(360deg); } }
@keyframes orbit-ccw { to { transform: rotate(-360deg); } }