/* ============================================================
   BASE STYLES
   CSS Variables, resets, and utility classes
   ============================================================ */

:root{
  /* Legacy variable mappings for compatibility */
  --bg: var(--color-bg);
  --bg-alt: var(--color-bg-secondary);
  --bg-card: var(--color-bg-card);
  --bg-primary: var(--color-bg-primary);
  --bg-secondary: var(--color-bg-secondary);
  --bg-hover: var(--color-bg-hover);
  --fg: var(--color-text-primary);
  --fg-dim: var(--color-text-secondary);
  --fg-faint: var(--color-text-tertiary);
  --fg-primary: var(--color-text-primary);
  --fg-secondary: var(--color-text-secondary);
  --line: var(--color-border);
  --border: var(--color-border);
  --purple: var(--color-brand-primary);
  --purple-dark: var(--color-brand-hover);
  --purple-light: var(--color-brand-primary);
  --accent: var(--color-brand-primary);
  --accent-hover: var(--color-brand-hover);
  --amber: var(--color-warning);
  --amber-light: var(--color-warning);
  --green: var(--color-success);
  --red: var(--color-danger);
  --shadow: var(--shadow-lg);
  --tab-height: var(--layout-tab-height);
}

*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; height:100%;
  background:var(--color-bg); color:var(--color-text-primary);
  font-family:var(--font-family-sans);
  overflow:hidden;
  -webkit-tap-highlight-color: transparent;
}
::selection{ background:var(--color-brand-primary); color:#fff; }