/**
 * Generated from Modal — DESIGN.md
 * https://www.webdesignhot.com/design.md/
 */
:root {
  /* role tokens (resolved) */
  --bg: #0c0c0c;
  --surface: #0c0c0c;
  --surface-alt: #0c0c0c;
  --text: #ffffff;
  --text-dim: #ffffff;
  --text-faint: #525252;
  --brand: #7fee64;
  --on-brand: #0c0c0c;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);
  --success: #7fee64;
  --warning: #fbbf24;
  --danger: #f87171;

  /* full color palette */
  --color-bg: #0c0c0c;
  --color-bg-elev-1: #141414;
  --color-bg-elev-2: #1c1c1c;
  --color-bg-elev-3: #262626;
  --color-bg-elev-4: #333333;
  --color-bg-overlay: rgba(0, 0, 0, 0.78);
  --color-text: #ffffff;
  --color-text-strong: #ffffff;
  --color-text-soft: #a3a3a3;
  --color-text-muted: #737373;
  --color-text-faint: #525252;
  --color-text-on-brand: #0c0c0c;
  --color-brand: #7fee64;
  --color-brand-hover: #6dd954;
  --color-brand-active: #5cc548;
  --color-brand-tint: rgba(127, 238, 100, 0.12);
  --color-brand-tint-strong: rgba(127, 238, 100, 0.2);
  --color-brand-glow: rgba(127, 238, 100, 0.4);
  --color-accent-output: #7fee64;
  --color-accent-prompt: #a3eb8e;
  --color-accent-syntax-keyword: #7fee64;
  --color-accent-syntax-string: #fbbf24;
  --color-accent-syntax-comment: #737373;
  --color-accent-syntax-fn: #a3eb8e;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.2);
  --color-border-subtle: rgba(255, 255, 255, 0.05);
  --color-border-brand: rgba(127, 238, 100, 0.4);
  --color-border-focus: #7fee64;
  --color-success: #7fee64;
  --color-success-bg: rgba(127, 238, 100, 0.12);
  --color-warning: #fbbf24;
  --color-warning-bg: rgba(251, 191, 36, 0.12);
  --color-danger: #f87171;
  --color-danger-bg: rgba(248, 113, 113, 0.12);
  --color-info: #60a5fa;
  --color-info-bg: rgba(96, 165, 250, 0.12);
  --color-on-brand: #0c0c0c;
  --color-on-bg: #ffffff;
  --color-on-surface: #ffffff;
  --color-on-warning: #0c0c0c;
  --color-on-danger: #ffffff;

  /* type */
  --display-size: 88px;
  --h1-size: 56px;
  --h2-size: 36px;
  --body-size: 16px;
  --label-size: 11px;
  --body-line-height: 1.55;
  --display-tracking: -0.035em;

  /* shape */
  --radius-button: 6px;
  --radius-card: 12px;
  --radius-pill: 9999px;

  /* spacing */
  --space-xs: 0px;
  --space-sm: 2px;
  --space-md: 8px;
  --space-lg: 20px;
  --space-xl: 32px;

  /* fonts */
  --font-display: 'Söhne', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Söhne', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Modal Mono', ui-monospace, monospace;
}