/* ============================================================
 * Zetta Design System — token layer  (GENERATED — do not edit)
 * Source: src/zetta-source/*.md  (v0.10)
 * Regenerate: npm run compile
 * Three themes share one foundation: only colors + shadows change per scope.
 * Each scope carries the full color set so nested data-theme regions force their theme.
 * ============================================================ */

:root {
  /* Type families (roles) */
  --font-display: "Inter", system-ui, sans-serif;
  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  /* Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-base: 8px;
  --radius-full: 9999px;
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-page: 24px;
  /* Type scale */
  --text-display: 36px;
  --leading-display: 1.15;
  --font-weight-display: 800;
  --tracking-display: -0.02em;
  --text-heading-1: 28px;
  --leading-heading-1: 1.25;
  --font-weight-heading-1: 700;
  --tracking-heading-1: -0.01em;
  --text-heading-2: 22px;
  --leading-heading-2: 1.3;
  --font-weight-heading-2: 600;
  --tracking-heading-2: -0.01em;
  --text-heading-3: 18px;
  --leading-heading-3: 1.35;
  --font-weight-heading-3: 600;
  --text-app-header-brand: 16px;
  --leading-app-header-brand: 1.3;
  --font-weight-app-header-brand: 700;
  --tracking-app-header-brand: -0.01em;
  --text-body: 14px;
  --leading-body: 1.6;
  --font-weight-body: 400;
  --text-label: 13px;
  --leading-label: 1.4;
  --font-weight-label: 500;
  --text-navigation: 14px;
  --leading-navigation: 1.4;
  --font-weight-navigation: 500;
  --text-caption: 12px;
  --leading-caption: 1.5;
  --font-weight-caption: 400;
  --text-code: 13px;
  --leading-code: 1.6;
  --font-weight-code: 400;
  /* Icon sizes */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  /* Motion */
  --motion-instant: 0ms;
  --motion-fast: 100ms;
  --motion-base: 150ms;
  --motion-moderate: 200ms;
  --motion-slow: 300ms;
  --motion-xslow: 400ms;
  --ease-default: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Elevation (Light) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.04);
  /* Color (Light) */
  --color-brand: #b6d600;
  --color-brand-hover: rgba(182, 214, 0, 0.85);
  --color-brand-active: rgba(182, 214, 0, 0.70);
  --color-brand-text: #0a0a31;
  --color-brand-bg: #f0fcd4;
  --color-on-danger: #ffffff;
  --color-chart-1: #fdba74;
  --color-chart-2: #f97316;
  --color-chart-3: #ea580c;
  --color-chart-4: #c2410c;
  --color-chart-5: #9a3412;
  --color-overlay: rgba(22, 26, 29, 0.6);
  --color-canvas: #ffffff;
  --color-surface-card: #ffffff;
  --color-surface-header: #ffffff;
  --color-surface-sidebar: #fafafa;
  --color-surface-table-header: #f4f4f5;
  --color-surface-muted: #bcbcbc;
  --color-surface-secondary: #f4f4f5;
  --color-surface-pressed: #ebebeb;
  --color-accent: #f5f5f5;
  --color-accent-foreground: #0a0a0a;
  --color-popover: #ffffff;
  --color-popover-foreground: #0a0a0a;
  --color-ink: #0a0a0a;
  --color-body: #18181b;
  --color-muted: #4b4b4b;
  --color-placeholder: #767676;
  --color-hairline: #e5e5e5;
  --color-border-strong: #d0d5dd;
  --color-border-focus: #b6d600;
  --color-border-announcement: #18181b;
  --color-success: #10b981;
  --color-success-text: #065f46;
  --color-success-bg: #d1fae5;
  --color-warning: #f59e0b;
  --color-warning-text: #78350f;
  --color-warning-bg: #fef3c7;
  --color-danger: #ef4444;
  --color-danger-text: #991b1b;
  --color-danger-bg: #fee2e2;
  --color-danger-solid: #ef4444;
  --color-danger-solid-hover: #dc2626;
  --color-danger-solid-active: #b91c1c;
  --color-info: #3b82f6;
  --color-info-text: #1e3a8a;
  --color-info-bg: #dbeafe;
  --color-disabled-bg: #f5f5f5;
  --color-disabled-text: #9ca3af;
  --color-disabled-border: #e5e5e5;
  --color-badge-neutral-text: #0a0a0a;
  --color-skeleton-bg: #e5e7eb;
  --color-skeleton-shimmer: #f3f4f6;
  --color-spinner-track: #e5e5e5;
  --color-spinner-line: #b6d600;
}

