/* obsidian.css — Design Tokens */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.5rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  --lh-tight:  1.2;
  --lh-normal: 1.5;
  --lh-relax:  1.7;

  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  --blur-sm: blur(8px)  saturate(140%);
  --blur-md: blur(16px) saturate(160%);
  --blur-lg: blur(24px) saturate(180%);

  --tx-fast:  120ms ease;
  --tx-base:  200ms ease;
  --tx-slow:  320ms cubic-bezier(0.4, 0, 0.2, 1);
}

:root,
:root[data-theme="dark"] {
  --bg-primary:   #1e1e1e;
  --bg-secondary: #252525;
  --bg-elevated:  #2a2a2a;
  --bg-overlay:   rgba(0, 0, 0, 0.6);

  --text-primary:   #dcddde;
  --text-secondary: #9e9e9e;
  --text-muted:     #6c6c6c;
  --text-inverse:   #1e1e1e;

  --accent:         #7f6df2;
  --accent-hover:   #a277ff;
  --accent-pressed: #6a5ad9;
  --accent-text:    #ffffff;

  --success: #4ade80;
  --warning: #fbbf24;
  --danger:  #f87171;
  --info:    #60a5fa;

  --border:         #363636;
  --border-strong:  #4a4a4a;
  --border-focus:   var(--accent);

  --glass-bg:        rgba(255, 255, 255, 0.04);
  --glass-bg-strong: rgba(255, 255, 255, 0.08);
  --glass-border:    rgba(255, 255, 255, 0.08);
  --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.4);
  --glass-tint:      rgba(127, 109, 242, 0.06);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg-primary:   #ffffff;
  --bg-secondary: #f6f6f6;
  --bg-elevated:  #ffffff;
  --bg-overlay:   rgba(255, 255, 255, 0.7);

  --text-primary:   #222222;
  --text-secondary: #555555;
  --text-muted:     #888888;
  --text-inverse:   #ffffff;

  --accent:         #6e5cd9;
  --accent-hover:   #8a78f0;
  --accent-pressed: #5847c7;
  --accent-text:    #ffffff;

  --success: #16a34a;
  --warning: #d97706;
  --danger:  #dc2626;
  --info:    #2563eb;

  --border:         #e4e4e4;
  --border-strong:  #cccccc;
  --border-focus:   var(--accent);

  --glass-bg:        rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.75);
  --glass-border:    rgba(0, 0, 0, 0.06);
  --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.08);
  --glass-tint:      rgba(110, 92, 217, 0.04);

  color-scheme: light;
}

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

html {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text-primary);
  background: var(--bg-primary);
  background-image:
    radial-gradient(ellipse at top left,    var(--glass-tint) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, var(--glass-tint) 0%, transparent 50%);
  transition: background var(--tx-slow), color var(--tx-slow);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--tx-fast);
}
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-3) 0;
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl);  }
h4 { font-size: var(--fs-lg);  }

p { margin: 0 0 var(--sp-3) 0; }

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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