:root {
  /* Typography */
  --font-base: sans-serif;
  --font-mono: monospace;

  /* App backgrounds */
  --bg-app:    #f5f5f5;
  --bg-white:  #ffffff;
  --bg-subtle: #fafafa;
  --bg-hover:  #f5f5f5;
  --bg-focus:  #f0f4ff;

  /* Sidebar */
  --bg-sidebar:          #111111;
  --text-sidebar:        #aaaaaa;
  --text-sidebar-active: #ffffff;
  --bg-sidebar-hover:    #222222;
  --border-sidebar:      #333333;

  /* Text */
  --text-primary:     #222222;
  --text-secondary:   #444444;
  --text-tertiary:    #555555;
  --text-muted:       #888888;
  --text-light:       #aaaaaa;
  --text-lighter:     #bbbbbb;
  --text-placeholder: #cccccc;

  /* Borders */
  --border-default: #e5e5e5;
  --border-light:   #f0f0f0;
  --border-lighter: #dddddd;

  /* Accent */
  --accent:             #111111;
  --accent-hover:       #333333;
  --accent-active-bg:   #e0e7ff;
  --accent-active-text: #4338ca;
  --accent-link:        #1d4ed8;
  --accent-danger:      #e53e3e;
  --blockquote-border:  #d1d5db;

  /* Overlays & shadows */
  --overlay:           rgba(0, 0, 0, 0.4);
  --shadow-card:       0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 3px 10px rgba(0, 0, 0, 0.12);
  --shadow-modal:      0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-popup:      0 4px 20px rgba(0, 0, 0, 0.15);

  /* Border radius */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-pill: 20px;
  --radius-full: 50%;
}