/* Design tokens — dark theme by default, light toggle.
   Color palette inspired by monitoring dashboards. */

:root, :root[data-theme="dark"] {
  --bg: #07090f;
  --bg-soft: #0d1220;
  --surface: #131a2c;
  --surface-elev: #1a2238;
  --border: #232c45;
  --border-strong: #2d3855;

  --text: #e7ecf5;
  --text-muted: #9aa3b9;
  --text-faint: #5d6781;

  --accent: #34e2c4;        /* mint cyan, signature color */
  --accent-soft: #34e2c422;
  --accent-glow: #34e2c466;
  --accent-2: #7c5cff;      /* violet, secondary */
  --accent-3: #ffb84d;      /* amber, tertiary */
  --signal-green: #4ade80;
  --signal-red: #f87171;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 12px 30px -10px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 1px var(--border-strong), 0 18px 40px -12px rgba(52, 226, 196, 0.18);

  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Apple SD Gothic Neo",
               "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --container: 1180px;
  --gutter: clamp(20px, 4vw, 56px);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f6f7fb;
  --bg-soft: #ffffff;
  --surface: #ffffff;
  --surface-elev: #ffffff;
  --border: #e2e6ef;
  --border-strong: #c8cee0;

  --text: #161b2c;
  --text-muted: #4a5273;
  --text-faint: #8590ad;

  --accent: #0fa68a;
  --accent-soft: #0fa68a14;
  --accent-glow: #0fa68a30;
  --accent-2: #5635ff;
  --accent-3: #d18800;
  --signal-green: #15803d;
  --signal-red: #dc2626;

  --shadow: 0 12px 30px -16px rgba(20, 30, 60, 0.18);
  --shadow-glow: 0 0 0 1px var(--border), 0 20px 36px -22px rgba(15, 166, 138, 0.30);

  color-scheme: light;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "ss02";
  letter-spacing: -0.005em;
}

body {
  background-image:
    radial-gradient(circle at 12% 8%, rgba(52, 226, 196, 0.10), transparent 38%),
    radial-gradient(circle at 92% 14%, rgba(124, 92, 255, 0.10), transparent 42%);
  background-attachment: fixed;
}
:root[data-theme="light"] body {
  background-image:
    radial-gradient(circle at 12% 8%, rgba(15, 166, 138, 0.10), transparent 35%),
    radial-gradient(circle at 92% 14%, rgba(86, 53, 255, 0.06), transparent 42%);
}