/* KetoDock - Base: MD3 tokens, reset, typography, dark/light theme */
:root {
  /* Zone colors (constant across themes) */
  --zone-purple:#8B5CF6; --zone-blue:#0EA5E9; --zone-green:#22D3EE;
  --zone-orange:#F97316; --zone-red:#EF4444;
  /* MD3 Dark theme (default) — true neutral blacks & grays */
  --bg-primary:#141218; --bg-secondary:#211F26; --bg-tertiary:#2B2930;
  --bg-card:#1D1B20; --bg-input:#2B2930; --bg-hover:#36343B;
  --surface-elevated:#211F26;
  --text-primary:#E6E0E9; --text-secondary:#CAC4D0; --text-muted:#938F99;
  --border-color:#49454F; --border-focus:#A8C7FA;
  --accent:#A8C7FA; --accent-hover:#89B4F8; --on-accent:#062E6F;
  --accent-container:#004397; --on-accent-container:#D3E3FD;
  --accent-faint:rgba(168,199,250,.16);
  --danger:#EF4444; --danger-hover:#DC2626; --success:#22C55E; --warning:#F59E0B;
  --scrim:rgba(0,0,0,.32);
  /* Spacing */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem;
  /* MD3 Shape scale */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:28px; --r-full:9999px;
  /* Fonts */
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'SF Mono','Fira Code','Roboto Mono',monospace;
  /* MD3 Elevation */
  --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);
  --shadow-md:0 1px 2px rgba(0,0,0,.3),0 2px 6px 2px rgba(0,0,0,.15);
  --shadow-lg:0 4px 8px 3px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.3);
  /* Layout */
  --nav-h:56px; --sidebar-w:240px; --max-w:1200px;
}

/* MD3 Light theme */
html.light {
  --bg-primary:#FEF7FF; --bg-secondary:#F3EDF7; --bg-tertiary:#ECE6F0;
  --bg-card:#F7F2FA; --bg-input:#ECE6F0; --bg-hover:#E6E0E9;
  --surface-elevated:#F3EDF7;
  --text-primary:#1D1B20; --text-secondary:#49454F; --text-muted:#79747E;
  --border-color:#CAC4D0; --border-focus:#0B57D0;
  --accent:#0B57D0; --accent-hover:#0842A0; --on-accent:#FFFFFF;
  --accent-container:#D3E3FD; --on-accent-container:#041E49;
  --accent-faint:rgba(11,87,208,.12);
  --shadow-sm:0 1px 2px rgba(0,0,0,.1),0 1px 3px 1px rgba(0,0,0,.05);
  --shadow-md:0 1px 2px rgba(0,0,0,.15),0 2px 6px 2px rgba(0,0,0,.08);
  --shadow-lg:0 4px 8px 3px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.15);
}

/* Theme transition (applied after initial load to prevent FOUC) */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease !important;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;background:var(--bg-primary)}
body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.5;min-height:100dvh;overflow-x:hidden}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent);text-decoration:none}
ul,ol{list-style:none}
h1{font-size:1.875rem;font-weight:700;line-height:1.2}
h2{font-size:1.5rem;font-weight:600;line-height:1.3}
h3{font-size:1.25rem;font-weight:600;line-height:1.4}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.hidden{display:none!important}
.text-center{text-align:center}
.w-full{width:100%}
::selection{background:var(--accent);color:var(--on-accent)}

/* MD3 Page Transitions — hidden until data ready, then reveal with fade-through */
@keyframes md3-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes md3-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.92)}}
.app-content,.auth-container,.ob-shell{opacity:0}
.app-content.revealed,.auth-container.revealed,.ob-shell.revealed{animation:md3-in .21s cubic-bezier(0.05,0.7,0.1,1) both}
body.page-exit .app-content,body.page-exit .auth-container,body.page-exit .ob-shell{animation:md3-out .09s cubic-bezier(0.3,0,0.8,0.15) both}