:root {
  /* --------------------------------
   * Colors - Primary
   * -------------------------------- */
  --color-primary: #f74008;
  --color-primary-hover: #f7a085;
  --color-secondary: #6c757d;
  --color-secondary-hover: #5a6268;

  /* --------------------------------
   * Colors - UI
   * -------------------------------- */
  --color-background: #efefef;
  --color-surface: #ffffff;
  --color-surface-alt: #fdfdfe;
  --color-border: #e9ecef;
  --color-border-light: #ddd;

  /* --------------------------------
   * Colors - Text
   * -------------------------------- */
  --color-text-primary: #495057;
  --color-text-secondary: #6c757d;
  --color-text-muted: #c2c2c2;
  --color-text-inverse: #ffffff;

  /* --------------------------------
   * Colors - Status
   * -------------------------------- */
  --color-error: #dc3545;
  --color-success: #28a745;
  --color-info: #007bff;
  --color-info-hover: #0056b3;

  /* --------------------------------
   * Colors - Header
   * -------------------------------- */
  --color-header-bg: #f8f9fa;
  --color-header-shadow: #a4a4a4;
  --color-header-hover: #eee;

  /* --------------------------------
   * Colors - Code Block
   * -------------------------------- */
  --color-code-bg: #111b2a;
  --color-code-header: #28303b;
  --color-code-text: #c9d1d9;
  --color-code-muted: #8b949e;

  /* --------------------------------
   * Typography
   * -------------------------------- */
  --font-family-base: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --font-family-mono: "Fira Code", monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.1rem;
  --font-size-xl: 1.8rem;
  --font-size-2xl: 2.2rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  --line-height-base: 1.5;

  /* --------------------------------
   * Spacing
   * -------------------------------- */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 20px;
  --spacing-xl: 25px;
  --spacing-2xl: 35px;

  /* --------------------------------
   * Border Radius
   * -------------------------------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-full: 20px;

  /* --------------------------------
   * Shadows
   * -------------------------------- */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 3px 10px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 15px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.15);

  /* --------------------------------
   * Transitions
   * -------------------------------- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;

  /* --------------------------------
   * Layout
   * -------------------------------- */
  --header-height: 60px;
  --content-max-width: 800px;
  --content-wide-max-width: 1200px;
  --sidebar-width: 200px;

  /* --------------------------------
   * Z-index
   * -------------------------------- */
  --z-header: 1000;
  --z-overlay: 1500;
  --z-sidebar: 2000;
}