/* ==========================================================================
   Design System Tokens
   Brand: "Calm. Direct. Proven."
   ========================================================================== */

:root {
  /* ----- Accent ----- */
  --accent: #3dc66c;
  --accent-hover: #64d189;
  --accent-pressed: #34a85c;

  /* Green opacity ramp — rgb(61, 198, 108) */
  --accent-05: rgba(61, 198, 108, 0.05);
  --accent-08: rgba(61, 198, 108, 0.08);
  --accent-10: rgba(61, 198, 108, 0.10);
  --accent-15: rgba(61, 198, 108, 0.15);
  --accent-20: rgba(61, 198, 108, 0.20);
  --accent-40: rgba(61, 198, 108, 0.40);

  /* ----- Semantic colors (constant) ----- */
  --warning: #F87171;
  --info: #60A5FA;
  --secondary: #A78BFA;

  --warning-10: rgba(248, 113, 113, 0.10);
  --info-10: rgba(96, 165, 250, 0.10);
  --secondary-10: rgba(167, 139, 250, 0.10);

  /* ----- Type ----- */
  --font-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale */
  --text-xs:    clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm:    clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --text-base:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg:    clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);
  --text-xl:    clamp(1.375rem, 1.28rem + 0.48vw, 1.625rem);
  --text-2xl:   clamp(1.75rem, 1.55rem + 1vw, 2.25rem);
  --text-3xl:   clamp(2.25rem, 1.9rem + 1.75vw, 3.25rem);
  --text-4xl:   clamp(3rem, 2.4rem + 3vw, 4.75rem);

  /* ----- Spacing ----- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 80px;
  --space-10: 120px;

  /* ----- Radii ----- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ----- Layout ----- */
  --container: 1120px;
  --container-narrow: 768px;

  /* ----- Motion ----- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.15s;
  --dur: 0.3s;
  --dur-slow: 0.6s;

  /* ----- Borders ----- */
  --border-w: 1px;

  /* ----- Component sizes (inspired by Untitled UI) ----- */
  --btn-xs: 32px;
  --btn-sm: 36px;
  --btn-md: 40px;
  --btn-lg: 44px;
  --btn-xl: 48px;
  --input-sm: 36px;
  --input-md: 40px;
  --input-lg: 44px;
  --sidebar-w: 240px;
  --sidebar-collapsed: 68px;
  --topbar-h: 56px;
  --avatar-xs: 24px;
  --avatar-sm: 32px;
  --avatar-md: 40px;
  --avatar-lg: 48px;
  --table-row-sm: 56px;
  --table-row-md: 72px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
}

/* ==========================================================================
   Theme: Dark (default)
   ========================================================================== */
[data-theme="dark"], :root {
  --bg: #0A0A0A;
  --bg-elev: #111111;
  --bg-elev-2: #1A1A1A;
  --surface: #111111;
  --surface-hover: #1A1A1A;
  --text: #e4e4e4;
  --text-muted: #9DA2B3;
  --text-subtle: #6E7180;
  --border: rgba(228, 228, 228, 0.08);
  --border-strong: rgba(228, 228, 228, 0.16);
  --border-focus: var(--accent);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px -1px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.35), 0 2px 4px -2px rgba(0,0,0,0.2);
  --shadow-lg: 0 12px 16px -4px rgba(0,0,0,0.3), 0 4px 6px -2px rgba(0,0,0,0.15), 0 2px 2px -1px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 24px -4px rgba(0,0,0,0.3), 0 8px 8px -4px rgba(0,0,0,0.15);
  --shadow-2xl: 0 24px 48px -12px rgba(0,0,0,0.4), 0 4px 4px -2px rgba(0,0,0,0.1);
  --backdrop: rgba(10, 10, 10, 0.72);
  color-scheme: dark;
}

/* ==========================================================================
   Theme: Dusk — Forest-green tinted dark
   ========================================================================== */
[data-theme="dusk"] {
  --bg: #0F1512;
  --bg-elev: #161E1A;
  --bg-elev-2: #1C2620;
  --surface: #131B17;
  --surface-hover: #1A2520;
  --text: #B8CCBE;
  --text-muted: #7E948A;
  --text-subtle: #6E8578;
  --border: rgba(184, 204, 190, 0.08);
  --border-strong: rgba(184, 204, 190, 0.18);
  --border-focus: var(--accent);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 48px rgba(0,0,0,0.55);
  --backdrop: rgba(15, 21, 18, 0.72);
  color-scheme: dark;
}

/* ==========================================================================
   Theme: Light
   ========================================================================== */
[data-theme="light"] {
  --bg: #EDEFF7;
  --bg-elev: #FFFFFF;
  --bg-elev-2: #D3D6E0;
  --surface: #FFFFFF;
  --surface-hover: #EDEFF7;
  --text: #111111;
  --text-muted: #6E7180;
  --text-subtle: #9DA2B3;
  --border: rgba(17, 17, 17, 0.10);
  --border-strong: rgba(17, 17, 17, 0.18);
  --border-focus: #2B9B52;
  --accent: #2B9B52;
  --accent-hover: #238A46;
  --accent-pressed: #1D753C;
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06);
  --shadow-md: 0 8px 24px rgba(17, 17, 17, 0.08);
  --shadow-lg: 0 24px 48px rgba(17, 17, 17, 0.10);
  --backdrop: rgba(237, 239, 247, 0.78);
  color-scheme: light;
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Selection */
::selection { background: var(--accent-40); color: var(--text); }

/* Focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip to content (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 10000;
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: #0A0A0A;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.skip-link:focus {
  top: var(--space-2);
}