/**
 * Design Tokens - Auto-generated CSS Custom Properties
 * Version: 3.0.0
 * Generated from: tokens.json
 *
 * DO NOT EDIT DIRECTLY - Regenerate using:
 *   python -m app.services.utils.utils_design_tokens
 */

/* ==========================================================================
   Light Theme (Default)
   ========================================================================== */
:root {
    --fp-border-radius-2xl: 32px;
    /* Default radius */
    --fp-border-radius-base: 8px;
    --fp-border-radius-circle: 50%;
    /* Cards */
    --fp-border-radius-lg: 16px;
    /* Inputs / buttons, larger */
    --fp-border-radius-md: 12px;
    --fp-border-radius-none: 0;
    /* Pills, CTAs, badges, counters, progress tracks and icon buttons are fully round. */
    --fp-border-radius-pill: 999px;
    /* Inputs, buttons */
    --fp-border-radius-sm: 8px;
    /* Floating white cards / product panels */
    --fp-border-radius-xl: 24px;
    /* Chips, tiny controls */
    --fp-border-radius-xs: 4px;
    /* Off-system. The pre-v4 theme drew card and sidebar separators dashed; v4 hairlines are solid. Retained for the rare intentional placeholder outline. */
    --fp-border-style-dashed: dashed;
    --fp-border-style-dotted: dotted;
    --fp-border-style-solid: solid;
    --fp-border-width-none: 0;
    --fp-border-width-thick: 2px;
    --fp-border-width-thin: 1px;
    /* RETIRED as a background. Pure black is off-system; anchor dark surfaces on Ink. */
    --fp-color-base-black: #030E11;
    /* Ink — darkest brand ground. Use instead of pure black. */
    --fp-color-base-ink: #092934;
    /* Pure white */
    --fp-color-base-white: #ffffff;
    /* DEPRECATED as a style. The brand hairline is 1px SOLID — 'structure, not decoration'. Kept only so existing references resolve to the right colour; prefer border.default and border.style.solid. */
    --fp-color-border-dashed: #d5e8f1;
    /* Teal-tinted hairline — structure, not decoration */
    --fp-color-border-default: #d5e8f1;
    /* Focus ring color */
    --fp-color-border-focus: #2297bf;
    --fp-color-border-light: #eef8fc;
    --fp-color-border-muted: #e6f1f6;
    /* RETIRED in the 2027 palette refresh — do not use. */
    --fp-color-brand-aqua: #00e0da;
    /* Legacy alias → Electric Sky */
    --fp-color-brand-blue: #24b0ed;
    /* Legacy alias → Sky 300 */
    --fp-color-brand-cyan: #63c3e3;
    /* Electric accent — energy, live, positive states (mostly on dark) */
    --fp-color-brand-electric-sky: #24b0ed;
    /* Statement accent — use sparingly */
    --fp-color-brand-electric-ultramarine: #1717c9;
    /* Legacy alias → positive */
    --fp-color-brand-green: #1f9d6b;
    --fp-color-brand-ice: #c0e8f9;
    /* Legacy alias → Electric Ultramarine */
    --fp-color-brand-indigo: #1717c9;
    /* Ink — darkest ground */
    --fp-color-brand-ink: #092934;
    /* Lightest tint */
    --fp-color-brand-mist: #eef8fc;
    /* Off-system. Kept as a THIRD severity between warning and danger — the IO insights and API scope grids need it, and folding it into warning collapses two distinct states. */
    --fp-color-brand-orange: #c25e1e;
    /* Primary teal */
    --fp-color-brand-primary: #114b5f;
    /* Legacy alias → Signal Red */
    --fp-color-brand-red: #c1292e;
    /* Red pressed */
    --fp-color-brand-red-700: #9e1f24;
    /* The spark — CTAs, pills, rules, quote marks. Never a large fill. */
    --fp-color-brand-signal-red: #c1292e;
    /* Neutral — chips, tracks, dividers, inactive */
    --fp-color-brand-silver: #e0e0e2;
    --fp-color-brand-sky-300: #63c3e3;
    /* Legacy alias → Teal 500 */
    --fp-color-brand-teal: #2297bf;
    --fp-color-brand-teal-500: #2297bf;
    --fp-color-brand-teal-600: #186e8b;
    /* Off-system: the warning hue. Deepened from the earlier #e5983f so it clears 3:1 on white and sits cooler beside the teals. */
    --fp-color-brand-yellow: #b7801a;
    /* Clarity mode ground — mist to white */
    --fp-color-gradient-clarity: linear-gradient(180deg, #eef8fc 0%, #ffffff 55%);
    /* Electric energy sweep — live / positive states */
    --fp-color-gradient-electric: linear-gradient(90deg, #24b0ed 0%, #63c3e3 100%);
    /* Signal mode ground — never flat pure black */
    --fp-color-gradient-signal: linear-gradient(160deg, #0d3242 0%, #092934 60%, #061e26 100%);
    /* Signal ground with corner glow */
    --fp-color-gradient-signal-glow: radial-gradient(120% 90% at 85% 10%, #17546b 0%, #0b2e3b 45%, #071f27 100%);
    /* Faintest surface */
    --fp-color-gray-100: #f4fbfe;
    /* Surface / divider */
    --fp-color-gray-200: #e6f1f6;
    /* Hairline. Too pale to carry a dot or glyph — step to 400 for those. */
    --fp-color-gray-300: #d5e8f1;
    /* Placeholder, disabled, list bullets */
    --fp-color-gray-400: #9fb6c0;
    /* Faint text neutral */
    --fp-color-gray-500: #7f9aa6;
    /* Mid neutral */
    --fp-color-gray-600: #61808d;
    /* Muted body text */
    --fp-color-gray-700: #4d6b78;
    /* Dark neutral */
    --fp-color-gray-800: #23495a;
    /* Ink */
    --fp-color-gray-900: #092934;
    /* Always place a scrim under text on photography */
    --fp-color-scrim-bottom: linear-gradient(180deg, rgba(6,20,26,0) 0%, rgba(6,20,26,.15) 45%, rgba(6,20,26,.82) 100%);
    --fp-color-scrim-full: linear-gradient(180deg, rgba(6,20,26,.55) 0%, rgba(6,20,26,.55) 100%);
    --fp-color-scrim-left: linear-gradient(90deg, rgba(6,20,26,.85) 0%, rgba(6,20,26,.45) 45%, rgba(6,20,26,0) 100%);
    /* Scrollbar track — Silver */
    --fp-color-scrollbar-track: #e0e0e2;
    /* Electric Sky — live / energy states, and the 'you are here' signal in navigation. Fill and 1-3px rules only; not a text colour on light. */
    --fp-color-semantic-accent: #24b0ed;
    /* Teal 500 — links and structure on light surfaces */
    --fp-color-semantic-accent-quiet: #2297bf;
    /* Primary teal. DIVERGES from the brand guide, which makes the CTA Signal Red — red is this product's error colour and the two meanings cannot share a hue. White on #114b5f is 8.9:1. Signal Red remains the CTA on marketing surfaces, where nothing else claims it. */
    --fp-color-semantic-cta: #114b5f;
    /* Silver. Disabled goes neutral, not a faded teal. */
    --fp-color-semantic-cta-disabled: #e0e0e2;
    --fp-color-semantic-cta-disabled-text: #7f9aa6;
    /* Teal 600 — lightens on hover */
    --fp-color-semantic-cta-hover: #186e8b;
    /* Ink — darkens on press */
    --fp-color-semantic-cta-press: #092934;
    /* Signal Red. In this product red means error and NOTHING else — never a CTA, never a large fill. This is the constraint the cta token bends around. */
    --fp-color-semantic-danger: #c1292e;
    --fp-color-semantic-danger-active: #9e1f24;
    --fp-color-semantic-danger-hover: #d13136;
    --fp-color-semantic-danger-light: #fbeaea;
    /* Electric Sky. FILL ONLY — 2.3:1 on white, so it must never carry text or a glyph. Where info needs to be legible as text, use accent-quiet (#2297bf) or text.link. */
    --fp-color-semantic-info: #24b0ed;
    --fp-color-semantic-info-active: #1a93c9;
    --fp-color-semantic-info-light: #e2f3fb;
    /* Primary brand color — Flightpath Primary teal */
    --fp-color-semantic-primary: #114b5f;
    /* Primary pressed — Ink */
    --fp-color-semantic-primary-active: #092934;
    /* Primary hover — Teal 600 */
    --fp-color-semantic-primary-hover: #186e8b;
    /* Primary tint surface */
    --fp-color-semantic-primary-light: #e2f3fb;
    /* Silver neutral */
    --fp-color-semantic-secondary: #e0e0e2;
    --fp-color-semantic-secondary-active: #cbe9f6;
    --fp-color-semantic-secondary-hover: #d5e8f1;
    --fp-color-semantic-secondary-light: #f4fbfe;
    /* Positive state */
    --fp-color-semantic-success: #1f9d6b;
    --fp-color-semantic-success-active: #16805a;
    --fp-color-semantic-success-light: #e8f7f1;
    /* Off-system addition: the v4 palette ships no amber. Deepened to clear 3:1 on white and sit cooler beside the teals. A judgement call — the pastel it replaced was prettier but failed contrast. */
    --fp-color-semantic-warning: #b7801a;
    --fp-color-semantic-warning-active: #96690f;
    --fp-color-semantic-warning-hover: #cf9524;
    --fp-color-semantic-warning-light: #fdf3e0;
    --fp-color-social-facebook-active: #2d4373;
    --fp-color-social-facebook-base: #3b5998;
    --fp-color-social-facebook-light: rgba(59, 89, 152, 0.1);
    --fp-color-social-google-active: #c23321;
    --fp-color-social-google-base: #dd4b39;
    --fp-color-social-google-light: rgba(221, 75, 57, 0.1);
    --fp-color-social-instagram-active: #c13584;
    --fp-color-social-instagram-base: #e1306c;
    --fp-color-social-instagram-light: rgba(225, 48, 108, 0.1);
    --fp-color-social-linkedin-active: #005885;
    --fp-color-social-linkedin-base: #0077b5;
    --fp-color-social-linkedin-light: rgba(0, 119, 181, 0.1);
    --fp-color-social-twitter-active: #0d8bd9;
    --fp-color-social-twitter-base: #1da1f2;
    --fp-color-social-twitter-light: rgba(29, 161, 242, 0.1);
    --fp-color-social-youtube-active: #cc0000;
    --fp-color-social-youtube-base: #ff0000;
    --fp-color-social-youtube-light: rgba(255, 0, 0, 0.1);
    --fp-color-surface-accent: #e2f3fb;
    --fp-color-surface-active: #eef8fc;
    /* Main body background (Clarity white / Signal ink) */
    --fp-color-surface-body: #ffffff;
    /* Card background — floating white card in Clarity, raised teal panel in Signal */
    --fp-color-surface-card: #ffffff;
    --fp-color-surface-dropdown: #ffffff;
    --fp-color-surface-hover: #f4fbfe;
    --fp-color-surface-input: #ffffff;
    --fp-color-surface-input-solid: #f4fbfe;
    --fp-color-surface-muted: #eef8fc;
    /* Page background (Mist / Signal inset) */
    --fp-color-surface-page: #eef8fc;
    --fp-color-surface-primary: #ffffff;
    --fp-color-surface-secondary: #f4fbfe;
    --fp-color-surface-secondary-active: #e2f3fb;
    --fp-color-surface-secondary-hover: #eef8fc;
    /* Teal 600 on light, Sky 300 on dark */
    --fp-color-text-link: #186e8b;
    --fp-color-text-link-hover: #114b5f;
    --fp-color-text-muted: #7f9aa6;
    /* Text on Electric Sky fills */
    --fp-color-text-on-accent: #092934;
    --fp-color-text-on-error: #ffffff;
    --fp-color-text-on-primary: #ffffff;
    /* White. The deepened warning hue is dark enough that Ink no longer clears contrast on it. */
    --fp-color-text-on-warning: #ffffff;
    --fp-color-text-placeholder: #7f9aa6;
    /* Primary text */
    --fp-color-text-primary: #092934;
    /* Secondary / caption text */
    --fp-color-text-secondary: #4d6b78;
    --fp-component-animation-duration-fast: 0.12s;
    --fp-component-animation-duration-normal: 0.2s;
    --fp-component-animation-duration-slow: 0.36s;
    --fp-component-animation-easing-ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
    /* Entrances — fades and short upward slides */
    --fp-component-animation-easing-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    /* Scrim over content — Ink-based, not neutral black */
    --fp-component-modal-backdrop-color: rgba(6, 20, 26, 0.55);
    /* Modal backdrop opacity */
    --fp-component-modal-backdrop-opacity: 0.3;
    --fp-component-modal-sizes-lg: 800px;
    --fp-component-modal-sizes-md: 500px;
    --fp-component-modal-sizes-sm: 300px;
    --fp-component-modal-sizes-xl: 1140px;
    /* Scrollbar width */
    --fp-component-scrollbar-width: 4px;
    /* Switch thumb background */
    --fp-component-switch-thumb-background: #ffffff;
    --fp-component-switch-thumb-size-lg: 1.5rem;
    --fp-component-switch-thumb-size-md: 1.25rem;
    --fp-component-switch-thumb-size-sm: 1rem;
    --fp-component-switch-thumb-translate-lg: 1.75rem;
    --fp-component-switch-thumb-translate-md: 1.25rem;
    --fp-component-switch-thumb-translate-sm: 1rem;
    /* Track when disabled */
    --fp-component-switch-track-background-disabled: #eef8fc;
    /* Track when off — Silver */
    --fp-component-switch-track-background-off: #e0e0e2;
    /* Track when on — Primary teal (Electric Sky on dark) */
    --fp-component-switch-track-background-on: #114b5f;
    /* Switch track border width */
    --fp-component-switch-track-border: 2px;
    --fp-component-switch-track-height-lg: 1.75rem;
    --fp-component-switch-track-height-md: 1.5rem;
    --fp-component-switch-track-height-sm: 1.25rem;
    --fp-component-switch-track-width-lg: 3.5rem;
    --fp-component-switch-track-width-md: 2.75rem;
    --fp-component-switch-track-width-sm: 2.25rem;
    /* Ink. Replaces both Bootstrap's near-black and the theme's white-tooltip convention — near-black is retired from the palette. */
    --fp-component-tooltip-background: #092934;
    --fp-component-tooltip-radius: 8px;
    --fp-component-tooltip-text: #ffffff;
    /* Default border radius (Flightpath --radius-sm). Radii are in PX deliberately — this theme's rem base is 13px, which shrinks rem-based radii below spec. */
    --fp-core-base-border-radius: 8px;
    /* Default border width */
    --fp-core-base-border-width: 1px;
    /* Base font size for desktop */
    --fp-core-base-font-size: 13px;
    /* Base line height */
    --fp-core-base-line-height: 1.5;
    /* Default transition duration (Flightpath --dur) */
    --fp-core-base-transition-duration: 0.2s;
    /* Ease-out entrances, no bounce (Flightpath --ease-out) */
    --fp-core-base-transition-timing: cubic-bezier(0.22, 0.61, 0.36, 1);
    --fp-core-breakpoints-lg: 992px;
    --fp-core-breakpoints-md: 768px;
    --fp-core-breakpoints-sm: 576px;
    --fp-core-breakpoints-xl: 1200px;
    --fp-core-breakpoints-xs: 0px;
    --fp-core-breakpoints-xxl: 1400px;
    /* Header z-index */
    --fp-elevation-layout-header: 100;
    /* Menu dropdown z-index */
    --fp-elevation-layout-menu-dropdown: 107;
    /* Sidebar z-index */
    --fp-elevation-layout-sidebar: 105;
    /* Sidebar panel z-index */
    --fp-elevation-layout-sidebar-panel: 104;
    /* Toolbar z-index */
    --fp-elevation-layout-toolbar: 99;
    --fp-elevation-z-index-base: 1;
    --fp-elevation-z-index-dropdown: 1000;
    --fp-elevation-z-index-fixed: 1030;
    --fp-elevation-z-index-modal: 1050;
    --fp-elevation-z-index-modal-backdrop: 1040;
    --fp-elevation-z-index-popover: 1060;
    --fp-elevation-z-index-sticky: 1020;
    --fp-elevation-z-index-tooltip: 1070;
    --fp-opacity-0: 0;
    --fp-opacity-10: 0.1;
    --fp-opacity-100: 1;
    --fp-opacity-25: 0.25;
    --fp-opacity-5: 0.05;
    --fp-opacity-50: 0.5;
    --fp-opacity-75: 0.75;
    /* Flightpath --shadow-md */
    --fp-shadow-base: 0 8px 24px rgba(9, 41, 52, 0.10);
    /* Card shadow — teal-tinted, never neutral grey */
    --fp-shadow-card: 0 2px 8px rgba(9, 41, 52, 0.08);
    /* Cards lift on hover */
    --fp-shadow-card-hover: 0 18px 48px rgba(9, 41, 52, 0.14);
    /* Code block shadow */
    --fp-shadow-code: 0 2px 8px rgba(9, 41, 52, 0.08);
    /* Dropdown shadow */
    --fp-shadow-dropdown: 0 18px 48px rgba(9, 41, 52, 0.14);
    /* Focus ring — Teal 500 at 18%. One ring everywhere, replacing Bootstrap's blue glow. Softened from 35%: at that strength it read as an error state next to the danger tokens. */
    --fp-shadow-focus: 0 0 0 3px rgba(34, 151, 191, 0.18);
    /* Floating white card — Flightpath --shadow-lg */
    --fp-shadow-lg: 0 18px 48px rgba(9, 41, 52, 0.14);
    --fp-shadow-md: 0 8px 24px rgba(9, 41, 52, 0.10);
    /* Modal shadow */
    --fp-shadow-modal: 0 32px 80px rgba(9, 41, 52, 0.20);
    --fp-shadow-none: none;
    /* Flightpath --shadow-sm */
    --fp-shadow-sm: 0 2px 8px rgba(9, 41, 52, 0.08);
    --fp-shadow-xl: 0 32px 80px rgba(9, 41, 52, 0.20);
    /* Flightpath --shadow-xs */
    --fp-shadow-xs: 0 1px 2px rgba(9, 41, 52, 0.06);
    --fp-size-font-2xl: 1.25rem;
    --fp-size-font-3xl: 1.35rem;
    --fp-size-font-4xl: 1.5rem;
    --fp-size-font-5xl: 1.75rem;
    --fp-size-font-base: 1rem;
    --fp-size-font-lg: 1.075rem;
    --fp-size-font-sm: 0.925rem;
    --fp-size-font-xl: 1.15rem;
    --fp-size-font-xs: 0.75rem;
    /* Container horizontal padding */
    --fp-size-layout-container-padding: 30px;
    /* Content area padding */
    --fp-size-layout-content-padding: 30px;
    /* Standard header height for all states */
    --fp-size-layout-header-height: 70px;
    /* Default sidebar width */
    --fp-size-layout-sidebar-width: 300px;
    /* Minimized sidebar width */
    --fp-size-layout-sidebar-width-minimized: 75px;
    --fp-size-space-0: 0;
    --fp-size-space-1: 0.25rem;
    --fp-size-space-1-5: 0.375rem;
    --fp-size-space-10: 2.5rem;
    --fp-size-space-12: 3rem;
    --fp-size-space-16: 4rem;
    --fp-size-space-2: 0.5rem;
    --fp-size-space-2-5: 0.625rem;
    --fp-size-space-20: 5rem;
    --fp-size-space-3: 0.75rem;
    --fp-size-space-4: 1rem;
    --fp-size-space-5: 1.25rem;
    --fp-size-space-6: 1.5rem;
    --fp-size-space-8: 2rem;
    --fp-spacing-component-accordion-padding-x: 1.5rem;
    --fp-spacing-component-accordion-padding-y: 1.5rem;
    --fp-spacing-component-button-padding-x: 1.5rem;
    --fp-spacing-component-button-padding-y: 0.75rem;
    --fp-spacing-component-card-padding-x: 2.25rem;
    --fp-spacing-component-card-padding-y: 2rem;
    --fp-spacing-component-input-padding-x: 1rem;
    --fp-spacing-component-input-padding-y: 0.75rem;
    --fp-spacing-component-modal-margin: 0.5rem;
    --fp-spacing-component-modal-padding: 1.75rem;
    --fp-spacing-component-table-cell-padding-x: 0.75rem;
    --fp-spacing-component-table-cell-padding-y: 0.75rem;
    /* Container horizontal padding */
    --fp-spacing-layout-container-padding: 1.5rem;
    /* Grid gutter width */
    --fp-spacing-layout-grid-gutter: 1.5rem;
    /* Flightpath --dur */
    --fp-transition-duration-base: 0.2s;
    /* Flightpath --dur-fast */
    --fp-transition-duration-fast: 0.12s;
    /* Flightpath --dur-slow */
    --fp-transition-duration-slow: 0.36s;
    /* Slower transition duration */
    --fp-transition-duration-slower: 0.5s;
    /* Base transition for all properties */
    --fp-transition-presets-base: all 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    /* Button transition */
    --fp-transition-presets-button: color 0.12s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.12s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.12s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.12s cubic-bezier(0.22, 0.61, 0.36, 1);
    /* Card hover lift */
    --fp-transition-presets-card-lift: box-shadow 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    /* Collapse transition */
    --fp-transition-presets-collapse: height 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
    /* Color transition */
    --fp-transition-presets-color: color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    /* Fade transition */
    --fp-transition-presets-fade: opacity 0.12s linear;
    /* Form element transition */
    --fp-transition-presets-form: background-color 0.12s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.12s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.12s cubic-bezier(0.22, 0.61, 0.36, 1);
    /* Transform transition */
    --fp-transition-presets-transform: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    /* Legacy alias → ease-out */
    --fp-transition-timing-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --fp-transition-timing-ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
    /* Default — clear, forward entrances, no bounce */
    --fp-transition-timing-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --fp-transition-timing-linear: linear;
    /* IBM Plex Mono — labels, kickers, metrics, hex tokens */
    --fp-typography-font-family-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    /* Poppins — one family, full range */
    --fp-typography-font-family-sans: Poppins, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fp-typography-font-weight-black: 900;
    --fp-typography-font-weight-bold: 700;
    /* Display */
    --fp-typography-font-weight-extrabold: 800;
    /* Legacy alias — 300 is off-system; Poppins Light is not used */
    --fp-typography-font-weight-light: 400;
    /* Subhead */
    --fp-typography-font-weight-medium: 500;
    /* Body */
    --fp-typography-font-weight-normal: 400;
    /* Heading */
    --fp-typography-font-weight-semibold: 600;
    /* Large display is tracked tight */
    --fp-typography-letter-spacing-display: -0.02em;
    /* Uppercase mono kickers / labels */
    --fp-typography-letter-spacing-kicker: 0.16em;
    /* Mono metrics */
    --fp-typography-letter-spacing-mono: 0.06em;
    --fp-typography-letter-spacing-normal: 0;
    /* Headings */
    --fp-typography-letter-spacing-tight: -0.01em;
    --fp-typography-letter-spacing-wide: 0.025em;
    /* Legacy alias → mono */
    --fp-typography-letter-spacing-wider: 0.06em;
    /* Legacy alias → kicker */
    --fp-typography-letter-spacing-widest: 0.16em;
    /* Large display */
    --fp-typography-line-height-display: 1.02;
    /* Body text */
    --fp-typography-line-height-normal: 1.5;
    /* Large / long-form text */
    --fp-typography-line-height-relaxed: 1.65;
    /* Headings */
    --fp-typography-line-height-tight: 1.15;
}

/* ==========================================================================
   Dark Theme Overrides
   ========================================================================== */

[data-theme="dark"] {
    --fp-color-border-dashed: rgba(255, 255, 255, 0.18);
    --fp-color-border-default: rgba(255, 255, 255, 0.12);
    --fp-color-border-focus: #24b0ed;
    --fp-color-border-light: rgba(255, 255, 255, 0.08);
    --fp-color-border-muted: rgba(255, 255, 255, 0.16);
    --fp-color-gray-100: #0f3543;
    --fp-color-gray-200: #0d3242;
    --fp-color-gray-300: #143f50;
    --fp-color-gray-400: #1c4d61;
    --fp-color-gray-500: #5f8497;
    --fp-color-gray-600: #9cc2d0;
    --fp-color-gray-700: #b9d4de;
    --fp-color-gray-800: #e2f3fb;
    --fp-color-gray-900: #ffffff;
    --fp-color-scrollbar-track: rgba(255, 255, 255, 0.14);
    --fp-color-semantic-danger-light: #3a1b1d;
    --fp-color-semantic-info-light: #0f3543;
    --fp-color-semantic-primary-light: #0f3543;
    --fp-color-semantic-secondary: #0f3543;
    --fp-color-semantic-secondary-active: #17546b;
    --fp-color-semantic-secondary-hover: #143f50;
    --fp-color-semantic-secondary-light: #0d3242;
    --fp-color-semantic-success-light: #123329;
    --fp-color-semantic-warning-light: #3a2f14;
    --fp-color-surface-accent: #0f3543;
    --fp-color-surface-active: #143f50;
    --fp-color-surface-body: #092934;
    --fp-color-surface-card: #0f3543;
    --fp-color-surface-dropdown: #0f3543;
    --fp-color-surface-hover: #0f3543;
    --fp-color-surface-input: #061e26;
    --fp-color-surface-input-solid: #0f3543;
    --fp-color-surface-muted: #0d3242;
    --fp-color-surface-page: #061e26;
    --fp-color-surface-primary: #092934;
    --fp-color-surface-secondary: #0f3543;
    --fp-color-surface-secondary-active: #17546b;
    --fp-color-surface-secondary-hover: #143f50;
    --fp-color-text-link: #63c3e3;
    --fp-color-text-link-hover: #24b0ed;
    --fp-color-text-muted: #5f8497;
    --fp-color-text-placeholder: #5f8497;
    --fp-color-text-primary: #ffffff;
    --fp-color-text-secondary: #9cc2d0;
    --fp-component-modal-backdrop-opacity: 0.4;
    --fp-component-switch-track-background-disabled: rgba(255, 255, 255, 0.08);
    --fp-component-switch-track-background-off: rgba(255, 255, 255, 0.16);
    --fp-component-switch-track-background-on: #24b0ed;
    --fp-shadow-base: 0 12px 40px rgba(0, 0, 0, 0.35);
    --fp-shadow-card: none;
    --fp-shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.35);
    --fp-shadow-dropdown: 0 12px 40px rgba(0, 0, 0, 0.35);
    --fp-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.35);
    --fp-shadow-md: 0 12px 40px rgba(0, 0, 0, 0.35);
    --fp-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.45);
    --fp-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
    --fp-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.45);
    --fp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   Bootstrap Integration
   ========================================================================== */

/* Bootstrap Root Overrides */
:root {
    --bs-primary: var(--fp-color-semantic-primary);
    --bs-link-color: var(--fp-color-semantic-primary);
    --bs-secondary: var(--fp-color-semantic-secondary);
    --bs-success: var(--fp-color-semantic-success);
    --bs-info: var(--fp-color-semantic-info);
    --bs-warning: var(--fp-color-semantic-warning);
    --bs-danger: var(--fp-color-semantic-danger);
    --bs-white: var(--fp-color-base-white);
    --bs-black: var(--fp-color-base-black);
    --bs-body-bg: var(--fp-color-surface-body);
    --bs-body-color: var(--fp-color-text-primary);
    --bs-border-color: var(--fp-color-border-default);
    --bs-body-font-family: var(--fp-typography-font-family-sans);
    --bs-font-monospace: var(--fp-typography-font-family-mono);
    --bs-border-radius: var(--fp-core-base-border-radius);
}

/* Bootstrap Button Overrides */
.btn-primary {
    --bs-btn-bg: var(--fp-color-semantic-primary);
    --bs-btn-border-color: var(--fp-color-semantic-primary);
    --bs-btn-hover-bg: var(--fp-color-semantic-primary-hover);
    --bs-btn-hover-border-color: var(--fp-color-semantic-primary-hover);
    --bs-btn-active-bg: var(--fp-color-semantic-primary-active);
    --bs-btn-active-border-color: var(--fp-color-semantic-primary-active);
}
.btn-secondary {
    --bs-btn-bg: var(--fp-color-semantic-secondary);
    --bs-btn-border-color: var(--fp-color-semantic-secondary);
    --bs-btn-hover-bg: var(--fp-color-semantic-secondary-hover);
    --bs-btn-hover-border-color: var(--fp-color-semantic-secondary-hover);
    --bs-btn-active-bg: var(--fp-color-semantic-secondary-active);
    --bs-btn-active-border-color: var(--fp-color-semantic-secondary-active);
}
.btn-success {
    --bs-btn-bg: var(--fp-color-semantic-success);
    --bs-btn-border-color: var(--fp-color-semantic-success);
    --bs-btn-hover-bg: var(--fp-color-semantic-success-active);
    --bs-btn-hover-border-color: var(--fp-color-semantic-success-active);
    --bs-btn-active-bg: var(--fp-color-semantic-success-active);
    --bs-btn-active-border-color: var(--fp-color-semantic-success-active);
}
.btn-info {
    --bs-btn-bg: var(--fp-color-semantic-info);
    --bs-btn-border-color: var(--fp-color-semantic-info);
    --bs-btn-hover-bg: var(--fp-color-semantic-info-active);
    --bs-btn-hover-border-color: var(--fp-color-semantic-info-active);
    --bs-btn-active-bg: var(--fp-color-semantic-info-active);
    --bs-btn-active-border-color: var(--fp-color-semantic-info-active);
}
.btn-warning {
    --bs-btn-bg: var(--fp-color-semantic-warning);
    --bs-btn-border-color: var(--fp-color-semantic-warning);
    --bs-btn-hover-bg: var(--fp-color-semantic-warning-hover);
    --bs-btn-hover-border-color: var(--fp-color-semantic-warning-hover);
    --bs-btn-active-bg: var(--fp-color-semantic-warning-active);
    --bs-btn-active-border-color: var(--fp-color-semantic-warning-active);
}
.btn-danger {
    --bs-btn-bg: var(--fp-color-semantic-danger);
    --bs-btn-border-color: var(--fp-color-semantic-danger);
    --bs-btn-hover-bg: var(--fp-color-semantic-danger-hover);
    --bs-btn-hover-border-color: var(--fp-color-semantic-danger-hover);
    --bs-btn-active-bg: var(--fp-color-semantic-danger-active);
    --bs-btn-active-border-color: var(--fp-color-semantic-danger-active);
}

/* Bootstrap Alert Overrides */
.alert-primary {
    --bs-alert-color: var(--fp-color-semantic-primary);
    --bs-alert-bg: var(--fp-color-semantic-primary-light);
    --bs-alert-border-color: var(--fp-color-semantic-primary);
}
.alert-success {
    --bs-alert-color: var(--fp-color-semantic-success);
    --bs-alert-bg: var(--fp-color-semantic-success-light);
    --bs-alert-border-color: var(--fp-color-semantic-success);
}
.alert-info {
    --bs-alert-color: var(--fp-color-semantic-info);
    --bs-alert-bg: var(--fp-color-semantic-info-light);
    --bs-alert-border-color: var(--fp-color-semantic-info);
}
.alert-warning {
    --bs-alert-color: var(--fp-color-semantic-warning);
    --bs-alert-bg: var(--fp-color-semantic-warning-light);
    --bs-alert-border-color: var(--fp-color-semantic-warning);
}
.alert-danger {
    --bs-alert-color: var(--fp-color-semantic-danger);
    --bs-alert-bg: var(--fp-color-semantic-danger-light);
    --bs-alert-border-color: var(--fp-color-semantic-danger);
}

/* Bootstrap Dark Theme Overrides */
[data-theme="dark"] {
    --bs-body-bg: var(--fp-color-surface-body);
    --bs-body-color: var(--fp-color-text-primary);
    --bs-border-color: var(--fp-color-border-default);
}