@import "tailwindcss";

/* --- Design Tokens (Tokyo Night) --- */

/* Light mode — Tokyo Night Day */
:root {
  --surface: #c8cad3;
  --surface-raised: #d0d5e3;
  --surface-inset: #c4c8da;
  --surface-hover: #c1c9df;
  --ink: #3760bf;
  --ink-secondary: #6172b0;
  --ink-muted: #848cb5;
  --ink-faint: #a8aecb;
  --outline: #b4b5b9;
  --outline-subtle: #c4c8da;
  --accent: #2e7de9;
  --accent-hover: #2e7de9;
  --danger: #f52a65;
  --danger-soft: rgba(245, 42, 101, 0.08);
  --diff-added: #587539;
  --diff-added-soft: rgba(88, 117, 57, 0.24);
  --diff-removed: #f52a65;
  --diff-removed-soft: rgba(245, 42, 101, 0.16);
  --diff-modified: #8c6c3e;
  --diff-modified-soft: rgba(140, 108, 62, 0.16);
  --diff-unchanged-border: #b4b5b9;
  --diff-unchanged-bg: #c4c8da;
  --diff-unchanged-text: #6172b0;
  --edge-added: #587539;
  --edge-removed: #f52a65;
  --edge-unchanged: #a8aecb;
  --edge-default: #a8aecb;
  --edge-lateral: #2e7de9;
  --canvas-dot: #b4b5b9;
  --minimap-bg: #d0d5e3;
  --handle: #848cb5;
  --badge-bg: rgba(132, 140, 181, 0.15);
  --badge-text: #6172b0;
  --code-bg: #c4c8da;
  --action-create: var(--diff-added);
  --action-create-soft: var(--diff-added-soft);
  --action-update: var(--diff-modified);
  --action-update-soft: var(--diff-modified-soft);
  --action-delete: var(--diff-removed);
  --action-delete-soft: var(--diff-removed-soft);
  --action-recreate: #b15c00;
  --action-recreate-soft: rgba(177, 92, 0, 0.12);
  --action-resize: var(--accent);
  --action-resize-soft: rgba(46, 125, 233, 0.12);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Dark mode — Tokyo Night Storm */
.dark {
  --surface: #1f2335;
  --surface-raised: #24283b;
  --surface-inset: #292e42;
  --surface-hover: #292e42;
  --ink: #c0caf5;
  --ink-secondary: #a9b1d6;
  --ink-muted: #737aa2;
  --ink-faint: #565f89;
  --outline: #292e42;
  --outline-subtle: #1d202f;
  --accent: #7aa2f7;
  --accent-hover: #7aa2f7;
  --danger: #f7768e;
  --danger-soft: rgba(247, 118, 142, 0.1);
  --diff-added: #9ece6a;
  --diff-added-soft: rgba(158, 206, 106, 0.12);
  --diff-removed: #f7768e;
  --diff-removed-soft: rgba(247, 118, 142, 0.12);
  --diff-modified: #e0af68;
  --diff-modified-soft: rgba(224, 175, 104, 0.12);
  --diff-unchanged-border: #545c7e;
  --diff-unchanged-bg: #292e42;
  --diff-unchanged-text: #a9b1d6;
  --edge-added: #9ece6a;
  --edge-removed: #f7768e;
  --edge-unchanged: #3b4261;
  --edge-default: #545c7e;
  --edge-lateral: #7aa2f7;
  --canvas-dot: #292e42;
  --minimap-bg: #1b1e2d;
  --handle: #545c7e;
  --badge-bg: rgba(84, 92, 126, 0.25);
  --badge-text: #a9b1d6;
  --code-bg: #1b1e2d;
  --action-create: var(--diff-added);
  --action-create-soft: var(--diff-added-soft);
  --action-update: var(--diff-modified);
  --action-update-soft: var(--diff-modified-soft);
  --action-delete: var(--diff-removed);
  --action-delete-soft: var(--diff-removed-soft);
  --action-recreate: #ff9e64;
  --action-recreate-soft: rgba(255, 158, 100, 0.12);
  --action-resize: var(--accent);
  --action-resize-soft: rgba(122, 162, 247, 0.12);
  --shadow-sm: none;
  --shadow-md: none;
}

/* High Contrast — Accessibility */
.high-contrast {
  --surface: #000000;
  --surface-raised: #1a1a1a;
  --surface-inset: #111111;
  --surface-hover: #333333;
  --ink: #ffffff;
  --ink-secondary: #f0f0f0;
  --ink-muted: #e0e0e0;
  --ink-faint: #cccccc;
  --outline: #ffffff;
  --outline-subtle: #999999;
  --accent: #66ccff;
  --accent-hover: #99ddff;
  --danger: #ff3333;
  --danger-soft: #330000;
  --diff-added: #00ff41;
  --diff-added-soft: #002200;
  --diff-removed: #ff3333;
  --diff-removed-soft: #330000;
  --diff-modified: #ffff00;
  --diff-modified-soft: #333300;
  --diff-unchanged-border: #ffffff;
  --diff-unchanged-bg: #1a1a1a;
  --diff-unchanged-text: #e0e0e0;
  --edge-added: #00ff41;
  --edge-removed: #ff3333;
  --edge-unchanged: #666666;
  --edge-default: #999999;
  --edge-lateral: #66ccff;
  --canvas-dot: #444444;
  --minimap-bg: #111111;
  --handle: #ffffff;
  --badge-bg: #333333;
  --badge-text: #ffffff;
  --code-bg: #111111;
  --action-create: var(--diff-added);
  --action-create-soft: var(--diff-added-soft);
  --action-update: var(--diff-modified);
  --action-update-soft: var(--diff-modified-soft);
  --action-delete: var(--diff-removed);
  --action-delete-soft: var(--diff-removed-soft);
  --action-recreate: #ff8800;
  --action-recreate-soft: #331a00;
  --action-resize: var(--accent);
  --action-resize-soft: #002233;
  --shadow-sm: none;
  --shadow-md: none;
}

/* Register tokens as Tailwind theme colors */
@theme {
  --color-surface: var(--surface);
  --color-surface-raised: var(--surface-raised);
  --color-surface-inset: var(--surface-inset);
  --color-surface-hover: var(--surface-hover);
  --color-ink: var(--ink);
  --color-ink-secondary: var(--ink-secondary);
  --color-ink-muted: var(--ink-muted);
  --color-ink-faint: var(--ink-faint);
  --color-outline: var(--outline);
  --color-outline-subtle: var(--outline-subtle);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-danger: var(--danger);
  --color-danger-soft: var(--danger-soft);
  --color-diff-added: var(--diff-added);
  --color-diff-added-soft: var(--diff-added-soft);
  --color-diff-removed: var(--diff-removed);
  --color-diff-removed-soft: var(--diff-removed-soft);
  --color-diff-modified: var(--diff-modified);
  --color-diff-modified-soft: var(--diff-modified-soft);
  --color-diff-unchanged-border: var(--diff-unchanged-border);
  --color-diff-unchanged-bg: var(--diff-unchanged-bg);
  --color-diff-unchanged-text: var(--diff-unchanged-text);
  --color-handle: var(--handle);
  --color-badge-bg: var(--badge-bg);
  --color-badge-text: var(--badge-text);
  --color-code-bg: var(--code-bg);
  --color-action-create: var(--action-create);
  --color-action-create-soft: var(--action-create-soft);
  --color-action-update: var(--action-update);
  --color-action-update-soft: var(--action-update-soft);
  --color-action-delete: var(--action-delete);
  --color-action-delete-soft: var(--action-delete-soft);
  --color-action-recreate: var(--action-recreate);
  --color-action-recreate-soft: var(--action-recreate-soft);
  --color-action-resize: var(--action-resize);
  --color-action-resize-soft: var(--action-resize-soft);
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
}

/* Base styles */
html {
  background-color: var(--surface);
  color: var(--ink);
}