[data-theme="light"] {
  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.04);
  /* Color */
  --color-brand: #b6d600;
  --color-brand-hover: rgba(182, 214, 0, 0.85);
  --color-brand-active: rgba(182, 214, 0, 0.70);
  --color-brand-text: #0a0a31;
  --color-brand-bg: #f0fcd4;
  --color-on-danger: #ffffff;
  --color-chart-1: #fdba74;
  --color-chart-2: #f97316;
  --color-chart-3: #ea580c;
  --color-chart-4: #c2410c;
  --color-chart-5: #9a3412;
  --color-overlay: rgba(22, 26, 29, 0.6);
  --color-canvas: #ffffff;
  --color-surface-card: #ffffff;
  --color-surface-header: #ffffff;
  --color-surface-sidebar: #fafafa;
  --color-surface-table-header: #f4f4f5;
  --color-surface-muted: #bcbcbc;
  --color-surface-secondary: #f4f4f5;
  --color-surface-pressed: #ebebeb;
  --color-accent: #f5f5f5;
  --color-accent-foreground: #0a0a0a;
  --color-popover: #ffffff;
  --color-popover-foreground: #0a0a0a;
  --color-ink: #0a0a0a;
  --color-body: #18181b;
  --color-muted: #4b4b4b;
  --color-placeholder: #767676;
  --color-hairline: #e5e5e5;
  --color-border-strong: #d0d5dd;
  --color-border-focus: #b6d600;
  --color-border-announcement: #18181b;
  --color-success: #10b981;
  --color-success-text: #065f46;
  --color-success-bg: #d1fae5;
  --color-warning: #f59e0b;
  --color-warning-text: #78350f;
  --color-warning-bg: #fef3c7;
  --color-danger: #ef4444;
  --color-danger-text: #991b1b;
  --color-danger-bg: #fee2e2;
  --color-danger-solid: #ef4444;
  --color-danger-solid-hover: #dc2626;
  --color-danger-solid-active: #b91c1c;
  --color-info: #3b82f6;
  --color-info-text: #1e3a8a;
  --color-info-bg: #dbeafe;
  --color-disabled-bg: #f5f5f5;
  --color-disabled-text: #9ca3af;
  --color-disabled-border: #e5e5e5;
  --color-badge-neutral-text: #0a0a0a;
  --color-skeleton-bg: #e5e7eb;
  --color-skeleton-shimmer: #f3f4f6;
  --color-spinner-track: #e5e5e5;
  --color-spinner-line: #b6d600;
}

