/* global.css */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* LIGHT (default) */
:root {
  --bg: #ffffff;
  --text: #111111;
  --muted: #666666;

  --surface: #ffffff;
  --soft: #fafafa;

  --border: #eeeeee;
  --hover: #f2f2f2;

  --chip: #f4f4f4;
  --chipHover: #e6e6e6;

  --line: #e9e9e9;
  --dot: #dcdcdc;

  --navBg: rgba(255, 255, 255, 0.9);

  --shadowCard: 0 12px 30px rgba(0, 0, 0, 0.08);
  --shadowBtn: 0 14px 30px rgba(0, 0, 0, 0.18);

  --accent: #111111;
  --accentText: #ffffff;

  --placeholderBg: #efefef;
  --placeholderText: #d6d6d6;
}

/* DARK */
html[data-theme="dark"] {
  --bg: #0b0b0c;
  --text: #f5f5f5;
  --muted: #b7b7b7;

  --surface: #0f0f10;
  --soft: #111112;

  --border: #252525;
  --hover: #1b1b1d;

  --chip: #19191b;
  --chipHover: #232326;

  --line: #2a2a2c;
  --dot: #3a3a3c;

  --navBg: rgba(15, 15, 16, 0.85);

  --shadowCard: 0 12px 30px rgba(0, 0, 0, 0.55);
  --shadowBtn: 0 14px 30px rgba(0, 0, 0, 0.55);

  --accent: #f5f5f5;
  --accentText: #0b0b0c;

  --placeholderBg: #161618;
  --placeholderText: #2a2a2c;
}

body {
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

.container {
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
}

.section {
  padding: 90px 0;
}

.section--soft {
  background: var(--soft);
}

.section__title {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.section__line {
  width: 120px;
  height: 6px;
  background: var(--text);
  margin-top: 18px;
}

/* RESPONSIVE (common) */
@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .about {
    grid-template-columns: 1fr;
  }
  .timeline__notes {
    grid-template-columns: 1fr;
  }
}