/*
    Gate X design tokens (freedos CI: primary #0D365B, secondary #EB5A5B) for pages outside BaseStepLayout.
    Opt-in: link "_content/FIT.Web.Lib/css/gx-tokens.css" and put the class "gx-theme" on a container (e.g. the content area).
    Apps with their own theme do not set the class; the components then fall back to the Metronic variables (--kt-*).
    The values match .bsl-modern in BaseStepLayout.razor.css - change both together.
*/
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/ibm-plex/ibm-plex-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/ibm-plex/ibm-plex-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex/ibm-plex-mono-400-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex/ibm-plex-mono-500-latin.woff2') format('woff2');
}

.gx-theme {
    --gx-bg: #F2F4F8;
    --gx-surface: #FFFFFF;
    --gx-surface-2: #F7F9FC;
    --gx-line: #DFE5EE;
    --gx-line-strong: #C9D2DF;
    --gx-ink: #14212F;
    --gx-muted: #5B6A7C;
    --gx-faint: #8A97A8;
    --gx-navy: #0D365B;
    --gx-navy-800: #0A2B49;
    --gx-navy-50: #E6EEF6;
    --gx-coral: #EB5A5B;
    --gx-coral-hover: #D94A4B;
    --gx-coral-50: #FDECEC;
    /* Coral as text: #EB5A5B has only 3.5:1 on white, this shade reaches 4.5:1 */
    --gx-coral-ink: #C23B3D;
    --gx-ok: #17845A;
    --gx-ok-soft: #E3F4EC;
    --gx-warn: #A96D05;
    --gx-warn-soft: #FBF1DC;
    --gx-danger: #CF2F55;
    --gx-danger-soft: #FCE8ED;
    --gx-info: #2F5F8A;
    --gx-info-soft: #EAF2FA;
    --gx-shadow: 0 1px 2px rgba(13, 54, 91, 0.06), 0 4px 16px rgba(13, 54, 91, 0.06);
    --gx-ring: 0 0 0 3px rgba(13, 54, 91, 0.22);
    --gx-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --gx-font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

/* Dark theme: same mapping as BaseStepLayout (theme colors of the app, soft backgrounds as transparent tints) */
:root[data-theme="dark"] .gx-theme {
    --gx-bg: var(--kt-body-bg, #151521);
    --gx-surface: var(--kt-card-bg, #1e1e2d);
    --gx-surface-2: var(--kt-gray-100, #1b1b29);
    --gx-line: var(--kt-border-color, #2b2b40);
    --gx-line-strong: var(--kt-gray-300, #323248);
    --gx-ink: var(--kt-gray-900, #ffffff);
    /* Secondary text: #A1A5B7 reaches about 7:1 on dark cards (Metronic gray-600 only about 3.3:1) */
    --gx-muted: #A1A5B7;
    --gx-faint: #7E8299;
    --gx-navy: var(--kt-primary, #4A8BC9);
    --gx-navy-800: var(--kt-primary-active, #3B79B5);
    --gx-navy-50: var(--kt-primary-light, #212e48);
    --gx-coral-50: rgba(235, 90, 91, 0.18);
    --gx-coral-ink: #FF8A8B;
    --gx-ok: #3FBF86;
    --gx-ok-soft: rgba(23, 132, 90, 0.18);
    --gx-warn: #E3A443;
    --gx-warn-soft: rgba(169, 109, 5, 0.2);
    --gx-danger: #FF7A95;
    --gx-danger-soft: rgba(207, 47, 85, 0.18);
    --gx-info: #7FB0E0;
    --gx-info-soft: rgba(47, 95, 138, 0.25);
    --gx-shadow: none;
}