@font-face {
  font-family: "DM Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url("/fonts/dm-sans/dm-sans-latin-wght-normal.woff2") format("woff2");
}
:root {
  --font-body: "DM Sans Variable", sans-serif;
  --font-display: var(--font-body);
  --ui-font-body: var(--font-body);
}
/* Shared PayHr typography and design tokens. */


:where(.payroll-workflow, .payroll-result, .payroll-history, .employee-tax-page, .payroll-taxes, .roe-history-page) {
  --color-paper: #ffffff;
  --color-surface-muted: #eef4f9;
  --color-ink: #182127;
  --color-graphite: #1c252c;
  --color-muted: #60727d;
  --color-slate: #4d6575;
  --color-rule: #d4dde3;
  --color-rule-heavy: #b2c2cd;
  --color-rule-control: #718ea1;
  --color-accent: #136acd;
  --color-accent-hover: #0f5cb5;
  --color-link: #0040ff;
  --color-focus: #0040ff;
  --color-success: #227b3a;
  --color-success-tint: #d7f4dd;
  --color-chip-green: #6bbf7b;
  --color-chip-teal: #63b5d8;
  --color-error: #b3261e;
  --color-error-tint: #fff4f2;
  --font-display: "DM Sans Variable", sans-serif;
  --font-body: var(--font-display);
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-section: 19px;
  --text-title: 33px;
  --text-date: 36px;
  --text-amount: 44px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --radius-base: 8px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 150ms;
}

/* Shared interaction tokens, consistent with the existing PayHr palette. */
:root {
  --ui-border: #dedfE3;
  --ui-overlay: rgb(24 33 39 / 42%);
  --ui-shadow: 0 12px 36px rgb(24 33 39 / 14%), 0 2px 6px rgb(24 33 39 / 6%);
  --ui-radius: 14px;
  --ui-success: #227b3a;
  --ui-success-surface: #eaf6ed;
  --ui-error-surface: #fff4f2;
  --ui-error-border: #ecc6bf;
  --ui-danger-hover: #932510;
  --ui-duration: 150ms;
  --ui-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

:root {
  --ui-font-body: "DM Sans Variable", sans-serif;
  --ui-control-shadow: rgb(24 33 39 / 4%);
  --ui-selection-surface: #eef2f8;
}

/* PayHr app-wide design tokens. Feature-specific aliases above inherit these values. */
:root {
  --color-paper: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #f5fcff;
  --color-ink: #232426;
  --color-muted: #696969;
  --color-accent: #0040ff;
  --color-accent-hover: #0f33b1;
  --color-link: #001b66;
  --color-rule: #dddcd9;
  --color-rule-heavy: #4d6575;
  --color-focus: #0040ff;
  --color-success: #008238;
  --color-success-tint: #eaf6ed;
  --color-warning: #854000;
  --color-warning-tint: #fff0e2;
  --color-error: #b3261e;
  --font-display: "DM Sans Variable", sans-serif;
  --font-body: var(--font-display);
  --radius-card: 26px;
  --radius-button: 40px;
  --radius-input: 8px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 44px;
  --layout-sidebar-width: 232px;
  --layout-sidebar-collapsed-width: 80px;
  --layout-content-max: 1400px;
  --layout-page-gutter: clamp(20px, 3vw, 48px);
  --layout-header-height: 60px;
  --layout-workspace-name-compact: 96px;
  --size-workspace-logo: 40px;
  --size-icon: 20px;
  --size-control: 44px;
  --text-sm: 14px;
  --color-selection: #edf2ff;
  --color-hover: #f5f7fb;
  --ink: var(--color-ink);
  --accent: var(--color-accent);
  --surface: var(--color-surface);
  --muted: var(--color-muted);
  --line: var(--color-rule);
  --subtle: var(--color-paper);
  --error: var(--color-error);
  --radius: var(--radius-input);
  --ui-font-body: var(--font-body);
  --ui-shadow: none;
  --ui-control-shadow: transparent;
  --ui-radius: var(--radius-card);
  --ui-border: var(--color-rule);
  --ui-success: var(--color-success);
}

/* Popie's onboarding palette, isolated to organization setup. */
.workspace-onboarding {
  --color-paper: #ffffff;
  --color-sidebar: #fafafa;
  --color-ink: #202329;
  --color-muted: #6c7075;
  --color-rule: #e6e7e5;
  --color-border-strong: #d5d8d4;
  --color-accent: #317a53;
  --color-accent-soft: #eaf4ee;
  --color-hover: #f0f1ef;
  --color-primary-top: #393c3a;
  --color-primary-bottom: #121513;
  --color-focus: var(--color-accent);
  --radius-button: 8px;
  --radius-card: 12px;
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --line: var(--color-rule);
  --accent: var(--color-accent);
  --surface: var(--color-paper);
}

/* Shared form controls, promoted from workspace onboarding. */
:root {
  --field-border: #d5d8d4;
  --field-surface: #ffffff;
  --field-ink: #202329;
  --field-muted: #6c7075;
  --field-disabled-surface: #fafafa;
  --field-radius: 8px;
  --field-height: 44px;
  --field-font-size: 14px;
}