:root {
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --display-weight: 500;
  --display-tracking: -0.035em;

  --radius: 8px;

  --text-micro: 12px;
  --text-caption: 14px;
  --text-body-sm: 16px;
  --text-body: 18px;
  --text-subheading: 24px;
  --text-heading-sm: 30px;
  --tracking-tight: -0.03em;
  --tracking-snug: -0.02em;
  --tracking-label: 0.025em;

  --header-h: 64px;
  --frame-margin: 24px;
  --frame-margin-lg: 120px;
  --node: 5px;
  --control-h: 40px;
  --cell: 56px;
}

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

  --surface-0: #fafafa;
  --surface-1: #ffffff;
  --surface-2: #f5f5f5;
  --surface-3: #efefef;

  --line: #e5e5e5;
  --line-strong: #d4d4d4;
  --line-control: #8a8a8a;

  --text: #111111;
  --text-2: #4d4d4d;
  --muted: #6b6b6b;
  --text-tone: #8a8a8a;

  --accent-fill: #000000;
  --accent-fill-hover: #2a2a2a;
  --accent-ink: #ffffff;
  --accent-mark: #111111;
  --node-fill: #c4c4c4;
  --focus: #000000;

  --success: #1f7a45;
  --warning: #8a5a00;
  --danger: #b3261e;
  --info: #1d5fd1;

  --header-bg: rgba(250, 250, 250, 0.86);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --pixel-fill: #ececec;

  --il-traco: #111111;
  --il-face: #ffffff;
  --il-dir: #f3f3f3;
  --il-acento: #111111;
  --il-acento-2: #1c1c1c;
  --il-acento-3: #000000;
  --il-sobre-acento: #ffffff;
}

:root {
  --pixel-grid: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  --pad: clamp(28px, 5.5vw, 80px);
  --pad-borda: clamp(20px, 2.4vw, 32px);
  --gutter: var(--pad);
  --section-y: var(--pad);
}
@media (max-width: 768px) {
  :root { --section-y: 56px; }
}
@media (max-width: 414px) {
  :root { --frame-margin: 8px; --gutter: 16px; --pad-borda: 16px; }
}

[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #0a0a0a;
  --surface-1: #141414;
  --surface-2: #1c1c1c;
  --surface-3: #262626;
  --line: #262626;
  --line-strong: #3a3a3a;
  --line-control: #6b6b6b;
  --text: #f2f2f2;
  --text-2: #b5b5b5;
  --muted: #8c8c8c;
  --text-tone: #7a7a7a;
  --accent-fill: #ffffff;
  --accent-fill-hover: #e0e0e0;
  --accent-ink: #000000;
  --accent-mark: #f2f2f2;
  --node-fill: #4a4a4a;
  --focus: #ffffff;
  --success: #8fd6a8;
  --warning: #f2c66d;
  --danger: #ff8a80;
  --info: #8ab4ff;
  --header-bg: rgba(10, 10, 10, 0.86);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 1px 2px -1px rgba(0, 0, 0, 0.5);
  --pixel-fill: #1f1f1f;
  --il-traco: #e6e6e6;
  --il-face: #141414;
  --il-dir: #1c1c1c;
  --il-acento: #f2f2f2;
  --il-acento-2: #dcdcdc;
  --il-acento-3: #ffffff;
  --il-sobre-acento: #111111;
}

:root { --page-line: #e5e5e5; }
:root[data-theme="dark"] { --page-line: #262626; }

[data-theme="dark"] {
  --pixel-grid: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
}