/* ============================================================
   БАЗА · КС 48
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Основные цвета */
  --ks-yellow: #E5C800;
  --ks-yellow-dark: #D4B800;
  --ks-yellow-light: #FFE55C;
  --ks-yellow-bg: #FFF8E1;
  --ks-yellow-deep: #B58B00;

  --ks-dark: #2C2C2C;
  --ks-dark-deep: #1A1A1A;
  --ks-bg: #F8F7F4;
  --ks-bg-soft: #FAFAFA;
  --ks-white: #FFFFFF;

  /* Тексты */
  --ks-text-primary: #1E1E1E;
  --ks-text-secondary: #4A4A4A;
  --ks-text-muted: #7A7A7A;
  --ks-text-soft: #999999;
  --ks-text-disabled: #CCCCCC;

  /* Границы */
  --ks-border-light: #F0F0F0;
  --ks-border: #E5E5E5;
  --ks-border-strong: #EAEAEA;
  --ks-divider: #E0E0E0;

  /* Семантика */
  --ks-success: #2E7D32;
  --ks-success-bg: #E8F5E9;
  --ks-warning: #F57F17;
  --ks-warning-bg: #FFF8E1;
  --ks-danger: #C62828;
  --ks-danger-bg: #FFEBEE;
  --ks-info: #1565C0;
  --ks-info-bg: #E3F2FD;

  /* Скругления */
  --radius-card: 40px;
  --radius-inner: 28px;
  --radius-block: 24px;
  --radius-medium: 20px;
  --radius-small: 14px;
  --radius-pill: 60px;

  /* Тени */
  --shadow-card: 0 12px 28px rgba(0,0,0,0.05);
  --shadow-hover: 0 12px 28px rgba(229,200,0,0.12);
  --shadow-modal: 0 20px 60px rgba(0,0,0,0.25);

  /* Шрифты */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-head: 'DM Sans', 'Inter', sans-serif;
  --font-mono: 'Consolas', 'Monaco', monospace;
  /* Sidebar */
  --ks-sidebar-bg: #2C2C2C;
}

html, body {
  background: var(--ks-bg);
  font-family: var(--font-main);
  color: var(--ks-text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

body {
  padding: 40px 24px 60px;
  display: flex;
  justify-content: center;
}

/* ============================================================
   КОНТЕЙНЕР
   ============================================================ */
.container {
  max-width: 1200px;
  width: 100%;
}

/* ============================================================
   ТИПОГРАФИКА
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ks-dark);
  line-height: 1.15;
  letter-spacing: -0.3px;
}

h1 { font-size: 32px; font-weight: 700; }
h2 { font-size: 24px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; }

p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ks-text-secondary);
}

code {
  font-family: var(--font-mono);
  background: #F0F0F0;
  color: #C7254E;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 12.5px;
}

pre {
  background: var(--ks-dark);
  color: #E0E0E0;
  padding: 18px 22px;
  border-radius: var(--radius-small);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
}
/* ============================================================
   ТЁМНАЯ ТЕМА
   ============================================================ */
[data-theme="dark"] {
  /* Основные цвета */
  --ks-yellow: #E5C800;
  --ks-yellow-dark: #D4B800;
  --ks-yellow-light: #FFE55C;
  --ks-yellow-bg: #2E2600;
  --ks-yellow-deep: #FFD54F;

  --ks-dark: #2C2C2C;
  --ks-dark-deep: #1A1A1A;
  --ks-bg: #141414;
  --ks-bg-soft: #1E1E1E;
  --ks-white: #242424;

  /* Тексты */
  --ks-text-primary: #F0F0F0;
  --ks-text-secondary: #C0C0C0;
  --ks-text-muted: #909090;
  --ks-text-soft: #707070;
  --ks-text-disabled: #555555;

  /* Границы */
  --ks-border-light: #262626;
  --ks-border: #383838;
  --ks-border-strong: #303030;
  --ks-divider: #333333;

  /* Семантика */
  --ks-success: #66BB6A;
  --ks-success-bg: #1B3A1D;
  --ks-warning: #FFA726;
  --ks-warning-bg: #3D2A00;
  --ks-danger: #EF5350;
  --ks-danger-bg: #3D1A1A;
  --ks-info: #42A5F5;
  --ks-info-bg: #0D2A42;

  /* Sidebar */
  --ks-sidebar-bg: #0F0F0F;

  /* Тени */
  --shadow-card: 0 12px 28px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 12px 28px rgba(229, 200, 0, 0.18);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* Точечные правки для тёмной темы */
[data-theme="dark"] .btn {
  background: #3A3A3A;
  color: #F0F0F0;
}
[data-theme="dark"] .btn:hover {
  background: #4A4A4A;
}
[data-theme="dark"] .btn-accent {
  background: var(--ks-yellow);
  color: #2C2C2C;
}
[data-theme="dark"] .btn-accent:hover {
  background: var(--ks-yellow-dark);
}
[data-theme="dark"] .btn-outline {
  background: transparent;
  color: #C0C0C0;
  border-color: #383838;
}
[data-theme="dark"] .btn-outline:hover {
  background: #2A2A2A;
}
[data-theme="dark"] code {
  background: #2A2A2A;
  color: #FFB4B4;
}
[data-theme="dark"] pre {
  background: #0F0F0F;
  color: #D0D0D0;
}