:root {
  --bg: #f7f7f8;
  --surface: #ffffff;
  --surface-2: #f1f1f4;
  --surface-3: #e7e7ec;
  --border: #dcdce2;
  --text: #17181c;
  --text-2: #333333;
  --text-3: #8a8b93;
  --accent: #6c5ce7;
  --accent-soft: rgba(108, 92, 231, 0.12);
  --accent-strong: #5a4bd1;
  --danger: #e5484d;
  --pdf: #ef6461;
  --pptx: #f2a154;
  --docx: #5b9dfb;
  --img: #4dd0b0;
  --video: #c084fc;

  --font-size-base: 16px;
  --font-size-sm: 15px;
  --font-size-xs: 13.5px;
  --radius: 10px;
  --gutter: 24px;
  --gutter-mobile: 14px;
}

:root[data-theme="dark"] {
  --bg: #0b0c10;
  --surface: #14151b;
  --surface-2: #1b1d25;
  --surface-3: #23252f;
  --border: #282b35;
  --text: #f2f3f5;
  --text-2: #9096a3;
  --text-3: #6b7280;
  --accent: #8b7cf6;
  --accent-soft: rgba(139, 124, 246, 0.16);
  --accent-strong: #a596ff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0c10;
    --surface: #14151b;
    --surface-2: #1b1d25;
    --surface-3: #23252f;
    --border: #282b35;
    --text: #f2f3f5;
    --text-2: #ffffff;
    --text-3: #6b7280;
    --accent: #8b7cf6;
    --accent-soft: rgba(139, 124, 246, 0.16);
    --accent-strong: #a596ff;
  }
}