/* =========================================================
   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(.2,.8,.2,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ======= Premium Light Color System ======= */

:root {
    /* === Page Background === */
    --bg-page: #FFFCEF;

    /* === Surfaces === */
    --surface-card: #FFFEF9;
    --surface-input: #FFFFFF;
    --surface-cream: #FBF9EA;

    /* === Borders === */
    --border: #E8E4C4;
    --border-hover: #D5D28F;

    /* === Lavender / Purple === */
    --lavender: #EEEBFF;
    --lavender-soft: #EEEBFF;

    /* === Accent (CTA) === */
    --cta: #6D5FD5;
    --cta-hover: #5E50C9;

    /* === Olive === */
    --olive: #BDB96A;

    /* === Success === */
    --success: #6B6820;
    --success-bg: #F1EFC8;

    /* === Stars === */
    --star: #D99A20;

    /* === Warning === */
    --warning: #6B5300;
    --warning-bg: #FFF3CF;

    /* === Danger === */
    --danger: #E0606F;

    /* === Text === */
    --text-primary: #2B1B3D;
    --text-secondary: #5E5470;
    --text-tertiary: #8C839C;

    /* === Accent (for status dot) === */
    --accent: var(--cta);

    /* === White === */
    --white: #FFFFFF;

    /* === Select arrow (dropdown chevron) === */
    --select-arrow: #8C839C;

    /* === Focus ring === */
    --focus-ring: #6D5FD5;

    /* === Star colors === */
    --star-idle: #5A5675;

    /* === Danger hover === */
    --danger-soft: #FBE3E6;
    --danger-ink: #E0606F;

    /* === Olive === */
    --olive-ink: #5A5618;
    --olive-soft: #FDFBD4;

    /* === Warning === */
    --warning-ink: #6B5300;
    --warning-soft: #FFF3CF;

    /* === Button colors === */
    --btn-bg: var(--surface-input);
    --btn-ink: var(--cta);

    /* === Surface variants === */
    --surface-strong: #FBFAFF;

    /* === Elevation / Shadows === */
    --shadow-sm: 0 1px 2px rgba(43,27,61,.05),
        0 5px 18px rgba(43,27,61,.03);
    --shadow-md: 0 4px 14px rgba(43,27,61,.05);
    --shadow-lg: 0 12px 32px rgba(43,27,61,.08),
        0 2px 6px rgba(43,27,61,.04);
    --shadow-ring: 0 0 0 4px rgba(109,95,213,.18);
    --shadow-ring-sm: 0 0 0 2px rgba(109,95,213,.10);
    --shadow-star: 0 0 7px rgba(217,154,32,.35);
    --shadow-plum: 0 4px 12px rgba(43,27,61,.15);
    --shadow-cta: 0 4px 12px rgba(109,95,213,.25),
        0 10px 28px rgba(109,95,213,.40);

    /* === Approval / amber shadows === */
    --shadow-amber: 0 4px 16px rgba(189,185,106,.25),
        0 2px 6px rgba(189,185,106,.15);
    --shadow-amber-sm: 0 2px 8px rgba(189,185,106,.20);
}

/* ======= Elevation / Shadows ======= */

:root {
    --shadow-sm: 0 1px 2px rgba(43,27,61,.05),
        0 5px 18px rgba(43,27,61,.03);
    --shadow-md: 0 4px 14px rgba(43,27,61,.05);
    --shadow-lg: 0 12px 32px rgba(43,27,61,.08),
        0 2px 6px rgba(43,27,61,.04);
    --shadow-ring: 0 0 0 4px rgba(193,191,255,.60);
    --shadow-ring-sm: 0 0 0 2px rgba(193,191,255,.40);
    --shadow-star: 0 0 7px rgba(217,154,32,.35);
    --shadow-plum: 0 4px 12px rgba(43,27,61,.15);
    --shadow-cta: 0 4px 12px rgba(109,95,213,.25),
        0 10px 28px rgba(109,95,213,.40);
}

/* ---------- 3. Typography 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-page);
    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;
}

/* Scrollbars */

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

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

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

::-webkit-scrollbar-thumb {
    background: var(--border);
    background-clip: content-box;
    border-radius: var(--radius-pill);
}

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

/* Selection */

::selection {
    background: var(--cta);
    color: var(--white);
}

/* ---------- 4. Accessibility ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--lavender);
    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;
    }
}

/* ---------- 5. 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;
}

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

/* ---------- 6. 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);
}