/* Fluent — tokens. Tema: data-theme="light|dark" no <html>; sem atributo segue o sistema operacional. */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #f3f3f3;
  --surface: #ffffff;
  --surface-alt: #f5f5f5;
  --surface-raised: #ffffff;
  --control: #ffffff;
  --control-hover: #f5f5f5;
  --control-pressed: #e0e0e0;
  --control-border: #d1d1d1;
  --hover: #f5f5f5;
  --selected: #ebebeb;
  --border: #d1d1d1;
  --border-subtle: #e0e0e0;
  --border-strong: #616161;
  --text: #242424;
  --text-muted: #616161;
  --text-disabled: #bdbdbd;
  --accent: #0f6cbd;
  --accent-hover: #115ea3;
  --accent-pressed: #0c3b5e;
  --accent-fg: #ffffff;
  --accent-text: #0f6cbd;
  --accent-soft: #ebf3fc;
  --success: #0e700e;
  --success-soft: #f1faf1;
  --warning: #bc4b09;
  --warning-soft: #fff9f5;
  --danger: #b10e1c;
  --danger-soft: #fdf3f4;
  --danger-fill: #c50f1f;
  --switch-on: var(--accent);
  --switch-off: #ffffff;
  --focus-ring: #000000;
  --overlay: rgba(0,0,0,0.4);
  --material: rgba(252,252,252,0.85);
  --elevation-control: 0 1px 0 rgba(0,0,0,0.06);
  --elevation-card: 0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);
  --elevation-flyout: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14);
  --elevation-dialog: 0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --bg: #202020;
  --surface: #292929;
  --surface-alt: #1f1f1f;
  --surface-raised: #333333;
  --control: #292929;
  --control-hover: #3d3d3d;
  --control-pressed: #1f1f1f;
  --control-border: #666666;
  --hover: #3d3d3d;
  --selected: #383838;
  --border: #666666;
  --border-subtle: #3d3d3d;
  --border-strong: #adadad;
  --text: #ffffff;
  --text-muted: #adadad;
  --text-disabled: #5c5c5c;
  --accent: #115ea3;
  --accent-hover: #0f6cbd;
  --accent-pressed: #0c3b5e;
  --accent-fg: #ffffff;
  --accent-text: #479ef5;
  --accent-soft: #082338;
  --success: #54b054;
  --success-soft: #052505;
  --warning: #faa06b;
  --warning-soft: #411200;
  --danger: #dc626d;
  --danger-soft: #3b0509;
  --danger-fill: #c50f1f;
  --switch-on: var(--accent);
  --switch-off: #292929;
  --focus-ring: #ffffff;
  --overlay: rgba(0,0,0,0.5);
  --material: rgba(44,44,44,0.85);
  --elevation-control: 0 1px 0 rgba(0,0,0,0.3);
  --elevation-card: 0 0 2px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.28);
  --elevation-flyout: 0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28);
  --elevation-dialog: 0 0 8px rgba(0,0,0,0.24), 0 32px 64px rgba(0,0,0,0.28);
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #202020;
  --surface: #292929;
  --surface-alt: #1f1f1f;
  --surface-raised: #333333;
  --control: #292929;
  --control-hover: #3d3d3d;
  --control-pressed: #1f1f1f;
  --control-border: #666666;
  --hover: #3d3d3d;
  --selected: #383838;
  --border: #666666;
  --border-subtle: #3d3d3d;
  --border-strong: #adadad;
  --text: #ffffff;
  --text-muted: #adadad;
  --text-disabled: #5c5c5c;
  --accent: #115ea3;
  --accent-hover: #0f6cbd;
  --accent-pressed: #0c3b5e;
  --accent-fg: #ffffff;
  --accent-text: #479ef5;
  --accent-soft: #082338;
  --success: #54b054;
  --success-soft: #052505;
  --warning: #faa06b;
  --warning-soft: #411200;
  --danger: #dc626d;
  --danger-soft: #3b0509;
  --danger-fill: #c50f1f;
  --switch-on: var(--accent);
  --switch-off: #292929;
  --focus-ring: #ffffff;
  --overlay: rgba(0,0,0,0.5);
  --material: rgba(44,44,44,0.85);
  --elevation-control: 0 1px 0 rgba(0,0,0,0.3);
  --elevation-card: 0 0 2px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.28);
  --elevation-flyout: 0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28);
  --elevation-dialog: 0 0 8px rgba(0,0,0,0.24), 0 32px 64px rgba(0,0,0,0.28);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --corner-sm: 2px;
  --corner-md: 4px;
  --corner-lg: 8px;
  --corner-xl: 8px;
  --corner-full: 9999px;
  --control-sm: 24px;
  --control-md: 32px;
  --control-lg: 40px;
  --topbar-h: 48px;
  --fs-caption: 12px;
  --fs-small: 12px;
  --fs-control: 14px;
  --fs-body: 14px;
  --fs-subtitle: 20px;
  --fs-title: 28px;
  --fs-display: 68px;
  --dur-fast: 100ms;
  --dur-normal: 200ms;
  --dur-slow: 300ms;
  --ease-standard: cubic-bezier(0.33,0,0.67,1);
  --ease-decelerate: cubic-bezier(0.1,0.9,0.2,1);
  --ease-accelerate: cubic-bezier(0.9,0.1,1,0.2);
  --fw-regular: 400;
  --fw-strong: 600;
  --fw-bold: 700;
  --blur-material: 30px;
  --font-ui: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-code: "Cascadia Mono", Consolas, ui-monospace, Menlo, monospace;
}
.ds-text-display { font-size: 68px; line-height: 92px; font-weight: 600; }
.ds-text-title-large { font-size: 40px; line-height: 52px; font-weight: 600; }
.ds-text-title { font-size: 28px; line-height: 36px; font-weight: 600; }
.ds-text-subtitle { font-size: 20px; line-height: 28px; font-weight: 600; }
.ds-text-body-strong { font-size: 14px; line-height: 20px; font-weight: 600; }
.ds-text-body { font-size: 14px; line-height: 20px; font-weight: 400; }
.ds-text-caption { font-size: 12px; line-height: 16px; font-weight: 400; }