:root {
  color-scheme: light;

  --nc-bg: #f5f7f9;
  --nc-surface: #ffffff;
  --nc-surface-2: #eceff3;
  --nc-border: #d3dae3;
  --nc-border-strong: #b6c2cf;
  --nc-text: #101828;
  --nc-text-2: #5c6b7c;
  --nc-text-3: #8494a7;

  --nc-accent: #0e7c86;
  --nc-accent-hover: #0a656e;
  --nc-accent-weak: #e2f2f3;
  --nc-on-accent: #ffffff;

  --nc-amber: #b45309;
  --nc-amber-weak: #fbf1e2;
  --nc-danger: #b3261e;
  --nc-danger-weak: #f9e9e8;
  --nc-success: #1a7f37;
  --nc-success-weak: #e7f3ea;
  --nc-info: #0b57d0;
  --nc-info-weak: #e8f0fb;

  --nc-bit-net-bg: rgba(14, 124, 134, 0.14);
  --nc-bit-net-fg: #0e7c86;
  --nc-bit-host-bg: var(--nc-surface-2);
  --nc-bit-host-fg: var(--nc-text-3);
  --nc-bit-borrow-bg: rgba(180, 83, 9, 0.16);
  --nc-bit-borrow-fg: #8a4207;

  --nc-radius-ctrl: 6px;
  --nc-radius-card: 10px;
  --nc-shadow-sm: 0 1px 2px rgba(10, 20, 35, 0.06);
  --nc-shadow-md: 0 6px 20px rgba(10, 20, 35, 0.1);
  --nc-focus-ring: 0 0 0 2px var(--nc-bg), 0 0 0 4px var(--nc-accent);
  --nc-dur-fast: 140ms;
  --nc-dur-panel: 240ms;

  --font-ui:
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "BIZ UDPGothic",
    "Yu Gothic UI",
    Meiryo,
    system-ui,
    -apple-system,
    sans-serif;
  --font-data:
    "NC Mono",
    ui-monospace,
    "SFMono-Regular",
    Consolas,
    Menlo,
    monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --nc-bg: #0d1319;
  --nc-surface: #141c25;
  --nc-surface-2: #1b2632;
  --nc-border: #2a3846;
  --nc-border-strong: #3b4c5d;
  --nc-text: #e7edf3;
  --nc-text-2: #a3b3c2;
  --nc-text-3: #748699;

  --nc-accent: #4dd6d2;
  --nc-accent-hover: #7fe3e0;
  --nc-accent-weak: rgba(77, 214, 210, 0.12);
  --nc-on-accent: #06282a;

  --nc-amber: #f0b45a;
  --nc-amber-weak: rgba(240, 180, 90, 0.14);
  --nc-danger: #f2726a;
  --nc-danger-weak: rgba(242, 114, 106, 0.14);
  --nc-success: #57c07a;
  --nc-success-weak: rgba(87, 192, 122, 0.14);
  --nc-info: #7aa8f7;
  --nc-info-weak: rgba(122, 168, 247, 0.14);

  --nc-bit-net-bg: rgba(77, 214, 210, 0.16);
  --nc-bit-net-fg: #4dd6d2;
  --nc-bit-borrow-bg: rgba(240, 180, 90, 0.18);
  --nc-bit-borrow-fg: #f0b45a;

  --nc-shadow-sm: none;
  --nc-shadow-md: none;
}

:root,
:root[data-theme="light"] {
  --color-bg: var(--nc-bg);
  --color-bg-grid: rgba(14, 124, 134, 0.055);
  --color-bg-subtle: var(--nc-surface-2);
  --color-surface: var(--nc-surface);
  --color-surface-muted: #f1f4f7;
  --color-surface-strong: var(--nc-accent-weak);
  --color-console: var(--nc-surface);
  --color-console-raised: var(--nc-surface);
  --color-console-muted: var(--nc-surface-2);
  --color-console-line: rgba(14, 124, 134, 0.22);
  --color-line: var(--nc-border);
  --color-line-strong: var(--nc-border-strong);
  --color-text: var(--nc-text);
  --color-text-strong: var(--nc-text);
  --color-muted: var(--nc-text-2);
  --color-muted-strong: var(--nc-text-2);
  --color-border: var(--nc-border);
  --color-border-strong: var(--nc-border-strong);
  --color-primary: var(--nc-accent);
  --color-primary-dark: var(--nc-accent-hover);
  --color-primary-soft: var(--nc-accent-weak);
  --color-accent: var(--nc-amber);
  --color-accent-blue: var(--nc-info);
  --color-accent-green: var(--nc-success);
  --color-accent-amber: var(--nc-amber);
  --color-accent-violet: #7a4fd0;
  --color-success: var(--nc-success);
  --color-info: var(--nc-info);
  --color-warning: var(--nc-amber);
  --focus-ring: 3px solid rgba(14, 124, 134, 0.36);
  --font-mono: var(--font-data);
}

:root[data-theme="dark"] {
  --color-bg-grid: rgba(77, 214, 210, 0.055);
  --color-surface-muted: var(--nc-surface-2);
  --color-accent-violet: #b39af0;
  --interactive-bg: var(--nc-surface);
  --interactive-hover-bg: var(--nc-accent-weak);
  --passive-badge-bg: var(--nc-surface-2);
  --passive-badge-border: var(--nc-border);
  --shadow-soft: none;
  --shadow-panel: none;
  --shadow-inset: none;
}