/* Claud Web design tokens. Shared by every native screen and the terminal.
   Add semantic tokens here; feature styles must not introduce a palette. */
:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  color-scheme: dark;
  --color-bg: #1a1a1a;
  --color-surface: #242424;
  --color-surface-raised: #2c2c2c;
  --color-surface-inset: #1d1d1d;
  --color-surface-hover: #333333;
  --color-border: #3a3a3a;
  --color-border-subtle: #333333;
  --color-border-hover: #666666;
  --color-text: #e4e4e4;
  --color-text-strong: #eeeeee;
  --color-text-muted: #999999;
  --color-text-subtle: #777777;
  --color-accent: #d97757;
  --color-accent-hover: #c46647;
  --color-accent-subtle: #3a2c26;
  --color-on-accent: #ffffff;
  --color-success: #16a34a;
  --color-success-text: #4ade80;
  --color-danger: #dc2626;
  --color-danger-text: #fca5a5;
  --color-danger-bg: #2b1616;
  --color-danger-border: #7f1d1d;
  --color-selection: rgba(217, 119, 87, 0.35);
  --color-dropzone: rgba(217, 119, 87, 0.07);
  --color-overlay: rgba(0, 0, 0, 0.6);
  --shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.5);

  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: Menlo, Monaco, 'Cascadia Mono', 'Courier New', monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-base: 14px;
  --text-input: 16px;
  --text-lg: 17px;
  --text-title: 22px;
  --weight-medium: 500;
  --weight-semibold: 600;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --space-half: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --radius-round: 50%;
  --border-width: 1px;
  --control-height: 44px;
  --control-compact-height: 32px;
  --control-toolbar-height: 32px;
  --control-toolbar-width: 36px;
  --toolbar-height: 42px;
  --icon-size: 24px;
  --indicator-size: 8px;
  --page-width: 1080px;
  --form-width: 552px;
  --tile-height: 160px;

  --z-header: 40;
  --z-menu: 50;
  --z-drawer: 90;
  --z-modal: 100;
  --z-toast: 150;
  --z-auth: 200;
  --transition-fast: 0.2s ease;
}