/* Awssome UI 2.0 — design tokens. The brand ramp at the top of :root is the single theme
   switch; everything else here is semantic aliases, type, radius, elevation and motion. */

@font-face {
    font-family: 'Host Grotesk';
    src: url('../../plugins/global/fonts/HostGrotesk/HostGrotesk-Variable.ttf') format('truetype');
    font-weight: 300 800;
    font-display: swap;
}

:root {
    /* ===================================================================
       THEME: the only place to edit to re-brand the app.
       Change the 11 brand steps (and --ui-brand-rgb = the 500 step as
       "r, g, b") and every surface follows: UI 2.0 components, Bootstrap/Keen
       (--bs-primary / --kt-primary), the legacy aws-*-primary-* utilities and
       compiled legacy rules (theme-bridge.css), inline SVG icons, and JS charts /
       toasts (window.uiTheme, js/redesign/theme.js).
       Not covered: raster art (Skai mascot props) and brand SVG artwork (logos,
       backgrounds, onboarding illustrations under media/svg).
       =================================================================== */
    --ui-brand-50: #FFF7ED;
    --ui-brand-100: #FFEED4;
    --ui-brand-200: #FFD9A8;
    --ui-brand-300: #FFBD70;
    --ui-brand-400: #FF9537;
    --ui-brand-500: #FF7915;
    --ui-brand-600: #F05A06;
    --ui-brand-700: #C74207;
    --ui-brand-800: #9E350E;
    --ui-brand-900: #7F2E0F;
    --ui-brand-950: #451405;
    --ui-brand-rgb: 255, 121, 21;
    /* =================================================================== */

    /* Legacy names kept as aliases so older page CSS keeps working */
    --ui-orange-50: var(--ui-brand-50);
    --ui-orange-100: var(--ui-brand-100);
    --ui-orange-200: var(--ui-brand-200);
    --ui-orange-300: var(--ui-brand-300);
    --ui-orange-400: var(--ui-brand-400);
    --ui-orange-500: var(--ui-brand-500);
    --ui-orange-600: var(--ui-brand-600);
    --ui-orange-700: var(--ui-brand-700);

    --ui-yellow-100: #FFF9C5;
    --ui-yellow-200: #FFF485;
    --ui-yellow-500: #FFB700;
    --ui-pink-50: #FEF1F8;
    --ui-pink-300: #FF99CF;
    --ui-pink-700: #CA0C58;
    --ui-green-50: #ECFDF5;
    --ui-green-100: #D0FBE5;
    --ui-green-400: #31D699;
    --ui-green-600: #02A370;
    --ui-green-700: #027A57;
    --ui-blue-50: #EEF9FF;
    --ui-blue-600: #0E82F9;
    --ui-blue-800: #1458B9;
    --ui-red-50: #FEF3F2;
    --ui-red-500: #F04438;
    --ui-red-700: #B42318;

    /* Neutrals: warm-leaning greys so the orange never looks muddy */
    --ui-ink: #1D1D1F;
    --ui-ink-2: #3A3A3C;
    --ui-muted: #6E6E73;
    --ui-subtle: #8E8E93;
    --ui-line: #E8E8EA;
    --ui-line-soft: #F0F0F2;
    --ui-fill: #F5F5F7;
    --ui-fill-2: #FAFAFB;
    --ui-canvas: #F7F7F8;
    --ui-surface: #FFFFFF;

    /* Semantic */
    --ui-primary: var(--ui-brand-500);
    --ui-primary-hover: var(--ui-brand-600);
    --ui-primary-press: var(--ui-brand-700);
    --ui-primary-tint: var(--ui-brand-50);
    --ui-primary-tint-2: var(--ui-brand-100);
    --ui-focus-ring: 0 0 0 4px rgba(var(--ui-brand-rgb), .18);

    /* Type */
    --ui-font-display: 'Host Grotesk', 'Figtree Bold', system-ui, sans-serif;
    --ui-font-body: 'Figtree Regular', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ui-font-medium: 'Figtree Medium', 'Figtree Regular', system-ui, sans-serif;
    --ui-font-semibold: 'Figtree SemiBold', 'Figtree Regular', system-ui, sans-serif;
    --ui-font-bold: 'Figtree Bold', 'Figtree Regular', system-ui, sans-serif;

    /* Radius */
    --ui-r-xs: 8px;
    --ui-r-sm: 10px;
    --ui-r-md: 12px;
    --ui-r-lg: 16px;
    --ui-r-xl: 20px;
    --ui-r-2xl: 28px;
    --ui-r-pill: 999px;

    /* Elevation: soft, wide, low-contrast */
    --ui-shadow-xs: 0 1px 2px rgba(16, 16, 20, .04);
    --ui-shadow-sm: 0 1px 2px rgba(16, 16, 20, .04), 0 2px 8px rgba(16, 16, 20, .04);
    --ui-shadow-md: 0 2px 4px rgba(16, 16, 20, .04), 0 8px 24px rgba(16, 16, 20, .06);
    --ui-shadow-lg: 0 8px 16px rgba(16, 16, 20, .06), 0 24px 56px rgba(16, 16, 20, .10);
    --ui-shadow-primary: 0 6px 16px rgba(var(--ui-brand-rgb), .28);

    /* Motion */
    --ui-ease: cubic-bezier(.2, .8, .2, 1);
    --ui-fast: 140ms;
    --ui-base: 220ms;

    /* Layout */
    --ui-sidebar-w: 264px;
    --ui-header-h: 64px;
    --ui-gutter: 32px;

    /* Bootstrap / Keen bridge: everything built on --bs-* follows the brand */
    --bs-primary: var(--ui-brand-500);
    --bs-primary-rgb: var(--ui-brand-rgb);
    --bs-primary-active: var(--ui-brand-600);
    --bs-primary-light: var(--ui-brand-50);
    --bs-primary-bg-subtle: var(--ui-brand-50);
    --bs-primary-border-subtle: var(--ui-brand-200);
    --bs-primary-text-emphasis: var(--ui-brand-700);
    --bs-link-color: var(--ui-brand-600);
    --bs-link-color-rgb: var(--ui-brand-rgb);
    --bs-link-hover-color: var(--ui-brand-700);
    --bs-body-bg: #F7F7F8;
    --bs-body-color: #1D1D1F;
    --bs-border-color: #E8E8EA;
    --bs-border-radius: 12px;
    --bs-border-radius-lg: 16px;
    --bs-body-font-family: 'Figtree Regular', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --kt-primary: var(--ui-brand-500);
    --kt-primary-active: var(--ui-brand-600);
    --kt-primary-light: var(--ui-brand-50);
    --kt-primary-inverse: #FFFFFF;
    --kt-text-primary: var(--ui-brand-500);
}

@media (max-width: 991.98px) {
    :root {
        --ui-gutter: 20px;
        --ui-header-h: 60px;
    }
}

@media (max-width: 575.98px) {
    :root {
        --ui-gutter: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ui-fast: 0ms;
        --ui-base: 0ms;
    }
}