[data-theme="dark"] {
  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.4);
  /* Color */
  --color-brand: #b6d600;
  --color-brand-hover: rgba(182, 214, 0, 0.85);
  --color-brand-active: rgba(182, 214, 0, 0.70);
  --color-brand-text: #0a0a31;
  --color-brand-bg: #243005;
  --color-on-danger: #ffffff;
  --color-chart-1: #fdba74;
  --color-chart-2: #f97316;
  --color-chart-3: #ea580c;
  --color-chart-4: #c2410c;
  --color-chart-5: #9a3412;
  --color-overlay: rgba(22, 26, 29, 0.6);
  --color-canvas: #1d2125;
  --color-surface-card: #22272b;
  --color-surface-header: #22272b;
  --color-surface-sidebar: #161a1d;
  --color-surface-table-header: #282e33;
  --color-surface-muted: #4c555d;
  --color-surface-secondary: #282e33;
  --color-surface-pressed: #353e47;
  --color-accent: #2c333a;
  --color-accent-foreground: #ffffff;
  --color-popover: #22272b;
  --color-popover-foreground: #ffffff;
  --color-ink: #ffffff;
  --color-body: #f4f4f5;
  --color-muted: #e2e8f0;
  --color-placeholder: #cbd5e1;
  --color-hairline: #454f59;
  --color-border-strong: #5c6773;
  --color-border-focus: #b6d600;
  --color-border-announcement: #ffffff;
  --color-success: #34d399;
  --color-success-text: #a7f3d0;
  --color-success-bg: #064e3b;
  --color-warning: #fbbf24;
  --color-warning-text: #fde047;
  --color-warning-bg: #78350f;
  --color-danger: #f87171;
  --color-danger-text: #ffb3b3;
  --color-danger-bg: #7f1d1d;
  --color-danger-solid: #f87171;
  --color-danger-solid-hover: #f98181;
  --color-danger-solid-active: #f45b5b;
  --color-info: #60a5fa;
  --color-info-text: #bfdbfe;
  --color-info-bg: #1e3a8a;
  --color-disabled-bg: #22272b;
  --color-disabled-text: #6b7280;
  --color-disabled-border: #374151;
  --color-badge-neutral-text: #ffffff;
  --color-skeleton-bg: #2c333a;
  --color-skeleton-shimmer: #454f59;
  --color-spinner-track: #282e33;
  --color-spinner-line: #b6d600;
}

[data-theme="accessibility"] {
  /* Elevation */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  /* Color */
  --color-brand: #ffffff;
  --color-brand-hover: #f5f5f5;
  --color-brand-active: #e5e5e5;
  --color-brand-text: #000000;
  --color-brand-bg: #000000;
  --color-on-danger: #000000;
  --color-chart-1: #ffffff;
  --color-chart-2: #d9d9d9;
  --color-chart-3: #a6a6a6;
  --color-chart-4: #737373;
  --color-chart-5: #404040;
  --color-canvas: #000000;
  --color-surface-card: #000000;
  --color-surface-header: #000000;
  --color-surface-sidebar: #000000;
  --color-surface-table-header: #000000;
  --color-surface-muted: #111111;
  --color-surface-secondary: #1a1a1a;
  --color-surface-pressed: #262626;
  --color-accent: #0a0a0a;
  --color-accent-foreground: #ffffff;
  --color-popover: #000000;
  --color-popover-foreground: #ffffff;
  --color-ink: #ffffff;
  --color-body: #ffffff;
  --color-muted: #bdbdbd;
  --color-placeholder: #8c8c8c;
  --color-hairline: #404040;
  --color-border-strong: #ffffff;
  --color-border-focus: #ffffff;
  --color-border-announcement: #ffffff;
  --color-success: #ffffff;
  --color-success-text: #ffffff;
  --color-success-bg: #000000;
  --color-warning: #ffffff;
  --color-warning-text: #ffffff;
  --color-warning-bg: #000000;
  --color-danger: #ffffff;
  --color-danger-text: #ffffff;
  --color-danger-bg: #000000;
  --color-danger-solid: #ffffff;
  --color-danger-solid-hover: #f5f5f5;
  --color-danger-solid-active: #e5e5e5;
  --color-info: #ffffff;
  --color-info-text: #ffffff;
  --color-info-bg: #000000;
  --color-disabled-bg: #1a1a1a;
  --color-disabled-text: #666666;
  --color-disabled-border: #404040;
  --color-badge-neutral-text: #000000;
  --color-skeleton-bg: #111111;
  --color-skeleton-shimmer: #262626;
  --color-spinner-track: #1a1a1a;
  --color-spinner-line: #ffffff;
}