:root {
  --color-bg: #2c2d2f;
  --color-surface: #27282a;
  --color-surface-2: #1f2022;
  --color-surface-3: #232426;
  --color-surface-4: #2a2b2e;
  --color-border: #34363a;
  --color-border-soft: #2f3135;
  --color-text: #f5f5f5;
  --color-text-muted: #8f9298;
  --color-link: #f5f5f5;
  --color-primary: #3a3c40;
  --color-primary-hover: #46494e;
  --color-button-primary: #355d3a;
  --color-button-primary-hover: #3f6f45;
  --color-button-primary-border: #4d7f53;
  --color-danger: #bc5252;
  --color-danger-strong: #ff3b3b;
  --color-success: #9ed7a7;
  --color-success-strong: #2cd600;
  --color-success-bg: #243427;
  --color-warning: #c98f13;
  --color-warning-bg: #6d5500;
  --color-chip-bg: #202124;
  --color-weekend: #22252b;
  --color-day-today: #214331;
  --color-accent: #9e7700;
  --color-badge-bg: #f3f3f3;
  --color-badge-text: #222326;
  --color-workhours: #7f53d9;
  --color-header-badge-bg: #1d1d1f;
  --color-header-badge-label: #f5f5f5;
  --color-header-badge-text: #f5f5f5;
  --color-surface-list: #2a2b2e;
  --color-surface-list-alt: #24262a;
  --color-surface-list-today: #214331;
  --icon-filter: none;

  --font-family-base: "Atkinson Hyperlegible", "Segoe UI", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;

  --space-0: 0;
  --space-1: 0.125rem;
  --space-2: 0.25rem;
  --space-3: 0.5rem;
  --space-4: 0.75rem;
  --space-5: 1rem;
  --space-6: 1.25rem;
  --space-7: 1.5rem;
  --space-8: 2rem;
  --stack-1: 0.5rem;
  --stack-2: 0.75rem;
  --stack-3: 1rem;

  --radius-none: 0;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;

  --border-width-1: 1px;

  --container-max: 100%;
  --gutter-desktop: 1rem;
  --gutter-tablet: 1rem;
  --gutter-mobile: 0.875rem;
  --page-content-inset: 1rem;
  --surface-pad: 1rem;
  --surface-pad-compact: 0.875rem;
  --control-h-desktop: 2rem;
  --control-h-mobile: 2rem;
  --control-h: var(--control-h-desktop);
  --list-icon-size: 2rem;
  --icon-size-sm: var(--list-icon-size);
  --icon-size: var(--list-icon-size);
  --header-icon-size: var(--list-icon-size);
  --logo-size: 1.375rem;
  --header-pad-y: 0.625rem;
  --header-pad-y-auth: 0.625rem;
  --badge-height: 2rem;
  --badge-pad-top: 0.2rem;
  --badge-pad-bottom: 0.05rem;
  --input-height: 2.5rem;
  --chip-h: 2rem;
  --row-height-compact: 2.625rem;
  --kpi-height: 2.75rem;
  --period-height: 3.25rem;
  --day-col: 16rem;
  --chip-col: 8.5rem;
  --actions-col: 7.5rem;

  --z-header: 20;
  --z-modal: 40;

  --bp-md: 51.25em;
  --bp-sm: 32.5em;
}

html {
  color-scheme: dark;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --color-bg: #f3f4f6;
  --color-surface: #ffffff;
  --color-surface-2: #edf1f5;
  --color-surface-3: #f7f8fa;
  --color-surface-4: #e7ebf0;
  --color-border: #d4dae2;
  --color-border-soft: #e1e6ec;
  --color-text: #17191d;
  --color-text-muted: #5f6772;
  --color-link: #17191d;
  --color-primary: #dde3ea;
  --color-primary-hover: #d1d8e1;
  --color-button-primary: #4d8a55;
  --color-button-primary-hover: #43784a;
  --color-button-primary-border: #5c9a64;
  --color-danger: #c95a5a;
  --color-danger-strong: #d62828;
  --color-success: #2f7d33;
  --color-success-strong: #2cd600;
  --color-success-bg: #e7f6e9;
  --color-warning: #9f7200;
  --color-warning-bg: #fff0c4;
  --color-chip-bg: #e8ebf0;
  --color-weekend: #ebeef2;
  --color-day-today: #d7f1dc;
  --color-accent: #9e7700;
  --color-badge-bg: #2c2d2f;
  --color-badge-text: #f5f5f5;
  --color-workhours: #7f53d9;
  --color-header-badge-bg: #e5e9ef;
  --color-header-badge-label: #17191d;
  --color-header-badge-text: #17191d;
  --color-surface-list: #dde4ec;
  --color-surface-list-alt: #cfd8e2;
  --color-surface-list-today: #d1ebd6;
  --icon-filter: brightness(0) saturate(100%) invert(8%) sepia(8%) saturate(834%) hue-rotate(182deg) brightness(92%) contrast(92%);
}

html[data-theme="auto"] {
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    color-scheme: light;
    --color-bg: #f3f4f6;
    --color-surface: #ffffff;
    --color-surface-2: #edf1f5;
    --color-surface-3: #f7f8fa;
    --color-surface-4: #e7ebf0;
    --color-border: #d4dae2;
    --color-border-soft: #e1e6ec;
    --color-text: #17191d;
    --color-text-muted: #5f6772;
    --color-link: #17191d;
    --color-primary: #dde3ea;
    --color-primary-hover: #d1d8e1;
    --color-button-primary: #4d8a55;
    --color-button-primary-hover: #43784a;
    --color-button-primary-border: #5c9a64;
    --color-danger: #c95a5a;
    --color-danger-strong: #d62828;
    --color-success: #2f7d33;
    --color-success-strong: #2cd600;
    --color-success-bg: #e7f6e9;
    --color-warning: #9f7200;
    --color-warning-bg: #fff0c4;
    --color-chip-bg: #e8ebf0;
    --color-weekend: #ebeef2;
    --color-day-today: #d7f1dc;
    --color-accent: #9e7700;
    --color-badge-bg: #2c2d2f;
    --color-badge-text: #f5f5f5;
    --color-workhours: #7f53d9;
    --color-header-badge-bg: #e5e9ef;
    --color-header-badge-label: #17191d;
    --color-header-badge-text: #17191d;
    --color-surface-list: #dde4ec;
    --color-surface-list-alt: #cfd8e2;
    --color-surface-list-today: #d1ebd6;
    --icon-filter: brightness(0) saturate(100%) invert(8%) sepia(8%) saturate(834%) hue-rotate(182deg) brightness(92%) contrast(92%);
  }
}