*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --navy: #08172B;
  --navy-deep: #050E1A;
  --navy-mid: #0F2240;
  --navy-light: #183660;
  --navy-panel: #0C1E38;
  --navy-80: rgba(8, 23, 43, .80);
  --navy-10: rgba(8, 23, 43, .07);

  --orange: #E8670E;
  --orange-glow: #FF7A20;
  --orange-dim: #B55010;
  --orange-pale: rgba(232, 103, 14, .12);

  --electric: #1A7BFF;
  --electric-dim: #0F56B8;
  --electric-pale: rgba(26, 123, 255, .10);

  --ice: #F0F4FA;
  --ice-mid: #DFE8F3;
  --white: #FFFFFF;
  --slate: #5A718F;
  --slate-light: #8399BB;

  --green: #0CA355;
  --green-pale: rgba(12, 163, 85, .12);
  --red: #D63B3B;
  --gold: #E8A612;
  --gold-pale: rgba(232, 166, 18, .12);

  /* Alias tokens kept for template compatibility */
  --ink: var(--navy);
  --amber: var(--orange);
  --amber-dim: var(--orange-dim);
  --green-ok: var(--green);
  --red-warn: var(--red);
  --ice-light: #F7F9FC;
  --navy-pale: rgba(8, 23, 43, .04);
  --border: var(--ice-mid);
  --light: var(--white);
  --gray: var(--slate-light);
  --primary: var(--orange);
  --secondary: var(--navy);
  --radius: var(--r12);
  --shadow: var(--sh-md);
  --sidebar-width: 300px;
  --topbar-height: 74px;

  --f-display: 'Barlow Condensed', sans-serif;
  --f-body: 'Inter', sans-serif;
  --f-mono: 'JetBrains Mono', monospace;

  --r2: 4px;
  --r4: 6px;
  --r6: 8px;
  --r8: 10px;
  --r12: 14px;
  --r16: 18px;
  --r-full: 9999px;

  --sh-xs: 0 1px 3px rgba(8, 23, 43, .08);
  --sh-sm: 0 2px 10px rgba(8, 23, 43, .12);
  --sh-md: 0 8px 30px rgba(8, 23, 43, .16);
  --sh-lg: 0 20px 60px rgba(8, 23, 43, .22);
  --sh-xl: 0 40px 100px rgba(8, 23, 43, .30);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--f-body);
  background: var(--ice);
  color: var(--navy);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}