/* =========================================================
   UI KIT — shared design tokens, primitives and a11y
   Loaded BEFORE each app's style.css.
   Owner: "how things look". App CSS only owns "where things sit".
   ========================================================= */

/* ---------- 1. Typography (self-hosted Inter, latin subset) ---------- */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/inter/inter-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
        U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("assets/inter/inter-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
        U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("assets/inter/inter-600.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
        U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("assets/inter/inter-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
        U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Design tokens ---------- */

:root {
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif;
    --font-numeric: "Inter", ui-sans-serif, system-ui, sans-serif;

    --text-2xs: 10px;
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 13px;
    --text-body: 14px;
    --text-lead: 15px;
    --text-subtitle: 17px;
    --text-title: 19px;
    --text-section: 22px;
    --text-display: 27px;
    --text-hero: 31px;
    --text-hero-lg: 38px;
    --text-hero-xl: 47px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 22px;
    --space-6: 30px;
    --space-7: 42px;
    --space-8: 60px;

    --radius-xs: 8px;
    --radius-sm: 11px;
    --radius-md: 14px;
    --radius-lg: 17px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-pill: 999px;

    --control-h: 54px;
    --control-px: 16px;

    --dur-fast: 150ms;
    --dur-base: 230ms;
    --dur-slow: 350ms;
    --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- 2. Design tokens (Employee Assessment visual language) ---------- */

:root {
    /* text */
    --text-primary: #2B1B3D;
    --text-secondary: #5E5470;
    --text-tertiary: #8C839C;
    --text-on-accent: #ffffff;

    /* surfaces */
    --bg-shell: #FFFEF9;

    --surface: #FFFEF9;
    --surface-raised: #FFFEF9;
    --surface-strong: #FFFFFF;
    --surface-sunken: #FBF9EA;
    --surface-warm: #FBF9EA;
    --surface-warm-2: #FFFEF9;
    --surface-warm-3: #FBF9EA;
    --surface-cream: #FBF9EA;

    /* borders */
    --border: #E8E4C4;
    --border-soft: #E8E4C4;
    --border-soft-2: #E8E4C4;
    --border-warm: #E8E4C4;
    --border-warm-2: #E8E4C4;

    /* accent (purple) */
    --accent: #6D5FD5;
    --accent-mid: #6D5FD5;
    --accent-strong: #6D5FD5;
    --accent-soft: #F0EDFF;
    --accent-soft-2: #F0EDFF;

    /* violet */
    --violet: #F0EDFF;
    --on-violet: #6D5FD5;
    --violet-deep: #6D5FD5;
    --violet-soft: #F0EDFF;
    --violet-wash: #F0EDFF;
    --violet-line: #E8E4C4;
    --violet-line-2: #E8E4C4;
    --violet-line-3: #E8E4C4;
    --violet-line-4: #E8E4C4;

    /* peach */
    --peach: #F5D9CD;
    --peach-soft: #FBE3E6;

    /* amber (approval) */
    --amber: #D99A20;
    --amber-soft: #FBF3D0;
    --amber-wash: #FBF9EA;
    --amber-text: #8C6A1E;
    --amber-text-2: #6B5300;
    --amber-ink: #6B5300;
    --amber-spinner: #D99A20;

    /* danger */
    --danger: #E0606F;
    --danger-ink: #E0606F;
    --danger-text: #79534E;
    --danger-soft: #FBE3E6;
    --danger-border: #E8D2D6;
    --danger-border-2: #E0C3BF;
    --danger-border-3: #E6D2C0;
    --danger-wash: #FBE3E6;
    --danger-wash-2: #FDF6F3;

    /* stars */
    --star-active: #D99A20;
    --star-active-2: #D99A20;
    --star-idle: #E6E2C2;
    --star-idle-2: #E6E2C2;
    --star-preview: #E6E2C2;

    /* spinner */
    --spinner-track: #E6E2C2;

    /* button ink */
    --btn-bg: #6D5FD5;
    --btn-bg-hover: #5E50C9;
    --btn-bg-active: #4E41A2;
    --btn-ink: #ffffff;
    --btn-ring: rgba(109, 95, 213, 0.35);

        /* page background */
        --bg-shell: #FBF9EA;

    color-scheme: light;
}

/* ---------- 3. Elevation ---------- */

:root {
    --shadow-sm: 0 1px 2px rgba(43, 27, 61, 0.04),
        0 5px 18px rgba(43, 27, 61, 0.05);
    --shadow-md: 0 4px 12px rgba(43, 27, 61, 0.08),
        0 2px 6px rgba(43, 27, 61, 0.04);
    --shadow-lg: 0 12px 28px rgba(43, 27, 61, 0.12),
        0 4px 12px rgba(43, 27, 61, 0.06);
    --shadow-star: 0 0 7px rgba(217, 154, 32, 0.45);
    --shadow-plum-sm: 0 8px 22px rgba(43, 27, 61, 0.10);
}

/* ---------- 4. Dark theme ---------- */

@media (prefers-color-scheme: dark) {

    :root {
        --text-primary: #2B1B3D;
        --text-secondary: #5E5470;
        --text-tertiary: #8C839C;
        --text-tertiary-warm: #8C839C;
        --text-on-accent: #ffffff;

        --surface: #FFFEF9;
        --surface-raised: #FFFEF9;
        --surface-strong: #FFFFFF;
        --surface-sunken: #FBF9EA;
        --surface-warm: #FBF9EA;
        --surface-warm-2: #FFFEF9;
        --surface-warm-3: #FBF9EA;
        --surface-cream: #FBF9EA;
        --surface-violet: #F0EDFF;
        --surface-translucent: rgba(255, 253, 249, 0.9);
        --surface-translucent-2: rgba(255, 253, 249, 0.86);
        --scrim: rgba(241, 238, 230, 0.45);
        --scrim-2: rgba(230, 221, 212, 0.95);

        --border: #E8E4C4;
        --border-soft: #E8E4C4;
        --border-soft-2: #E8E4C4;
        --border-warm: #E8E4C4;
        --border-warm-2: #E8E4C4;
        --border-strong: #E8E4C4;
        --select-arrow: #8C839C;

        --accent: #6D5FD5;
        --accent-mid: #6D5FD5;
        --accent-strong: #6D5FD5;
        --accent-deep: #6D5FD5;
        --accent-ink: #6D5FD5;
        --accent-soft: #F0EDFF;
        --accent-soft-2: #F0EDFF;
        --accent-line: #E8E4C4;
        --accent-line-2: #E8E4C4;
        --accent-line-3: #E8E4C4;

        --violet: #F0EDFF;
        --on-violet: #6D5FD5;
        --violet-deep: #6D5FD5;
        --violet-soft: #F0EDFF;
        --violet-wash: #F0EDFF;
        --violet-line: #E8E4C4;
        --violet-line-2: #E8E4C4;
        --violet-line-3: #E8E4C4;
        --violet-line-4: #E8E4C4;

        --peach: #F5D9CD;
        --peach-soft: #FBE3E6;

        --amber: #D99A20;
        --amber-soft: #FBF3D0;
        --amber-wash: #FBF9EA;
        --amber-text: #8C6A1E;
        --amber-text-2: #6B5300;
        --amber-ink: #6B5300;
        --amber-spinner: #D99A20;

        --danger: #E0606F;
        --danger-ink: #E0606F;
        --danger-text: #79534E;
        --danger-soft: #FBE3E6;
        --danger-border: #E8D2D6;
        --danger-border-2: #E0C3BF;
        --danger-border-3: #E6D2C0;
        --danger-wash: #FBE3E6;
        --danger-wash-2: #FDF6F3;

        --star-idle: #E6E2C2;
        --star-idle-2: #E6E2C2;
        --star-active: #D99A20;
        --star-active-2: #D99A20;
        --star-preview: #E6E2C2;

        --spinner-track: #E6E2C2;

        --shadow-sm: 0 1px 2px rgba(43, 27, 61, 0.04),
        0 5px 18px rgba(43, 27, 61, 0.05);
        --shadow-md: 0 4px 12px rgba(43, 27, 61, 0.08),
        0 2px 6px rgba(43, 27, 61, 0.04);
        --shadow-lg: 0 12px 28px rgba(43, 27, 61, 0.12),
        0 4px 12px rgba(43, 27, 61, 0.06);
        --shadow-ring: 0 0 0 3px rgba(140, 202, 168, 0.35);
        --shadow-ring-violet: 0 0 0 3px rgba(196, 176, 228, 0.35);
        --shadow-star: 0 0 7px rgba(217, 154, 32, 0.45);
        --shadow-amber: 0 4px 12px rgba(43, 27, 61, 0.08);
        --shadow-amber-sm: 0 2px 6px rgba(43, 27, 61, 0.04);
        --shadow-plum: 0 12px 28px rgba(43, 27, 61, 0.12),
        0 4px 12px rgba(43, 27, 61, 0.06);
        --shadow-plum-sm: 0 8px 22px rgba(43, 27, 61, 0.10);

        /* button ink stays dark in BOTH themes on purpose: the CTA
           is the one element that must keep its identity in dark mode */
        --btn-bg: #6D5FD5;
        --btn-bg-hover: #5E50C9;
        --btn-bg-active: #4E41A2;
        --btn-ink: #ffffff;
        --btn-ring: rgba(109, 95, 213, 0.35);

--bg-shell: #FBF9EA;

        color-scheme: dark;
    }
}

/* ---------- 5. Base ---------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-width: 320px;

    background: var(--bg-shell);
    background-attachment: fixed;

    color: var(--text-primary);

    font-family: var(--font-sans);
    font-feature-settings: "cv05" 1, "cv08" 1, "ss03" 1;
    font-variant-numeric: tabular-nums;

    letter-spacing: -0.006em;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:where(h1, h2, h3, h4) {
    letter-spacing: -0.021em;
    text-wrap: balance;
}

:where(p) {
    text-wrap: pretty;
}

::selection {
    background: var(--violet);
    color: var(--text-primary);
}

/* scrollbars */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    background-clip: content-box;

    border: 3px solid transparent;
    border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--violet-deep);
    background-clip: content-box;
}

/* ---------- 6. Accessibility ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent-strong);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);

    white-space: nowrap;
    border: 0;
}

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

    *,
    *::before,
    *::after {

        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- 7. Icon primitive (replaces every glyph/emoji) ---------- */

.icon {
    display: inline-block;
    flex: 0 0 auto;

    width: 1em;
    height: 1em;

    vertical-align: -0.125em;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-fill {
    fill: currentColor;
    stroke: none;
}

.icon-sm {
    width: 0.875em;
    height: 0.875em;
}

.icon-lg {
    width: 1.25em;
    height: 1.25em;
}

.icon-xl {
    width: 2em;
    height: 2em;

    stroke-width: 1.5;
}

/* ---------- 8. Interaction primitives ---------- */

.lift {

    transition:
        transform var(--dur-fast) var(--ease-standard),
        box-shadow var(--dur-fast) var(--ease-standard),
        border-color var(--dur-fast) var(--ease-standard),
        background-color var(--dur-fast) var(--ease-standard);
}

@media (hover: hover) {

    .lift:hover {

        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }
}

.lift:active {

    transform: translateY(0) scale(0.995);
}

:where(button, .submit-button, .secondary-button):active {

    transform: translateY(1px) scale(0.995);
}

/* ---------- 9. Skeleton loading ---------- */

.skeleton {
    position: relative;
    overflow: hidden;

    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
}

.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        100deg,
        transparent 20%,
        var(--surface-translucent-2) 45%,
        transparent 70%
    );

    transform: translateX(-100%);

    animation: ui-shimmer 1.6s var(--ease-standard) infinite;
}

.skeleton-line {
    height: 12px;
    margin-bottom: 10px;
}

.skeleton-line.short {
    width: 45%;
}

.skeleton-line.medium {
    width: 70%;
}

@keyframes ui-shimmer {

    to {
        transform: translateX(100%);
    }
}