/* css/tokens.css — loaded first on every page */
:root {
  /* Backgrounds */
  --bg-main:           #fefffe;
  --bg-sidebar:        #e5fcf5;
  --bg-card:           #ffffff;
  --bg-input:          #ffffff;
  --bg-overlay:        rgba(33, 1, 36, 0.4);

  /* Brand */
  --accent-light:      #b3dec1;
  --accent-dark:       #210124;
  --accent-primary:    #750d37;

  /* Text */
  --text-primary:      #210124;
  --text-secondary:    #5a4060;
  --text-muted:        #9a8a9e;
  --text-inverse:      #fefffe;

  /* Buttons */
  --btn-primary-bg:    #750d37;
  --btn-primary-text:  #fefffe;
  --btn-primary-hover: #5a0a29;
  --btn-secondary-bg:  #e5fcf5;
  --btn-secondary-text:#210124;
  --btn-secondary-hover:#b3dec1;

  /* Sidebar */
  --sidebar-hover:     #b3dec1;
  --sidebar-active-bg: #750d37;
  --sidebar-active-txt:#fefffe;
  --sidebar-divider:   #b3dec1;

  /* Chat bubbles */
  --bubble-user-bg:    #750d37;
  --bubble-user-txt:   #fefffe;
  --bubble-asst-bg:    #ffffff;
  --bubble-asst-txt:   #210124;
  --bubble-border:     #b3dec1;

  /* Approval card */
  --approval-bg:       #fff5f8;
  --approval-border:   #750d37;
  --diff-old-bg:       #fde8ec;
  --diff-old-txt:      #750d37;
  --diff-new-bg:       #e8f8ee;
  --diff-new-txt:      #1a5e35;

  /* Status dots */
  --dot-green:         #34c77b;
  --dot-red:           #e04040;
  --dot-amber:         #f0a500;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Radius */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-pill:9999px;

  /* Shadows */
  --shadow-card:  0 1px 3px rgba(33,1,36,0.08);
  --shadow-modal: 0 8px 32px rgba(33,1,36,0.16);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg-main);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-primary); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; color: inherit; }
::selection { background: var(--accent-light); color: var(--accent-dark); }