/* GaTi UI 1.5.0 - sinh tự động từ design/tokens.json bằng design/gen_tokens.py. Không sửa tay. */
:root, [data-theme="light"] {
  color-scheme: light;
  --sage-50: #F0F5F3;
  --sage-100: #E1EAE8;
  --sage-200: #C3D5D0;
  --sage-300: #9EBCB4;
  --sage-400: #80A89D;
  --sage-500: #57877A;
  --sage-600: #476E64;
  --sage-700: #395850;
  --sage-800: #29403A;
  --sage-900: #1B2A26;
  --bg-base: #FDFBF7;
  --bg-panel: #F4F2EE;
  --bg-elevated: #FFFFFF;
  --bg-brand-soft: #E1EAE8;
  --scrim: rgba(30, 29, 28, 0.40);
  --border-subtle: #E5E2DC;
  --border-strong: #8A857F;
  --text-primary: #2D2B2A;
  --text-muted: #6F6B68;
  --text-disabled: #A8A5A0;
  --text-brand: #476E64;
  --brand: #57877A;
  --action-primary: #476E64;
  --action-primary-hover: #395850;
  --action-primary-pressed: #29403A;
  --on-action-primary: #FFFFFF;
  --focus-ring: #57877A;
  --success: #56703E;
  --warning: #8D6225;
  --warning-fill: #D29E55;
  --on-warning-fill: #2D2B2A;
  --danger: #9F4D3C;
  --action-danger: #B85A46;
  --action-danger-hover: #9F4D3C;
  --on-action-danger: #FFFFFF;
  --param: #788891;
  --meter-track: #E5E2DC;
  --meter-safe: #57877A;
  --meter-warn: #AD782E;
  --meter-clip: #B85A46;
  --viz-1: #57877A;
  --viz-2: #AD782E;
  --viz-3: #67767E;
  --viz-4: #B85A46;
  --viz-5: #8A6E8C;
  --viz-6: #56703E;
  --shadow-popover: 0 4px 12px rgba(45, 43, 42, 0.10);
  --shadow-modal: 0 12px 32px rgba(45, 43, 42, 0.16);
}
[data-theme="dark"] {
  color-scheme: dark;
  --sage-50: #F0F5F3;
  --sage-100: #E1EAE8;
  --sage-200: #C3D5D0;
  --sage-300: #9EBCB4;
  --sage-400: #80A89D;
  --sage-500: #57877A;
  --sage-600: #476E64;
  --sage-700: #395850;
  --sage-800: #29403A;
  --sage-900: #1B2A26;
  --bg-base: #1E1D1C;
  --bg-panel: #2A2928;
  --bg-elevated: #353332;
  --bg-brand-soft: #29403A;
  --scrim: rgba(0, 0, 0, 0.55);
  --border-subtle: #454341;
  --border-strong: #8A857F;
  --text-primary: #EBE9E4;
  --text-muted: #A8A5A0;
  --text-disabled: #6E6A66;
  --text-brand: #9EBCB4;
  --brand: #80A89D;
  --action-primary: #80A89D;
  --action-primary-hover: #9EBCB4;
  --action-primary-pressed: #C3D5D0;
  --on-action-primary: #1E1D1C;
  --focus-ring: #80A89D;
  --success: #8DAA6C;
  --warning: #D29E55;
  --warning-fill: #D29E55;
  --on-warning-fill: #1E1D1C;
  --danger: #CD998E;
  --action-danger: #BD796B;
  --action-danger-hover: #CD998E;
  --on-action-danger: #1E1D1C;
  --param: #8E9CA3;
  --meter-track: #454341;
  --meter-safe: #80A89D;
  --meter-warn: #D29E55;
  --meter-clip: #BD796B;
  --viz-1: #80A89D;
  --viz-2: #D29E55;
  --viz-3: #8E9CA3;
  --viz-4: #CD998E;
  --viz-5: #A08AA1;
  --viz-6: #8DAA6C;
  --shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.55);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme]) {
  color-scheme: dark;
  --sage-50: #F0F5F3;
  --sage-100: #E1EAE8;
  --sage-200: #C3D5D0;
  --sage-300: #9EBCB4;
  --sage-400: #80A89D;
  --sage-500: #57877A;
  --sage-600: #476E64;
  --sage-700: #395850;
  --sage-800: #29403A;
  --sage-900: #1B2A26;
  --bg-base: #1E1D1C;
  --bg-panel: #2A2928;
  --bg-elevated: #353332;
  --bg-brand-soft: #29403A;
  --scrim: rgba(0, 0, 0, 0.55);
  --border-subtle: #454341;
  --border-strong: #8A857F;
  --text-primary: #EBE9E4;
  --text-muted: #A8A5A0;
  --text-disabled: #6E6A66;
  --text-brand: #9EBCB4;
  --brand: #80A89D;
  --action-primary: #80A89D;
  --action-primary-hover: #9EBCB4;
  --action-primary-pressed: #C3D5D0;
  --on-action-primary: #1E1D1C;
  --focus-ring: #80A89D;
  --success: #8DAA6C;
  --warning: #D29E55;
  --warning-fill: #D29E55;
  --on-warning-fill: #1E1D1C;
  --danger: #CD998E;
  --action-danger: #BD796B;
  --action-danger-hover: #CD998E;
  --on-action-danger: #1E1D1C;
  --param: #8E9CA3;
  --meter-track: #454341;
  --meter-safe: #80A89D;
  --meter-warn: #D29E55;
  --meter-clip: #BD796B;
  --viz-1: #80A89D;
  --viz-2: #D29E55;
  --viz-3: #8E9CA3;
  --viz-4: #CD998E;
  --viz-5: #A08AA1;
  --viz-6: #8DAA6C;
  --shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.55);
} }
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --control-sm: 24px;
  --control-md: 32px;
  --control-lg: 40px;
  --knob-sm: 32px;
  --knob-md: 48px;
  --knob-lg: 72px;
  --meter-width: 6px;
  --arc-width: 3px;
  --hairline: 1px;
  --focus-width: 2px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --font-serif: Newsreader, Georgia, "Times New Roman", serif;
  --font-sans: "Be Vietnam Pro", "Segoe UI", "SF Pro Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, "SF Mono", Menlo, monospace;
}