:root {
  /* =========================
     TYPOGRAPHY
  ========================= */
  --font-main: "Inter", system-ui, sans-serif;
  --font-write: "Libre Baskerville", Georgia, serif;

  --font-size-base: 16px;
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.72rem;

  --line-height-editor: 1.6;
  --line-height-preview: 1.5;

  /* =========================
     LAYOUT
  ========================= */
  --app-max-width: 860px;

  --drawer-left-width: 320px;
  --drawer-right-width: 280px;
  --drawer-left-max-width: 88vw;
  --drawer-right-max-width: 85vw;

  --header-height: 52px;
  --toggle-size: 34px;
  --close-size: 30px;

  /* =========================
     CONTROL SIZES
  ========================= */
  --control-height-md: 30px;
  --control-height-lg: 36px;
  --control-height-xl: 38px;

  /* =========================
     RADII
  ========================= */
  --radius-md: 24px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* =========================
     SPACING
  ========================= */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 5px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 9px;
  --space-6: 10px;
  --space-7: 12px;
  --space-8: 14px;
  --space-9: 20px;
  --space-10: 24px;
  --space-13: 300px;
	
	/* =========================
   MOTION
========================= */
--transition-fast: 0.18s ease;
--transition-drawer: 0.22s ease;

  /* =========================
   SURFACES
========================= */
--bg-main: #101014;
--bg-surface: #15151a;
--bg-card: #1c1c22;

--bg-glass: #ffffff07;
--bg-glass-strong: #ffffff10;
--bg-overlay: #07070c90;
--bg-search-card: #ffffff06;
--bg-search-card-hover: #ffffff0b;
--bg-trash-item: #ffffff06;

/* =========================
   TEXT
========================= */
--text-primary: #d2d0d8;
--text-secondary: #b8b5c0;
--text-muted: #8c8895;
--text-dark: #7a7682;

/* =========================
   LIGHT EDITOR / LEGACY EDITOR
========================= */
--editor-bg-light: #ffffff;
--editor-text-light: #222222;
--editor-caret-light: #222222;
--editor-placeholder-light: #999999;

/* =========================
   ACCENT + INTERACTION
========================= */
--accent: #8a84a3;
--accent-soft: #8a84a31f;
--focus-ring: #8a84a347;
--selection-bg: #8a84a32e;

/* =========================
   HIGHLIGHTERS
========================= */

--highlight-adverb-bg: #ccff00;
--highlight-adverb-strong-line: #ff00aa;
--highlight-hard-line: #c400ff;
--highlight-very-hard-line: #ff00bb;
--highlight-passive-line: #00ffff;
--highlight-weak-line: #ffcc00;

/* =========================
   BORDERS + SHADOWS
========================= */
--border-soft: #ffffff0e;
--shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.32);
}

:root[data-theme="light"] {
  /* =========================
     SURFACES
  ========================= */
  --bg-main: #f6f4f8;
  --bg-surface: #ffffff;
  --bg-card: #f1edf4;

  --bg-glass: rgba(255, 255, 255, 0.72);
  --bg-glass-strong: rgba(255, 255, 255, 0.9);
  --bg-overlay: rgba(35, 26, 48, 0.18);
  --bg-search-card: rgba(98, 77, 122, 0.06);
  --bg-search-card-hover: rgba(98, 77, 122, 0.1);
  --bg-trash-item: rgba(98, 77, 122, 0.05);

  /* =========================
     TEXT
  ========================= */
  --text-primary: #2f2838;
  --text-secondary: #5f556b;
  --text-muted: #857a92;
  --text-dark: #a49bab;

  /* =========================
     LIGHT EDITOR / LEGACY EDITOR
  ========================= */
  --editor-bg-light: #ffffff;
  --editor-text-light: #222222;
  --editor-caret-light: #222222;
  --editor-placeholder-light: #999999;

  /* =========================
     ACCENT + INTERACTION
  ========================= */
  --accent: #7c7398;
  --accent-soft: rgba(124, 115, 152, 0.14);
  --focus-ring: rgba(124, 115, 152, 0.28);
  --selection-bg: rgba(124, 115, 152, 0.18);

  /* =========================
     BORDERS + SHADOWS
  ========================= */
  --border-soft: rgba(69, 52, 89, 0.1);
  --shadow-soft: 0 10px 30px rgba(62, 45, 82, 0.1);
	
	/* =========================
   HIGHLIGHTERS (LIGHT MODE)
========================= */

--highlight-adverb-bg: #FFF3A0;           /* soft pastel yellow */
--highlight-adverb-strong-line: #FFB3D1;  /* soft pink */
--highlight-hard-line: #FFD59E;           /* light orange */
--highlight-very-hard-line: #FFB3B3;      /* soft red */
--highlight-passive-line: #BFE9FF;        /* light sky blue */
--highlight-weak-line: #FFE7A3;           /* warm amber */

}