@import url('https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/plus-jakarta-display.min.css');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap');

/* ==========================================================================
   ATA PEOPLE HUB DESIGN TOKENS
   Source of truth for color, type, spacing, shape, elevation and motion.
   Legacy aliases remain while existing modules migrate.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Primitive palette */
  --ds-blue-50: #edf7ff;
  --ds-blue-100: #dceeff;
  --ds-blue-500: #0b74c4;
  --ds-blue-600: #0968b8;
  --ds-blue-700: #075aa1;
  --ds-indigo-500: #4f46e5;
  --ds-indigo-600: #4338ca;
  --ds-ink-950: #171923;
  --ds-ink-800: #303344;
  --ds-gray-700: #52586b;
  --ds-gray-600: #697386;
  --ds-gray-500: #8b93a5;
  --ds-gray-300: #cfd6e4;
  --ds-gray-200: #e2e6f0;
  --ds-gray-100: #edf0f6;
  --ds-gray-50: #f7f8fc;
  --ds-white: #ffffff;
  --ds-black: #0f0f0e;

  /* Semantic color tokens */
  --color-canvas: #f8fafc;
  --color-surface: var(--ds-white);
  --color-surface-subtle: #f7f8fc;
  --color-surface-raised: var(--ds-white);
  --color-surface-inverse: var(--ds-ink-950);
  --color-surface-hover: #f1f3fb;
  --color-surface-active: #e9edfb;
  --color-text: var(--ds-ink-950);
  --color-text-secondary: var(--ds-gray-700);
  --color-text-muted: var(--ds-gray-600);
  --color-text-disabled: var(--ds-gray-500);
  --color-text-inverse: var(--ds-white);
  --color-border: #e2e6f0;
  --color-border-strong: #cfd6e4;
  --color-border-focus: var(--ds-blue-600);
  --color-action: var(--ds-blue-500);
  --color-action-hover: var(--ds-blue-600);
  --color-action-soft: var(--ds-blue-50);
  --color-accent: var(--ds-indigo-500);
  --color-accent-hover: var(--ds-indigo-600);
  --color-accent-soft: #eeedff;
  --color-action-strong: #252846;
  --color-action-strong-hover: #32365c;
  --gradient-primary: linear-gradient(135deg, var(--color-action) 0%, var(--color-accent) 100%);
  --color-on-action: var(--ds-white);

  /* Semantic feedback */
  --color-success: #187a45;
  --color-success-strong: #0f6938;
  --color-success-bg: #e9f8ef;
  --color-warning: #9a5f08;
  --color-warning-strong: #7c4a04;
  --color-warning-bg: #fff3d7;
  --color-danger: #b93838;
  --color-danger-strong: #9f2f2f;
  --color-danger-bg: #ffebeb;
  --color-info: #246faf;
  --color-info-strong: #1b5c94;
  --color-info-bg: #e9f3ff;
  --color-neutral-bg: var(--ds-gray-100);

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Display', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8125rem;
  --font-size-md: 0.875rem;
  --font-size-lg: 1rem;
  --font-size-xl: 1.125rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: clamp(1.75rem, 2.4vw, 2.25rem);
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;
  --letter-tight: -0.025em;

  /* 4px spacing system */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Shape */
  --radius-xs: 0.5rem;
  --radius-sm: 0.625rem;
  --radius-md: 0.75rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.125rem;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(23, 25, 35, 0.045);
  --shadow-card-hover: 0 10px 28px rgba(23, 25, 35, 0.085);
  --shadow-popover: 0 18px 48px rgba(23, 25, 35, 0.15);
  --shadow-modal: 0 24px 72px rgba(23, 25, 35, 0.22);
  --shadow-focus: 0 0 0 3px rgba(17, 142, 234, 0.22);

  /* Sizing */
  --control-sm: 2rem;
  --control-md: 2.5rem;
  --control-lg: 2.75rem;
  --icon-sm: 1rem;
  --icon-md: 1.125rem;
  --icon-lg: 1.25rem;
  --sidebar-rail: 4.75rem;
  --sidebar-expanded: 15rem;
  --content-max: 100%;

  /* Motion */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 140ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;

  /* Compatibility aliases */
  --brand-primary: var(--color-action);
  --brand-primary-hover: var(--color-action-hover);
  --brand-secondary: var(--ds-blue-500);
  --brand-light: var(--color-action-soft);
  --brand-navy: var(--color-action-strong);
  --brand-navy-light: var(--color-text-secondary);
  --bg-app: var(--color-canvas);
  --bg-card: var(--color-surface);
  --bg-card-secondary: var(--color-surface-subtle);
  --bg-input: var(--color-surface);
  --bg-hover: var(--color-surface-hover);
  --bg-sidebar: var(--color-surface);
  --bg-navbar: var(--color-surface);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --text-light: var(--color-border);
  --text-white: var(--color-text-inverse);
  --border-light: var(--color-border);
  --border-subtle: var(--color-border);
  --border-card-highlight: transparent;
  --color-purple: var(--color-action);
  --color-purple-bg: var(--color-action-soft);
  --shadow-sm: var(--shadow-card);
  --shadow-navbar: var(--shadow-card);
  --radius-card: var(--radius-lg);
  --radius-card-sm: var(--radius-md);
  --radius-btn: var(--radius-md);
  --radius-input: var(--radius-md);
  --radius-full: var(--radius-pill);
  --transition-fast: var(--duration-fast) var(--ease-standard);
  --transition-normal: var(--duration-normal) var(--ease-standard);
  --transition-spring: var(--duration-slow) var(--ease-standard);
}

