:root {
    --hr-font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --hr-bg: #f5f7fb;
    --hr-surface: #ffffff;
    --hr-surface-soft: #f8fafc;
    --hr-border: #e5e9f0;
    --hr-border-strong: #d7dde7;

    --hr-text: #202938;
    --hr-text-muted: #6f7a8a;
    --hr-text-soft: #8c96a5;

    --hr-sidebar-width: 238px;
    --hr-topbar-height: 72px;

    --hr-radius-sm: 6px;
    --hr-radius-md: 10px;
    --hr-radius-lg: 14px;

    --hr-shadow-sm: 0 2px 8px rgba(20, 32, 52, 0.05);
    --hr-shadow-md: 0 8px 24px rgba(20, 32, 52, 0.08);

    --hr-danger: #c93b48;
    --hr-success: #21865f;
    --hr-warning: #c17b18;
    --hr-info: #2b78a7;
}

/* DEFAULT - RED */
[data-theme="red"] {
    --hr-primary: #b42832;
    --hr-primary-dark: #8f1f28;
    --hr-primary-deep: #70181f;
    --hr-primary-rgb: 180, 40, 50;
    --hr-primary-soft: #fff1f2;
    --hr-primary-soft-2: #f9dfe2;
    --hr-on-primary: #ffffff;
}

/* BLUE */
[data-theme="blue"] {
    --hr-primary: #315ee9;
    --hr-primary-dark: #2448bc;
    --hr-primary-deep: #1d3994;
    --hr-primary-rgb: 49, 94, 233;
    --hr-primary-soft: #eef2ff;
    --hr-primary-soft-2: #dfe6ff;
    --hr-on-primary: #ffffff;
}

/* GREEN */
[data-theme="green"] {
    --hr-primary: #217a59;
    --hr-primary-dark: #195f45;
    --hr-primary-deep: #124735;
    --hr-primary-rgb: 33, 122, 89;
    --hr-primary-soft: #edf8f3;
    --hr-primary-soft-2: #d8efe5;
    --hr-on-primary: #ffffff;
}

/* PURPLE */
[data-theme="purple"] {
    --hr-primary: #6c51bd;
    --hr-primary-dark: #523b96;
    --hr-primary-deep: #402e76;
    --hr-primary-rgb: 108, 81, 189;
    --hr-primary-soft: #f3f0ff;
    --hr-primary-soft-2: #e6e0fb;
    --hr-on-primary: #ffffff;
}

/* EGG BLUE */
[data-theme="eggblue"] {
    --hr-primary: #2c91a3;
    --hr-primary-dark: #216f7d;
    --hr-primary-deep: #19545f;
    --hr-primary-rgb: 44, 145, 163;
    --hr-primary-soft: #edf9fb;
    --hr-primary-soft-2: #d7f0f4;
    --hr-on-primary: #ffffff;
}

/* ORANGE */
[data-theme="orange"] {
    --hr-primary: #dc741d;
    --hr-primary-dark: #b45a13;
    --hr-primary-deep: #8d450f;
    --hr-primary-rgb: 220, 116, 29;
    --hr-primary-soft: #fff5eb;
    --hr-primary-soft-2: #fee6cf;
    --hr-on-primary: #ffffff;
}

/* GREY & WHITE - used only for pages shown before sign-in (e.g. the
   login page). It is not a school theme and is not selectable on
   Schools/Edit; once signed in the current school's theme applies. */
[data-theme="grey"] {
    --hr-primary: #d1d5db;
    --hr-primary-dark: #c2c7ce;
    --hr-primary-deep: #b3b9c1;
    --hr-primary-rgb: 209, 213, 219;
    --hr-primary-soft: #f3f4f6;
    --hr-primary-soft-2: #e5e7eb;
    --hr-on-primary: #000000;

    --hr-text: #000000;
    --hr-text-muted: #000000;
    --hr-text-soft: #000000;
}

/* The sign-in brand panel hard-codes translucent white text and borders
   for the dark school themes; on the light grey theme everything in it
   is black. */
[data-theme="grey"] .hr-auth-brand-panel,
[data-theme="grey"] .hr-auth-brand-panel * {
    color: #000000;
}

[data-theme="grey"] .hr-auth-brand-panel::before {
    border-color: rgba(0, 0, 0, .12);
}

[data-theme="grey"] .hr-auth-brand-badge,
[data-theme="grey"] .hr-auth-feature-icon {
    border-color: rgba(0, 0, 0, .25);
    background: rgba(0, 0, 0, .06);
}

[data-theme="grey"] .hr-auth-brand-footer {
    border-top-color: rgba(0, 0, 0, .15);
}

[data-theme="grey"] .btn-primary {
    --bs-btn-color: #000000;
    --bs-btn-hover-color: #000000;
    --bs-btn-active-color: #000000;
    --bs-btn-border-color: #9aa1ab;
}

[data-theme="grey"] .hr-google-icon,
[data-theme="grey"] .hr-auth-security-icon {
    color: #000000;
}

/* Top bar brand ("HR / HR Management / System") and the "Secure Access"
   eyebrow are black on the grey theme. */
[data-theme="grey"] .hr-brand,
[data-theme="grey"] .hr-brand:hover,
[data-theme="grey"] .hr-brand-mark,
[data-theme="grey"] .hr-brand-text,
[data-theme="grey"] .hr-brand-text strong,
[data-theme="grey"] .hr-brand-text small,
[data-theme="grey"] .hr-auth-mobile-brand,
[data-theme="grey"] .hr-auth-mobile-brand strong,
[data-theme="grey"] .hr-auth-mobile-brand small,
[data-theme="grey"] .hr-page-eyebrow {
    color: #000000;
}

[data-theme="grey"] .hr-brand-text small {
    opacity: 1;
}

[data-theme="grey"] .hr-brand-mark {
    border-color: rgba(0, 0, 0, .25);
    background: rgba(0, 0, 0, .06);
}

/* Google sign-in button: 80% grey (#333333) with white text. */
[data-theme="grey"] .hr-google-btn {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #333333;
    --bs-btn-border-color: #333333;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #262626;
    --bs-btn-hover-border-color: #262626;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #1a1a1a;
    --bs-btn-active-border-color: #1a1a1a;
    color: #ffffff;
}

[data-theme="grey"] .hr-google-btn span {
    color: inherit;
}

[data-theme="grey"] .hr-google-btn .hr-google-icon {
    color: #000000;
}