[data-theme='dark'] {
  color-scheme: dark;
  --color-canvas: #101821;
  --color-surface: #15202b;
  --color-surface-subtle: #1b2937;
  --color-surface-raised: #213142;
  --color-surface-inverse: #f7faff;
  --color-surface-hover: #24364a;
  --color-surface-active: #2b4058;
  --color-text: #f7faff;
  --color-text-secondary: #c7d5e5;
  --color-text-muted: #a9bad0;
  --color-text-disabled: #788ca4;
  --color-text-inverse: #171716;
  --color-border: #2a3d52;
  --color-border-strong: #3a526b;
  --color-action: #45a9f5;
  --color-action-hover: #72c0fb;
  --color-action-soft: #112d49;
  --color-accent: #8f88ff;
  --color-accent-hover: #aaa5ff;
  --color-accent-soft: #292750;
  --color-action-strong: #eaf4ff;
  --color-action-strong-hover: #ffffff;
  --gradient-primary: linear-gradient(135deg, #238fdc 0%, #756df2 100%);
  --color-on-action: #071726;
  --color-success: #61ce91;
  --color-success-strong: #17653b;
  --color-success-bg: #183628;
  --color-warning: #edb85e;
  --color-warning-strong: #80510b;
  --color-warning-bg: #3b2d14;
  --color-danger: #f08686;
  --color-danger-strong: #963333;
  --color-danger-bg: #3f2020;
  --color-info: #77b9ed;
  --color-info-strong: #225f92;
  --color-info-bg: #183149;
  --color-neutral-bg: #2b2b28;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.28);
  --shadow-popover: 0 18px 52px rgba(0, 0, 0, 0.42);
  --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 3px rgba(69, 169, 245, 0.3);
  --border-card-highlight: var(--color-border);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  min-width: 20rem;
  background: var(--color-canvas);
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

h1, h2, h3, h4, h5, h6,
.font-display,
.ds-page-title,
.breadcrumb-title,
.brand-title,
.ds-card__title,
.hz-card-title,
.metric-card__value,
.stat-value,
.ds-empty__title,
.ds-task-card__title,
.dialog-title,
.ds-drawer__title,
.greeting-title,
.community-poll-title,
.attendance-card-title-row h2,
.reference-card-toolbar h2,
.reference-dashboard-card h2,
[class*="-title"],
[class*="__title"] {
  font-family: var(--font-display);
}

button,
input,
select,
textarea,
optgroup {
  color: inherit;
  font: inherit;
}

button,
[role='button'],
a,
select {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role='button']:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

::selection {
  background: var(--ds-blue-100);
  color: var(--ds-ink-950);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}