/* stylelint-disable */
:root {
    /* ============================================
   * BASE TOKENS
   * ============================================
   * Foundation design tokens that define the base values
   * used throughout the design system.
   *
   * Categories:
   * 1. Blur
   * 2. Border
   * 3. Breakpoint
   * 4. Color (Gradient)
   * 5. Color (Solid)
   * 6. Duration
   * 7. Motion (Duration)
   * 8. Motion (Easing)
   * 9. Motion (Opacity)
   * 10. Motion (Scale)
   * 11. Motion (Transform Origin)
   * 12. Opacity
   * 13. Radius
   * 14. Shadow
   * 15. Size
   * 16. Space
   * 17. Typography (Family)
   * 18. Typography (Line Height)
   * 19. Typography (Scale)
   * 20. Typography (Weight)
   * ============================================ */

    /* --- Blur --- */

    /* Blur amount: 8px */
    --f-base-blur-1: 8px;
    /* Blur amount: 20px */
    --f-base-blur-2: 20px;

    /* --- Breakpoint --- */

    /* Breakpoint width for xs screens (0px) */
    --f-base-breakpoint-xs: 0;
    /* Breakpoint width for sm screens (576px) */
    --f-base-breakpoint-sm: 576;
    /* Breakpoint width for md screens (768px) */
    --f-base-breakpoint-md: 768;
    /* Breakpoint width for lg screens (992px) */
    --f-base-breakpoint-lg: 992;
    /* Breakpoint width for xl screens (1920px) */
    --f-base-breakpoint-xl: 1920;

    /* --- Border --- */

    /* Border width: 0px */
    --f-base-border-size-0: 0px;
    /* Border width: 1px */
    --f-base-border-size-1: 1px;
    /* Border width: 2px */
    --f-base-border-size-2: 2px;
    /* Border width: 4px */
    --f-base-border-size-3: 4px;

    /* --- Color (Solid) --- */

    /* Primary brand burgundy colour, used for interactive elements */
    --f-base-color-solid-burgundy-400: #8e2157;
    /* Darker burgundy, used for hover states or strong accents */
    --f-base-color-solid-burgundy-900: #5c0931;
    /* Solid color: solid white-100 */
    --f-base-color-solid-white-100: #ffffff;
    /* Grey 200 - light container background or inner borders */
    --f-base-color-solid-grey-200: #dbdee8;
    /* Grey 300 - suitable for disabled icons or muted text */
    --f-base-color-solid-grey-300: #9dacbc;
    /* Grey 400 - used for default text, lines, or placeholders */
    --f-base-color-solid-grey-400: #9099a2;
    /* Grey 500 - middle grey tone */
    --f-base-color-solid-grey-500: #6e7780;
    /* Grey 600 - used for muted UI text or primary icons */
    --f-base-color-solid-grey-600: #4a525d;
    /* Grey 700 - used for background surfaces */
    --f-base-color-solid-grey-700: #363e47;
    /* Grey 900 - darkest grey, used for primary text */
    --f-base-color-solid-grey-900: #1f212b;
    /* Grey 100 - lightest grey, used for background surfaces. This is the NEW correct value for grey.100. Once production code is migrated from the old grey-100 (#1F212B) to grey.900, this token will replace the deprecated grey.100 entry. */
    --f-base-color-solid-grey-100-new: #f2f3fa;
    /* Grey 600 with 50% alpha transparency */
    --f-base-color-solid-grey-600-50a: #4a525d80;
    /* Grey 900 with 0% alpha transparency */
    --f-base-color-solid-grey-900-0a: #1f212b00;
    /* Grey 900 with 8% alpha transparency */
    --f-base-color-solid-grey-900-08a: #1f212b14;
    /* Grey 900 with 50% alpha transparency */
    --f-base-color-solid-grey-900-50a: #1f212b80;
    /* Grey 900 with 70% alpha transparency */
    --f-base-color-solid-grey-900-70a: #1f212bb2;
    /* Positive indicator colour (e.g. Confirmed status) */
    --f-base-color-solid-green-100: #ecfff5;
    /* Positive indicator colour (e.g. Confirmed status) */
    --f-base-color-solid-green-200: #34db80;
    /* Darker green for success icons or badges */
    --f-base-color-solid-green-900: #328256;
    /* Used for alerts or delayed flight status indicators */
    --f-base-color-solid-yellow-100: #fcc500;
    /* Stronger yellow for emphasis or warnings */
    --f-base-color-solid-yellow-900: #7a5e00;
    /* Light red for warnings or error backgrounds */
    --f-base-color-solid-red-100: #d95757;
    /* Strong red for errors or negative statuses */
    --f-base-color-solid-red-900: #cc4726;
    /* Light burgundy for loyalty backgrounds */
    --f-base-color-solid-loyalty-burgundy-100: #fc5f77;
    /* Default burgundy for loyalty elements */
    --f-base-color-solid-loyalty-burgundy-400: #780044;
    /* Dark burgundy for loyalty accents */
    --f-base-color-solid-loyalty-burgundy-700: #64003a;
    /* Darkest burgundy for loyalty emphasis */
    --f-base-color-solid-loyalty-burgundy-900: #3c0026;
    /* Light silver for loyalty backgrounds */
    --f-base-color-solid-loyalty-silver-100: #f0f0f0;
    /* Default silver for loyalty elements */
    --f-base-color-solid-loyalty-silver-400: #787878;
    /* Light gold for loyalty backgrounds */
    --f-base-color-solid-loyalty-gold-100: #ffeed8;
    /* Default gold for loyalty elements */
    --f-base-color-solid-loyalty-gold-400: #8c5617;
    /* Darkest gold for loyalty emphasis */
    --f-base-color-solid-loyalty-gold-900: #644316;
    /* Light platinum for loyalty backgrounds */
    --f-base-color-solid-loyalty-platinum-100: #acacac;
    /* Darkest platinum for loyalty emphasis (same as 400) */
    --f-base-color-solid-loyalty-platinum-900: #1a1a1a;
    /* Muted violet tone for subtle backgrounds */
    --f-base-color-solid-violet-100: #7f6caf;
    /* Mid-violet for illustrations or secondary accents */
    --f-base-color-solid-violet-200: #6661cf;
    /* Strong violet for primary accents and highlights */
    --f-base-color-solid-violet-900: #3a35af;

    /* --- Color (Gradient) --- */

    /* White gradient from white to light grey */
    --f-base-color-gradient-white: linear-gradient(
        180deg,
        var(--f-base-color-solid-white) 0,
        var(--f-base-color-solid-grey-10) 100%
    );
    /* White gradient surface variant */
    --f-base-color-gradient-white-surface: linear-gradient(
        180deg,
        var(--f-base-color-solid-white) 0,
        var(--f-base-color-solid-grey-10) 40%
    );
    /* Grey gradient from dark grey to silver */
    --f-base-color-gradient-grey: linear-gradient(
        180deg,
        var(--f-base-color-solid-grey-100) 0,
        var(--f-base-color-solid-silver-100) 100%
    );
    /* Violet gradient */
    --f-base-color-gradient-violet: linear-gradient(
        270deg,
        var(--f-base-color-solid-violet-100) 0,
        #93caf3 100%
    );
    /* Loyalty burgundy gradient */
    --f-base-color-gradient-loyalty-burgundy: radial-gradient(
        88.9% 88.9% at 103.13% 102.82%,
        #fb5f77 0%,
        #c93b63 8%,
        #a62156 15%,
        #8c0f4c 28%,
        #7d0346 37%,
        #67003b 64%,
        #64003a 68%,
        #3c0026 100%
    );
    /* Loyalty silver gradient */
    --f-base-color-gradient-loyalty-silver: linear-gradient(
        180deg,
        var(--f-base-color-solid-silver-100) 0,
        var(--f-base-color-solid-silver-50) 34%,
        var(--f-base-color-solid-silver-100) 100%
    );
    /* Loyalty gold gradient */
    --f-base-color-gradient-loyalty-gold: linear-gradient(
        180deg,
        var(--f-base-color-solid-gold-100) 0,
        var(--f-base-color-solid-gold-50) 34%,
        var(--f-base-color-solid-gold-100) 100%
    );
    /* Loyalty platinum gradient */
    --f-base-color-gradient-loyalty-platinum: linear-gradient(
        180deg,
        var(--f-base-color-solid-platinum-100) 0,
        var(--f-base-color-solid-platinum-50) 34%,
        var(--f-base-color-solid-platinum-100) 100%
    );
    /* Vertical overlay gradient (from Kigen) */
    --f-base-color-gradient-overlay-vertical: linear-gradient(
        180deg,
        rgba(31, 33, 43, 0) 0,
        rgba(31, 33, 43, 0.7) 100%
    );
    /* Horizontal overlay gradient (from Kigen) */
    --f-base-color-gradient-overlay-horizontal: linear-gradient(
        90deg,
        rgba(31, 33, 43, 0) 0,
        rgba(31, 33, 43, 0.7) 100%
    );

    /* --- Duration --- */

    /* Animation duration: 120ms */
    --f-base-duration-120: 120ms;
    /* Animation duration: 240ms */
    --f-base-duration-240: 240ms;
    /* Animation duration: 480ms */
    --f-base-duration-480: 480ms;
    /* Animation duration: 720ms */
    --f-base-duration-720: 720ms;
    /* Animation duration: 960ms */
    --f-base-duration-960: 960ms;
    /* Animation duration: 1200ms */
    --f-base-duration-1200: 1200ms;

    /* --- Motion (Duration) --- */

    /* Motion duration: 240ms */
    --f-base-motion-duration-240: 0.24s;
    /* Motion duration: 480ms */
    --f-base-motion-duration-480: 0.48s;
    /* Motion duration: 960ms */
    --f-base-motion-duration-960: 0.96s;
    /* Motion duration: 1200ms */
    --f-base-motion-duration-1200: 1.2s;

    /* --- Motion (Easing) --- */

    /* Linear easing function */
    --f-base-motion-easing-linear: linear;
    /* Ease-in easing function (entry) */
    --f-base-motion-easing-ease-in: cubic-bezier(0.4, 0, 0, 1);
    /* Ease-out easing function (exit) */
    --f-base-motion-easing-ease-out: cubic-bezier(0, 0, 0.08, 1);
    /* Ease-in-out easing function (default) */
    --f-base-motion-easing-ease-in-out: cubic-bezier(0.4, 0, 0.08, 1);

    /* --- Motion (Transform Origin) --- */

    /* Transform origin: center */
    --f-base-motion-transform-origin-center: center;
    /* Transform origin: top */
    --f-base-motion-transform-origin-top: top;
    /* Transform origin: bottom */
    --f-base-motion-transform-origin-bottom: bottom;
    /* Transform origin: left */
    --f-base-motion-transform-origin-left: left;
    /* Transform origin: right */
    --f-base-motion-transform-origin-right: right;

    /* --- Motion (Scale) --- */

    /* Motion scale: small (0.8) */
    --f-base-motion-scale-small: 0.8;
    /* Motion scale: medium (1.2) */
    --f-base-motion-scale-medium: 1.2;
    /* Motion scale: large (1.5) */
    --f-base-motion-scale-large: 1.5;

    /* --- Motion (Opacity) --- */

    /* Motion opacity: low (0.5) */
    --f-base-motion-opacity-low: 0.5;
    /* Motion opacity: medium (0.8) */
    --f-base-motion-opacity-medium: 0.8;
    /* Motion opacity: high (1.0) */
    --f-base-motion-opacity-high: 1;

    /* --- Space --- */

    /* Spacing unit 0: 0px */
    --f-base-space-0: 0px;
    /* Spacing unit 1: 4px */
    --f-base-space-1: 4px;
    /* Spacing unit 2: 8px */
    --f-base-space-2: 8px;
    /* Spacing unit 3: 12px */
    --f-base-space-3: 12px;
    /* Spacing unit 4: 16px */
    --f-base-space-4: 16px;
    /* Spacing unit 5: 20px */
    --f-base-space-5: 20px;
    /* Spacing unit 6: 24px */
    --f-base-space-6: 24px;
    /* Spacing unit 8: 32px */
    --f-base-space-8: 32px;
    /* Spacing unit 10: 40px */
    --f-base-space-10: 40px;
    /* Spacing unit 12: 48px */
    --f-base-space-12: 48px;
    /* Spacing unit 14: 56px */
    --f-base-space-14: 56px;
    /* Spacing unit 16: 64px */
    --f-base-space-16: 64px;
    /* Spacing unit 18: 72px */
    --f-base-space-18: 72px;
    /* Spacing unit 20: 80px */
    --f-base-space-20: 80px;
    /* Spacing unit 24: 96px */
    --f-base-space-24: 96px;
    /* Spacing unit 32: 128px */
    --f-base-space-32: 128px;
    /* Spacing unit 36: 144px */
    --f-base-space-36: 144px;
    /* Spacing unit 40: 144px */
    --f-base-space-40: 144px;
    /* Spacing unit 48: 192px */
    --f-base-space-48: 192px;
    /* Spacing unit 8n: -32px */
    --f-base-space-8n: -32px;
    /* Spacing unit 6n: -24px */
    --f-base-space-6n: -24px;
    /* Spacing unit 4n: -16px */
    --f-base-space-4n: -16px;
    /* Spacing unit 3n: -12px */
    --f-base-space-3n: -12px;
    /* Spacing unit 2n: -8px */
    --f-base-space-2n: -8px;
    /* Spacing unit 1n: -4px */
    --f-base-space-1n: -4px;

    /* --- Size --- */

    /* Size unit 0: 0px */
    --f-base-size-0: 0px;
    /* Size unit 1: 4px */
    --f-base-size-1: 4px;
    /* Size unit 2: 8px */
    --f-base-size-2: 8px;
    /* Size unit 3: 12px */
    --f-base-size-3: 12px;
    /* Size unit 4: 16px */
    --f-base-size-4: 16px;
    /* Size unit 5: 20px */
    --f-base-size-5: 20px;
    /* Size unit 6: 24px */
    --f-base-size-6: 24px;
    /* Size unit 8: 32px */
    --f-base-size-8: 32px;
    /* Size unit 10: 40px */
    --f-base-size-10: 40px;
    /* Size unit 12: 48px */
    --f-base-size-12: 48px;
    /* Size unit 14: 56px */
    --f-base-size-14: 56px;
    /* Size unit 16: 64px */
    --f-base-size-16: 64px;
    /* Size unit 18: 72px */
    --f-base-size-18: 72px;
    /* Size unit 20: 80px */
    --f-base-size-20: 80px;
    /* Size unit 24: 96px */
    --f-base-size-24: 96px;
    /* Size unit 32: 128px */
    --f-base-size-32: 128px;
    /* Size unit 36: 144px */
    --f-base-size-36: 144px;
    /* Size unit 40: 144px */
    --f-base-size-40: 144px;
    /* Size unit 48: 192px */
    --f-base-size-48: 192px;

    /* --- Opacity --- */

    /* Opacity level 0: 0 */
    --f-base-opacity-0: 0;
    /* Opacity level 10: 0.1 */
    --f-base-opacity-10: 0.1;
    /* Opacity level 20: 0.2 */
    --f-base-opacity-20: 0.2;
    /* Opacity level 30: 0.3 */
    --f-base-opacity-30: 0.3;
    /* Opacity level 40: 0.4 */
    --f-base-opacity-40: 0.4;
    /* Opacity level 50: 0.5 */
    --f-base-opacity-50: 0.5;
    /* Opacity level 60: 0.6 */
    --f-base-opacity-60: 0.6;
    /* Opacity level 70: 0.7 */
    --f-base-opacity-70: 0.7;
    /* Opacity level 80: 0.8 */
    --f-base-opacity-80: 0.8;
    /* Opacity level 90: 0.9 */
    --f-base-opacity-90: 0.9;
    /* Opacity level 100: 1 */
    --f-base-opacity-100: 1;

    /* --- Radius --- */

    /* Design token for base.radius.none */
    --f-base-radius-none: 0px;
    /* Design token for base.radius.sm */
    --f-base-radius-sm: 8px;
    /* Design token for base.radius.md */
    --f-base-radius-md: 12px;
    /* Design token for base.radius.lg */
    --f-base-radius-lg: 16px;
    /* Design token for base.radius.xl */
    --f-base-radius-xl: 20px;
    /* Design token for base.radius.full */
    --f-base-radius-full: 64px;

    /* --- Typography (Family) --- */

    /* Font family for primary */
    --f-base-type-family-primary: 'Jotia', 'Verdana', 'Geneva', sans-serif;
    /* Font family for secondary */
    --f-base-type-family-secondary: 'Graphik', 'Graphik Web', 'Arial',
        sans-serif;
    /* Font family for primary */
    --f-base-type-family-bg-primary: 'Noto Sans', 'Jotia', sans-serif;
    /* Font family for secondary */
    --f-base-type-family-bg-secondary: 'Graphik Web', 'Verdana', sans-serif;
    /* Font family for primary */
    --f-base-type-family-cs-primary: 'Noto Sans', 'Jotia', sans-serif;
    /* Font family for secondary */
    --f-base-type-family-cs-secondary: 'Graphik Web', 'Verdana', sans-serif;
    /* Font family for primary */
    --f-base-type-family-ro-primary: 'Noto Sans', 'Jotia', sans-serif;
    /* Font family for secondary */
    --f-base-type-family-ro-secondary: 'Graphik Web', 'Verdana', sans-serif;
    /* Font family for primary */
    --f-base-type-family-ru-primary: 'Noto Sans', 'Jotia', sans-serif;
    /* Font family for secondary */
    --f-base-type-family-ru-secondary: 'Graphik Web', 'Verdana', sans-serif;
    /* Font family for primary */
    --f-base-type-family-sr-primary: 'Noto Sans', 'Jotia', sans-serif;
    /* Font family for secondary */
    --f-base-type-family-sr-secondary: 'Graphik Web', 'Verdana', sans-serif;
    /* Font family for primary */
    --f-base-type-family-uk-primary: 'Noto Sans', 'Jotia', sans-serif;
    /* Font family for secondary */
    --f-base-type-family-uk-secondary: 'Graphik Web', 'Verdana', sans-serif;

    /* --- Typography (Weight) --- */

    /* Font weight for thin */
    --f-base-type-weight-thin: 100;
    /* Font weight for light */
    --f-base-type-weight-light: 300;
    /* Font weight for regular */
    --f-base-type-weight-regular: 400;
    /* Font weight for medium */
    --f-base-type-weight-medium: 500;

    /* --- Typography (Line Height) --- */

    /* Line height 1: 16px */
    --f-base-type-line-height-1: 16px;
    /* Line height 2: 20px */
    --f-base-type-line-height-2: 20px;
    /* Line height 3: 24px */
    --f-base-type-line-height-3: 24px;
    /* Line height 4: 24px */
    --f-base-type-line-height-4: 24px;
    /* Line height 5: 32px */
    --f-base-type-line-height-5: 32px;
    /* Line height 6: 36px */
    --f-base-type-line-height-6: 36px;
    /* Line height 7: 48px */
    --f-base-type-line-height-7: 48px;
    /* Line height 8: 56px */
    --f-base-type-line-height-8: 56px;
    /* Line height 9: 64px */
    --f-base-type-line-height-9: 64px;
    /* Line height 10: 72px */
    --f-base-type-line-height-10: 72px;
    /* Line height factor: 1.2 */
    --f-base-type-line-height-factor: 1.2px;

    /* --- Typography (Scale) --- */

    /* Font size scale 1: 12px */
    --f-base-type-scale-1: 12px;
    /* Font size scale 2: 14px */
    --f-base-type-scale-2: 14px;
    /* Font size scale 3: 16px */
    --f-base-type-scale-3: 16px;
    /* Font size scale 4: 18px */
    --f-base-type-scale-4: 18px;
    /* Font size scale 5: 24px */
    --f-base-type-scale-5: 24px;
    /* Font size scale 6: 28px */
    --f-base-type-scale-6: 28px;
    /* Font size scale 7: 32px */
    --f-base-type-scale-7: 32px;
    /* Font size scale 8: 36px */
    --f-base-type-scale-8: 36px;
    /* Font size scale 9: 48px */
    --f-base-type-scale-9: 48px;
    /* Font size scale 10: 56px */
    --f-base-type-scale-10: 56px;
    /* Font size scale 11: 64px */
    --f-base-type-scale-11: 64px;

    /* --- Shadow --- */

    /* No shadow - no elevation */
    --f-base-shadow-0: 0 0 0 0 var(--f-base-color-solid-grey-900-0a);
    /* Medium shadow - subtle elevation (uses token references) */
    --f-base-shadow-1: 0 2px var(--f-base-blur-1)
        var(--f-brand-color-shadow-default);
    /* Large shadow - prominent elevation (uses token references) */
    --f-base-shadow-2: 0 var(--f-base-space-2) var(--f-base-blur-2)
        var(--f-brand-color-shadow-default);
    /* Medium shadow negative - upward shadow (uses token references) */
    --f-base-shadow-1n: 0 -2px var(--f-base-blur-1) var(--f-brand-color-shadow-default);
}

:lang(ar) {
    --f-base-type-family-primary: 'Almarai', 'Noto Arabic', 'Arial', sans-serif;
    --f-base-type-family-secondary: 'Almarai', 'Noto Arabic', 'Arial',
        sans-serif;
}

:lang(bg),
:lang(cs),
:lang(ro),
:lang(ru),
:lang(sr),
:lang(uk) {
    --f-base-type-family-primary: 'Noto Sans', 'Jotia', sans-serif;
    --f-base-type-family-secondary: 'Graphik Web', 'Verdana', sans-serif;
}

:lang(tr) {
    --f-base-type-family-primary: 'Noto Sans Turk', 'Verdana', sans-serif;
    --f-base-type-family-secondary: 'Graphik Web', 'Verdana', sans-serif;
}

:lang(vi) {
    --f-base-type-family-primary: 'Noto Sans Viet', 'Verdana', sans-serif;
    --f-base-type-family-secondary: 'Graphik Web', 'Verdana', sans-serif;
}
:root {
    /* ============================================
   * BRAND TOKENS
   * ============================================
   * Semantic design tokens that reference base tokens.
   * These tokens provide meaning and context for design decisions.
   *
   * Categories:
   * 1. Blur
   * 2. Border
   * 3. Color
   * 4. Opacity
   * 5. Radius
   * 6. Shadow
   * 7. Size
   * 8. Space
   * 9. Typography
   * ============================================ */

    /* Brand blur style: subtle */
    --f-brand-blur-subtle: var(--f-base-blur-1);
    /* Brand blur style: medium */
    --f-brand-blur-medium: var(--f-base-blur-2);
    /* Brand border size: none */
    --f-brand-border-size-none: var(--f-base-border-size-0);
    /* Brand border size: default */
    --f-brand-border-size-default: var(--f-base-border-size-1);
    /* Brand border size: focused */
    --f-brand-border-size-focused: var(--f-base-border-size-2);
    /* Brand radius: none */
    --f-brand-radius-none: var(--f-base-radius-none);
    /* Brand radius: base */
    --f-brand-radius-base: var(--f-base-radius-sm);
    /* Brand radius: small */
    --f-brand-radius-small: var(--f-base-radius-md);
    /* Brand radius: inner */
    --f-brand-radius-inner: var(--f-base-radius-lg);
    /* Brand radius: outer */
    --f-brand-radius-outer: var(--f-base-radius-xl);
    /* Brand radius: rounded */
    --f-brand-radius-rounded: var(--f-base-radius-full);
    /* Primary brand burgundy colour, used for interactive elements */
    --f-brand-color-primary: var(--f-base-color-solid-burgundy-400);
    /* Primary brand burgundy colour, used for interactive elements hover state */
    --f-brand-color-primary-hover: var(--f-base-color-solid-burgundy-900);
    /* Accent color for accent context */
    --f-brand-color-accent: var(--f-base-color-solid-violet-900);
    /* Accent-muted color for accent-muted context */
    --f-brand-color-accent-muted: var(--f-base-color-solid-violet-100);
    /* Overlay color for overlay context */
    --f-brand-color-overlay: var(--f-base-color-solid-grey-900-70a);
    /* Background color for default context */
    --f-brand-color-background-default: var(--f-base-color-solid-grey-100-new);
    /* Background color for light context */
    --f-brand-color-background-light: var(--f-base-color-solid-white-100);
    /* Background color for disabled context */
    --f-brand-color-background-disabled: var(--f-base-color-solid-grey-200);
    /* Background color for overlay context */
    --f-brand-color-background-overlay: var(--f-base-color-solid-grey-900);
    /* Completely transparent background using grey.900 with 0% alpha */
    --f-brand-color-background-transparent: var(
        --f-base-color-solid-grey-900-0a
    );
    /* Background color for dark context */
    --f-brand-color-background-dark: var(--f-base-color-solid-grey-900);
    /* Background color for dark-0A context */
    --f-brand-color-background-dark-0a: var(--f-base-color-solid-grey-900-0a);
    /* Background color for dark-50A context */
    --f-brand-color-background-dark-50a: var(--f-base-color-solid-grey-900-50a);
    /* Background color for dark-70A context */
    --f-brand-color-background-dark-70a: var(--f-base-color-solid-grey-900-70a);
    /* Background color for none context */
    --f-brand-color-background-none: var(--f-base-color-solid-grey-900-0a);
    /* Background color for primary context */
    --f-brand-color-background-primary: var(--f-base-color-solid-burgundy-400);
    /* Background color for primary-hover context */
    --f-brand-color-background-primary-hover: var(
        --f-base-color-solid-burgundy-900
    );
    /* Background color for blur context */
    --f-brand-color-background-blur: var(--f-base-color-solid-grey-600-50a);
    /* Background color for muted context */
    --f-brand-color-background-muted: var(--f-base-color-solid-grey-600);
    /* Loyalty burgundy background color */
    --f-brand-color-background-loyalty-burgundy: var(
        --f-base-color-solid-loyalty-burgundy-400
    );
    /* Loyalty silver background color */
    --f-brand-color-background-loyalty-silver: var(
        --f-base-color-solid-loyalty-silver-400
    );
    /* Loyalty gold background color */
    --f-brand-color-background-loyalty-gold: var(
        --f-base-color-solid-loyalty-gold-400
    );
    /* Loyalty platinum background color */
    --f-brand-color-background-loyalty-platinum: var(
        --f-base-color-solid-loyalty-platinum-900
    );
    /* Background color for accent context */
    --f-brand-color-background-accent: var(--f-base-color-solid-violet-900);
    /* Background color for accent-muted context */
    --f-brand-color-background-accent-muted: var(
        --f-base-color-solid-violet-100
    );
    /* Background color for accent-disabled context */
    --f-brand-color-background-accent-disabled: var(
        --f-base-color-solid-grey-400
    );
    /* Background color for success context */
    --f-brand-color-background-success: var(--f-base-color-solid-green-900);
    /* Background color for success context */
    --f-brand-color-background-success-accent: var(
        --f-base-color-solid-green-100
    );
    /* Background color for error context */
    --f-brand-color-background-error: var(--f-base-color-solid-red-100);
    /* Background color for warning context */
    --f-brand-color-background-warning: var(--f-base-color-solid-yellow-100);
    /* Status color for error context */
    --f-brand-color-status-error: var(--f-base-color-solid-red-900);
    /* Status color for success context */
    --f-brand-color-status-success: var(--f-base-color-solid-green-900);
    /* Status color for warning context */
    --f-brand-color-status-warning: var(--f-base-color-solid-yellow-900);
    /* Border color for inner context */
    --f-brand-color-border-inner: var(--f-base-color-solid-grey-100-new);
    /* Border color for default context */
    --f-brand-color-border-default: var(--f-base-color-solid-grey-200);
    /* Border color for muted context */
    --f-brand-color-border-muted: var(--f-base-color-solid-grey-600);
    /* Border color for light context */
    --f-brand-color-border-light: var(--f-base-color-solid-white-100);
    /* Border color for disabled context */
    --f-brand-color-border-disabled: var(--f-base-color-solid-grey-400);
    /* Border color for primary context */
    --f-brand-color-border-primary: var(--f-brand-color-primary);
    /* Border color for primary-hover context */
    --f-brand-color-border-primary-hover: var(--f-brand-color-primary-hover);
    /* Border color for selected context */
    --f-brand-color-border-selected: var(--f-base-color-solid-grey-900);
    /* Border color for hover context */
    --f-brand-color-border-hover: var(--f-base-color-solid-grey-900);
    /* Border color for success context */
    --f-brand-color-border-success: var(--f-base-color-solid-green-200);
    /* Border color for error context */
    --f-brand-color-border-error: var(--f-base-color-solid-red-100);
    /* Border color for warning context */
    --f-brand-color-border-warning: var(--f-base-color-solid-yellow-100);
    /* Border color for accent context */
    --f-brand-color-border-accent: var(--f-brand-color-accent);
    /* Border color for focused context */
    --f-brand-color-border-focused: var(--f-base-color-solid-grey-900);
    /* Flight-status color for confirmed context */
    --f-brand-color-flight-status-confirmed: var(
        --f-base-color-solid-green-200
    );
    /* Flight-status color for cancelled context */
    --f-brand-color-flight-status-cancelled: var(--f-base-color-solid-red-100);
    /* Flight-status color for delayed context */
    --f-brand-color-flight-status-delayed: var(--f-base-color-solid-yellow-100);
    /* Flight-status color for rescheduled context */
    --f-brand-color-flight-status-rescheduled: var(
        --f-base-color-solid-loyalty-silver-100
    );
    /* Tags color for qsuite context */
    --f-brand-color-tags-qsuite: var(--f-brand-color-primary);
    /* Tags color for lowest-fare context */
    --f-brand-color-tags-lowest-fare: var(--f-base-color-solid-green-900);
    /* Tags color for business-class context */
    --f-brand-color-tags-business-class: var(
        --f-base-color-solid-loyalty-gold-400
    );
    /* Tags color for recommended context */
    --f-brand-color-tags-recommended: var(--f-base-color-solid-grey-900);
    /* Text color for default context */
    --f-brand-color-text-default: var(--f-base-color-solid-grey-900);
    /* Text color for primary context */
    --f-brand-color-text-primary: var(--f-brand-color-primary);
    /* Text color for muted context */
    --f-brand-color-text-muted: var(--f-base-color-solid-grey-600);
    /* Text color for disabled context */
    --f-brand-color-text-disabled: var(--f-base-color-solid-grey-400);
    /* Text color for error context */
    --f-brand-color-text-error: var(--f-base-color-solid-red-900);
    /* Text color for light context */
    --f-brand-color-text-light: var(--f-base-color-solid-white-100);
    /* Text color for link context */
    --f-brand-color-text-link: var(--f-base-color-solid-grey-900);
    /* Text color for heading context */
    --f-brand-color-text-heading: var(--f-base-color-solid-grey-900);
    /* Text color for subtle context */
    --f-brand-color-text-subtle: var(--f-base-color-solid-grey-500);
    /* Text color for success context */
    --f-brand-color-text-success: var(--f-base-color-solid-green-900);
    /* Text color for warning context */
    --f-brand-color-text-warning: var(--f-base-color-solid-yellow-900);
    /* Loyalty burgundy text color */
    --f-brand-color-text-loyalty-burgundy: var(
        --f-base-color-solid-loyalty-burgundy-400
    );
    /* Loyalty silver text color */
    --f-brand-color-text-loyalty-silver: var(
        --f-base-color-solid-loyalty-silver-400
    );
    /* Loyalty gold text color */
    --f-brand-color-text-loyalty-gold: var(
        --f-base-color-solid-loyalty-gold-900
    );
    /* Loyalty platinum text color */
    --f-brand-color-text-loyalty-platinum: var(
        --f-base-color-solid-loyalty-platinum-900
    );
    /* Icon color for default context */
    --f-brand-color-icon-default: var(--f-base-color-solid-grey-900);
    /* Icon color for primary context */
    --f-brand-color-icon-primary: var(--f-brand-color-primary);
    /* Icon color for muted context */
    --f-brand-color-icon-muted: var(--f-base-color-solid-grey-600);
    /* Icon color for disabled context */
    --f-brand-color-icon-disabled: var(--f-base-color-solid-grey-400);
    /* Icon color for error context */
    --f-brand-color-icon-error: var(--f-base-color-solid-red-900);
    /* Icon color for light context */
    --f-brand-color-icon-light: var(--f-base-color-solid-white-100);
    /* Loyalty color for burgundy context */
    --f-brand-color-icon-loyalty-burgundy: var(--f-brand-color-primary);
    /* Loyalty color for silver context */
    --f-brand-color-icon-loyalty-silver: var(
        --f-base-color-solid-loyalty-silver-400
    );
    /* Loyalty color for gold context */
    --f-brand-color-icon-loyalty-gold: var(
        --f-base-color-solid-loyalty-gold-400
    );
    /* Loyalty color for platinum context */
    --f-brand-color-icon-loyalty-platinum: var(
        --f-base-color-solid-loyalty-platinum-900
    );
    /* Divider color for default context */
    --f-brand-color-divider-default: var(--f-base-color-solid-grey-200);
    /* Divider color for inner context */
    --f-brand-color-divider-inner: var(--f-base-color-solid-grey-100-new);
    /* Shadow color for default context */
    --f-brand-color-shadow-default: var(--f-base-color-solid-grey-900-08a);
    /* Typography token for font-family */
    --f-brand-type-title-1-font-family: var(--f-base-type-family-primary);
    /* Typography token for font-weight */
    --f-brand-type-title-1-font-weight: var(--f-base-type-weight-thin);
    /* Typography token for font-size */
    --f-brand-type-title-1-font-size: var(--f-base-type-scale-8);
    /* Typography token for line-height */
    --f-brand-type-title-1-line-height: var(--f-base-type-line-height-7);
    /* Typography token for font-family */
    --f-brand-type-title-2-font-family: var(--f-base-type-family-primary);
    /* Typography token for font-weight */
    --f-brand-type-title-2-font-weight: var(--f-base-type-weight-thin);
    /* Typography token for font-size */
    --f-brand-type-title-2-font-size: var(--f-base-type-scale-6);
    /* Typography token for line-height */
    --f-brand-type-title-2-line-height: var(--f-base-type-line-height-6);
    /* Typography token for font-family */
    --f-brand-type-title-3-font-family: var(--f-base-type-family-primary);
    /* Typography token for font-weight */
    --f-brand-type-title-3-font-weight: var(--f-base-type-weight-light);
    /* Typography token for font-size */
    --f-brand-type-title-3-font-size: var(--f-base-type-scale-6);
    /* Typography token for line-height */
    --f-brand-type-title-3-line-height: var(--f-base-type-line-height-6);
    /* Typography token for font-family */
    --f-brand-type-title-4-font-family: var(--f-base-type-family-primary);
    /* Typography token for font-weight */
    --f-brand-type-title-4-font-weight: var(--f-base-type-weight-thin);
    /* Typography token for font-size */
    --f-brand-type-title-4-font-size: var(--f-base-type-scale-5);
    /* Typography token for line-height */
    --f-brand-type-title-4-line-height: var(--f-base-type-line-height-5);
    /* Typography token for font-family */
    --f-brand-type-title-5-font-family: var(--f-base-type-family-primary);
    /* Typography token for font-weight */
    --f-brand-type-title-5-font-weight: var(--f-base-type-weight-light);
    /* Typography token for font-size */
    --f-brand-type-title-5-font-size: var(--f-base-type-scale-5);
    /* Typography token for line-height */
    --f-brand-type-title-5-line-height: var(--f-base-type-line-height-5);
    /* Typography token for font-family */
    --f-brand-type-page-title-font-family: var(--f-base-type-family-primary);
    /* Typography token for font-weight */
    --f-brand-type-page-title-font-weight: var(--f-base-type-weight-light);
    /* Typography token for font-size */
    --f-brand-type-page-title-font-size: var(--f-base-type-scale-9);
    /* Typography token for line-height */
    --f-brand-type-page-title-line-height: var(--f-base-type-line-height-8);
    /* Typography token for font-family */
    --f-brand-type-page-title-thin-font-family: var(
        --f-base-type-family-primary
    );
    /* Typography token for font-weight */
    --f-brand-type-page-title-thin-font-weight: var(--f-base-type-weight-thin);
    /* Typography token for font-size */
    --f-brand-type-page-title-thin-font-size: var(--f-base-type-scale-9);
    /* Typography token for line-height */
    --f-brand-type-page-title-thin-line-height: var(
        --f-base-type-line-height-8
    );
    /* Typography token for font-family */
    --f-brand-type-headline-font-family: var(--f-base-type-family-secondary);
    /* Typography token for font-weight */
    --f-brand-type-headline-font-weight: var(--f-base-type-weight-regular);
    /* Typography token for font-size */
    --f-brand-type-headline-font-size: var(--f-base-type-scale-4);
    /* Typography token for line-height */
    --f-brand-type-headline-line-height: var(--f-base-type-line-height-4);
    /* Typography token for font-family */
    --f-brand-type-headline-medium-font-family: var(
        --f-base-type-family-secondary
    );
    /* Typography token for font-weight */
    --f-brand-type-headline-medium-font-weight: var(
        --f-base-type-weight-medium
    );
    /* Typography token for font-size */
    --f-brand-type-headline-medium-font-size: var(--f-base-type-scale-4);
    /* Typography token for line-height */
    --f-brand-type-headline-medium-line-height: var(
        --f-base-type-line-height-4
    );
    /* Typography token for font-family */
    --f-brand-type-body-font-family: var(--f-base-type-family-secondary);
    /* Typography token for font-weight */
    --f-brand-type-body-font-weight: var(--f-base-type-weight-regular);
    /* Typography token for font-size */
    --f-brand-type-body-font-size: var(--f-base-type-scale-3);
    /* Typography token for line-height */
    --f-brand-type-body-line-height: var(--f-base-type-line-height-3);
    /* Typography token for font-family */
    --f-brand-type-body-medium-font-family: var(--f-base-type-family-secondary);
    /* Typography token for font-weight */
    --f-brand-type-body-medium-font-weight: var(--f-base-type-weight-medium);
    /* Typography token for font-size */
    --f-brand-type-body-medium-font-size: var(--f-base-type-scale-3);
    /* Typography token for line-height */
    --f-brand-type-body-medium-line-height: var(--f-base-type-line-height-3);
    /* Typography token for font-family */
    --f-brand-type-subheading-font-family: var(--f-base-type-family-secondary);
    /* Typography token for font-weight */
    --f-brand-type-subheading-font-weight: var(--f-base-type-weight-regular);
    /* Typography token for font-size */
    --f-brand-type-subheading-font-size: var(--f-base-type-scale-2);
    /* Typography token for line-height */
    --f-brand-type-subheading-line-height: var(--f-base-type-line-height-2);
    /* Typography token for font-family */
    --f-brand-type-subheading-medium-font-family: var(
        --f-base-type-family-secondary
    );
    /* Typography token for font-weight */
    --f-brand-type-subheading-medium-font-weight: var(
        --f-base-type-weight-medium
    );
    /* Typography token for font-size */
    --f-brand-type-subheading-medium-font-size: var(--f-base-type-scale-2);
    /* Typography token for line-height */
    --f-brand-type-subheading-medium-line-height: var(
        --f-base-type-line-height-2
    );
    /* Typography token for font-family */
    --f-brand-type-caption-font-family: var(--f-base-type-family-secondary);
    /* Typography token for font-weight */
    --f-brand-type-caption-font-weight: var(--f-base-type-weight-regular);
    /* Typography token for font-size */
    --f-brand-type-caption-font-size: var(--f-base-type-scale-1);
    /* Typography token for line-height */
    --f-brand-type-caption-line-height: var(--f-base-type-line-height-1);
    /* Typography token for font-family */
    --f-brand-type-caption-medium-font-family: var(
        --f-base-type-family-secondary
    );
    /* Typography token for font-weight */
    --f-brand-type-caption-medium-font-weight: var(--f-base-type-weight-medium);
    /* Typography token for font-size */
    --f-brand-type-caption-medium-font-size: var(--f-base-type-scale-1);
    /* Typography token for line-height */
    --f-brand-type-caption-medium-line-height: var(--f-base-type-line-height-1);
    /* Typography token for font-family */
    --f-brand-type-link-underline-font-family: var(
        --f-base-type-family-secondary
    );
    /* Typography token for font-weight */
    --f-brand-type-link-underline-font-weight: var(--f-base-type-weight-medium);
    /* Typography token for font-size */
    --f-brand-type-link-underline-font-size: var(--f-base-type-scale-3);
    /* Typography token for line-height */
    --f-brand-type-link-underline-line-height: var(--f-base-type-line-height-3);
    /* Typography token for font-family */
    --f-brand-type-link-underline-small-font-family: var(
        --f-base-type-family-secondary
    );
    /* Typography token for font-weight */
    --f-brand-type-link-underline-small-font-weight: var(
        --f-base-type-weight-medium
    );
    /* Typography token for font-size */
    --f-brand-type-link-underline-small-font-size: var(--f-base-type-scale-2);
    /* Typography token for line-height */
    --f-brand-type-link-underline-small-line-height: var(
        --f-base-type-line-height-2
    );
    /* Typography token for font-family */
    --f-brand-type-link-no-underline-font-family: var(
        --f-base-type-family-secondary
    );
    /* Typography token for font-weight */
    --f-brand-type-link-no-underline-font-weight: var(
        --f-base-type-weight-medium
    );
    /* Typography token for font-size */
    --f-brand-type-link-no-underline-font-size: var(--f-base-type-scale-3);
    /* Typography token for line-height */
    --f-brand-type-link-no-underline-line-height: var(
        --f-base-type-line-height-3
    );
    /* Typography token for font-family */
    --f-brand-type-link-no-underline-small-font-family: var(
        --f-base-type-family-secondary
    );
    /* Typography token for font-weight */
    --f-brand-type-link-no-underline-small-font-weight: var(
        --f-base-type-weight-medium
    );
    /* Typography token for font-size */
    --f-brand-type-link-no-underline-small-font-size: var(
        --f-base-type-scale-2
    );
    /* Typography token for line-height */
    --f-brand-type-link-no-underline-small-line-height: var(
        --f-base-type-line-height-2
    );
    /* Typography token for font-family */
    --f-brand-type-numeral-1-font-family: var(--f-base-type-family-secondary);
    /* Typography token for font-weight */
    --f-brand-type-numeral-1-font-weight: var(--f-base-type-weight-light);
    /* Typography token for font-size */
    --f-brand-type-numeral-1-font-size: var(--f-base-type-scale-7);
    /* Typography token for line-height */
    --f-brand-type-numeral-1-line-height: var(--f-base-type-line-height-6);
    /* Typography token for font-family */
    --f-brand-type-numeral-2-font-family: var(--f-base-type-family-secondary);
    /* Typography token for font-weight */
    --f-brand-type-numeral-2-font-weight: var(--f-base-type-weight-light);
    /* Typography token for font-size */
    --f-brand-type-numeral-2-font-size: var(--f-base-type-scale-5);
    /* Typography token for line-height */
    --f-brand-type-numeral-2-line-height: var(--f-base-type-line-height-6);
    /* Typography token for font-family */
    --f-brand-type-numeral-3-font-family: var(--f-base-type-family-secondary);
    /* Typography token for font-weight */
    --f-brand-type-numeral-3-font-weight: var(--f-base-type-weight-light);
    /* Typography token for font-size */
    --f-brand-type-numeral-3-font-size: var(--f-base-type-scale-4);
    /* Typography token for line-height */
    --f-brand-type-numeral-3-line-height: var(--f-base-type-line-height-4);
    /* Typography token for font-family */
    --f-brand-type-numeral-4-font-family: var(--f-base-type-family-secondary);
    /* Typography token for font-weight */
    --f-brand-type-numeral-4-font-weight: var(--f-base-type-weight-regular);
    /* Typography token for font-size */
    --f-brand-type-numeral-4-font-size: var(--f-base-type-scale-3);
    /* Typography token for line-height */
    --f-brand-type-numeral-4-line-height: var(--f-base-type-line-height-4);
    /* Typography token for font-family */
    --f-brand-type-numeral-5-font-family: var(--f-base-type-family-secondary);
    /* Typography token for font-weight */
    --f-brand-type-numeral-5-font-weight: var(--f-base-type-weight-regular);
    /* Typography token for font-size */
    --f-brand-type-numeral-5-font-size: var(--f-base-type-scale-2);
    /* Typography token for line-height */
    --f-brand-type-numeral-5-line-height: var(--f-base-type-line-height-2);
    /* Typography token for font-family */
    --f-brand-type-numeral-6-font-family: var(--f-base-type-family-secondary);
    /* Typography token for font-weight */
    --f-brand-type-numeral-6-font-weight: var(--f-base-type-weight-regular);
    /* Typography token for font-size */
    --f-brand-type-numeral-6-font-size: var(--f-base-type-scale-1);
    /* Typography token for line-height */
    --f-brand-type-numeral-6-line-height: var(--f-base-type-line-height-1);
    /* Typography token for font-family */
    --f-brand-type-numerals-font-family: var(--f-base-type-family-secondary);
    /* Typography token for font-weight */
    --f-brand-type-numerals-font-weight: var(--f-base-type-weight-thin);
    /* Typography token for font-size */
    --f-brand-type-numerals-font-size: var(--f-base-type-scale-5);
    /* Typography token for line-height */
    --f-brand-type-numerals-line-height: var(--f-base-type-line-height-5);
    /* Brand spacing: none */
    --f-brand-space-none: var(--f-base-space-0);
    /* Brand spacing: 2xs */
    --f-brand-space-2xs: var(--f-base-space-1);
    /* Brand spacing: xs */
    --f-brand-space-xs: var(--f-base-space-2);
    /* Brand spacing: sm */
    --f-brand-space-sm: var(--f-base-space-3);
    /* Brand spacing: md */
    --f-brand-space-md: var(--f-base-space-4);
    /* Brand spacing: lg */
    --f-brand-space-lg: var(--f-base-space-6);
    /* Brand spacing: xl */
    --f-brand-space-xl: var(--f-base-space-8);
    /* Brand spacing: 2xl */
    --f-brand-space-2xl: var(--f-base-space-10);
    /* Brand spacing: 3xl */
    --f-brand-space-3xl: var(--f-base-space-12);
    /* Brand spacing: 4xl */
    --f-brand-space-4xl: var(--f-base-space-16);
    /* Brand spacing: 5xl */
    --f-brand-space-5xl: var(--f-base-space-18);
    /* Brand spacing: 6xl */
    --f-brand-space-6xl: var(--f-base-space-20);
    /* Brand spacing: 2xs-n */
    --f-brand-space-2xs-n: var(--f-base-space-1n);
    /* Brand spacing: xs-n */
    --f-brand-space-xs-n: var(--f-base-space-2n);
    /* Brand spacing: sm-n */
    --f-brand-space-sm-n: var(--f-base-space-3n);
    /* Brand spacing: md-n */
    --f-brand-space-md-n: var(--f-base-space-4n);
    /* Brand spacing: lg-n */
    --f-brand-space-lg-n: var(--f-base-space-6n);
    /* Brand spacing: xl-n */
    --f-brand-space-xl-n: var(--f-base-space-8n);
    /* Brand motion duration: instant */
    --f-brand-motion-duration-instant: var(--f-base-motion-duration-240);
    /* Brand motion duration: quick */
    --f-brand-motion-duration-quick: var(--f-base-motion-duration-480);
    /* Brand motion duration: gentle */
    --f-brand-motion-duration-gentle: var(--f-base-motion-duration-960);
    /* Brand motion duration: generous */
    --f-brand-motion-duration-generous: var(--f-base-motion-duration-1200);
    /* Brand motion easing: entry (ease-in) */
    --f-brand-motion-easing-entry: var(--f-base-motion-easing-ease-in);
    /* Brand motion easing: exit (ease-out) */
    --f-brand-motion-easing-exit: var(--f-base-motion-easing-ease-out);
    /* Brand motion easing: default (ease-in-out) */
    --f-brand-motion-easing-default: var(--f-base-motion-easing-ease-in-out);
    /* No shadow - no elevation */
    --f-brand-shadow-none: var(--f-base-shadow-0);
    /* Medium shadow - subtle elevation (Y: 2px, Blur: 4px, Spread: 2px) */
    --f-brand-shadow-medium: var(--f-base-shadow-1);
    /* Medium shadow negative - upward shadow (Y: -2px, Blur: 4px, Spread: 0px) */
    --f-brand-shadow-medium-n: var(--f-base-shadow-1n);
    /* Large shadow - prominent elevation (Y: 8px, Blur: 16px, Spread: 0px) */
    --f-brand-shadow-large: var(--f-base-shadow-2);
    /* Brand size token: 1 */
    --f-brand-size-1: var(--f-base-size-1);
    /* Brand size token: 2 */
    --f-brand-size-2: var(--f-base-size-2);
    /* Brand size token: none */
    --f-brand-size-none: var(--f-base-size-0);
    /* Brand size token: 2xs */
    --f-brand-size-2xs: var(--f-base-size-1);
    /* Brand size token: xs */
    --f-brand-size-xs: var(--f-base-size-2);
    /* Brand size token: sm */
    --f-brand-size-sm: var(--f-base-size-3);
    /* Brand size token: md */
    --f-brand-size-md: var(--f-base-size-4);
    /* Brand size token: lg */
    --f-brand-size-lg: var(--f-base-size-6);
    /* Brand size token: xl */
    --f-brand-size-xl: var(--f-base-size-8);
    /* Brand size token: 2xl */
    --f-brand-size-2xl: var(--f-base-size-10);
    /* Brand size token: 3xl */
    --f-brand-size-3xl: var(--f-base-size-12);
    /* Brand size token: 4xl */
    --f-brand-size-4xl: var(--f-base-size-16);
    /* Brand size token: 5xl */
    --f-brand-size-5xl: var(--f-base-size-24);
    /* Brand size token: 6xl */
    --f-brand-size-6xl: var(--f-base-size-32);
    /* Brand size token: 7xl */
    --f-brand-size-7xl: var(--f-base-size-48);
    /* Brand opacity token: disabled */
    --f-brand-opacity-disabled: var(--f-base-opacity-60);
    /* Brand opacity token: overlay */
    --f-brand-opacity-overlay: var(--f-base-opacity-70);
    /* Composite typography token for title-1 */
    --f-brand-type-title-1: var(--f-brand-type-title-1-font-weight)
        var(--f-brand-type-title-1-font-size) /
        var(--f-brand-type-title-1-line-height)
        var(--f-brand-type-title-1-font-family);
    /* Composite typography token for title-2 */
    --f-brand-type-title-2: var(--f-brand-type-title-2-font-weight)
        var(--f-brand-type-title-2-font-size) /
        var(--f-brand-type-title-2-line-height)
        var(--f-brand-type-title-2-font-family);
    /* Composite typography token for title-3 */
    --f-brand-type-title-3: var(--f-brand-type-title-3-font-weight)
        var(--f-brand-type-title-3-font-size) /
        var(--f-brand-type-title-3-line-height)
        var(--f-brand-type-title-3-font-family);
    /* Composite typography token for title-4 */
    --f-brand-type-title-4: var(--f-brand-type-title-4-font-weight)
        var(--f-brand-type-title-4-font-size) /
        var(--f-brand-type-title-4-line-height)
        var(--f-brand-type-title-4-font-family);
    /* Composite typography token for title-5 */
    --f-brand-type-title-5: var(--f-brand-type-title-5-font-weight)
        var(--f-brand-type-title-5-font-size) /
        var(--f-brand-type-title-5-line-height)
        var(--f-brand-type-title-5-font-family);
    /* Largest title style for main page headers and hero sections. Highly visible and impactful */
    --f-brand-type-page-title: var(--f-brand-type-page-title-font-weight)
        var(--f-brand-type-page-title-font-size) /
        var(--f-brand-type-page-title-line-height)
        var(--f-brand-type-page-title-font-family);
    /* Largest title style for main page headers and hero sections. Highly visible and impactful. Thin weight */
    --f-brand-type-page-title-thin: var(
            --f-brand-type-page-title-thin-font-weight
        )
        var(--f-brand-type-page-title-thin-font-size) /
        var(--f-brand-type-page-title-thin-line-height)
        var(--f-brand-type-page-title-thin-font-family);
    /* Regular weight headline for standard section headers */
    --f-brand-type-headline: var(--f-brand-type-headline-font-weight)
        var(--f-brand-type-headline-font-size) /
        var(--f-brand-type-headline-line-height)
        var(--f-brand-type-headline-font-family);
    /* Medium weight headline for emphasized section headers */
    --f-brand-type-headline-medium: var(
            --f-brand-type-headline-medium-font-weight
        )
        var(--f-brand-type-headline-medium-font-size) /
        var(--f-brand-type-headline-medium-line-height)
        var(--f-brand-type-headline-medium-font-family);
    /* Standard body text for main content and paragraphs. */
    --f-brand-type-body: var(--f-brand-type-body-font-weight)
        var(--f-brand-type-body-font-size) /
        var(--f-brand-type-body-line-height)
        var(--f-brand-type-body-font-family);
    /* Medium weight body text for enhanced readability or emphasis within paragraphs. */
    --f-brand-type-body-medium: var(--f-brand-type-body-medium-font-weight)
        var(--f-brand-type-body-medium-font-size) /
        var(--f-brand-type-body-medium-line-height)
        var(--f-brand-type-body-medium-font-family);
    /* Regular weight subheading for standard subsection titles */
    --f-brand-type-subheading: var(--f-brand-type-subheading-font-weight)
        var(--f-brand-type-subheading-font-size) /
        var(--f-brand-type-subheading-line-height)
        var(--f-brand-type-subheading-font-family);
    /* Medium weight subheading for emphasized subsection titles */
    --f-brand-type-subheading-medium: var(
            --f-brand-type-subheading-medium-font-weight
        )
        var(--f-brand-type-subheading-medium-font-size) /
        var(--f-brand-type-subheading-medium-line-height)
        var(--f-brand-type-subheading-medium-font-family);
    /* Medium weight caption for emphasized supplementary text */
    --f-brand-type-caption: var(--f-brand-type-caption-font-weight)
        var(--f-brand-type-caption-font-size) /
        var(--f-brand-type-caption-line-height)
        var(--f-brand-type-caption-font-family);
    /* Regular weight caption for standard supplementary text, footnotes, or image descriptions */
    --f-brand-type-caption-medium: var(
            --f-brand-type-caption-medium-font-weight
        )
        var(--f-brand-type-caption-medium-font-size) /
        var(--f-brand-type-caption-medium-line-height)
        var(--f-brand-type-caption-medium-font-family);
    /* Standard underlined link style for clear interactive elements */
    --f-brand-type-link-underline: var(
            --f-brand-type-link-underline-font-weight
        )
        var(--f-brand-type-link-underline-font-size) /
        var(--f-brand-type-link-underline-line-height)
        var(--f-brand-type-link-underline-font-family);
    /* Smaller underlined link style for less prominent interactive elements */
    --f-brand-type-link-underline-small: var(
            --f-brand-type-link-underline-small-font-weight
        )
        var(--f-brand-type-link-underline-small-font-size) /
        var(--f-brand-type-link-underline-small-line-height)
        var(--f-brand-type-link-underline-small-font-family);
    /* Non-underlined link style for subtle interactive elements */
    --f-brand-type-link-no-underline: var(
            --f-brand-type-link-no-underline-font-weight
        )
        var(--f-brand-type-link-no-underline-font-size) /
        var(--f-brand-type-link-no-underline-line-height)
        var(--f-brand-type-link-no-underline-font-family);
    /* Smaller non-underlined link style for prominent yet subtle interactive elements */
    --f-brand-type-link-no-underline-small: var(
            --f-brand-type-link-no-underline-small-font-weight
        )
        var(--f-brand-type-link-no-underline-small-font-size) /
        var(--f-brand-type-link-no-underline-small-line-height)
        var(--f-brand-type-link-no-underline-small-font-family);
    /* Largest numeral style for high-impact statistical displays or counters */
    --f-brand-type-numeral-1: var(--f-brand-type-numeral-1-font-weight)
        var(--f-brand-type-numeral-1-font-size) /
        var(--f-brand-type-numeral-1-line-height)
        var(--f-brand-type-numeral-1-font-family);
    /* Medium-large numeral style for prominent numerical information */
    --f-brand-type-numeral-2: var(--f-brand-type-numeral-2-font-weight)
        var(--f-brand-type-numeral-2-font-size) /
        var(--f-brand-type-numeral-2-line-height)
        var(--f-brand-type-numeral-2-font-family);
    /* Smaller numeral style for integrated numerical displays within content */
    --f-brand-type-numeral-3: var(--f-brand-type-numeral-3-font-weight)
        var(--f-brand-type-numeral-3-font-size) /
        var(--f-brand-type-numeral-3-line-height)
        var(--f-brand-type-numeral-3-font-family);
    /* Smaller numeral style for integrated numerical displays within content */
    --f-brand-type-numeral-4: var(--f-brand-type-numeral-4-font-weight)
        var(--f-brand-type-numeral-4-font-size) /
        var(--f-brand-type-numeral-4-line-height)
        var(--f-brand-type-numeral-4-font-family);
    /* Smaller numeral style for integrated numerical displays within content */
    --f-brand-type-numeral-5: var(--f-brand-type-numeral-5-font-weight)
        var(--f-brand-type-numeral-5-font-size) /
        var(--f-brand-type-numeral-5-line-height)
        var(--f-brand-type-numeral-5-font-family);
    /* Smallest numeral style for minimal numerical displays within content */
    --f-brand-type-numeral-6: var(--f-brand-type-numeral-6-font-weight)
        var(--f-brand-type-numeral-6-font-size) /
        var(--f-brand-type-numeral-6-line-height)
        var(--f-brand-type-numeral-6-font-family);
    /* Composite typography token for numerals */
    --f-brand-type-numerals: var(--f-brand-type-numerals-font-weight)
        var(--f-brand-type-numerals-font-size) /
        var(--f-brand-type-numerals-line-height)
        var(--f-brand-type-numerals-font-family);

    /* ============================================
   * BUTTON COMPONENT TOKENS
   * ============================================
   * Component-specific design tokens for button components.
   * These tokens reference semantic/brand tokens to maintain consistency.
   * ============================================ */

    /* Button component token: base.border-radius */
    --f-button-base-border-radius: var(--f-brand-border-radius-rounded);
    /* Button component token: base.font-family */
    --f-button-base-font-family: var(--f-brand-type-body-medium-font-family);
    /* Button component token: base.font-size */
    --f-button-base-font-size: var(--f-brand-type-body-medium-font-size);
    /* Button component token: base.font-weight */
    --f-button-base-font-weight: var(--f-brand-type-body-medium-font-weight);
    /* Button component token: base.padding */
    --f-button-base-padding: var(--f-brand-space-md);
    /* Button component token: primary.background */
    --f-button-primary-background: var(--f-brand-color-background-primary);
    /* Button component token: primary.background-hover */
    --f-button-primary-background-hover: var(--f-brand-color-primary-hover);
    /* Button component token: primary.border */
    --f-button-primary-border: var(--f-brand-color-border-primary);
    /* Button component token: primary.border-disabled */
    --f-button-primary-border-disabled: var(--f-brand-color-border-disabled);
    /* Button component token: primary.border-hover */
    --f-button-primary-border-hover: var(--f-brand-color-primary-hover);
    /* Button component token: primary.icon */
    --f-button-primary-icon: var(--f-brand-color-icon-light);
    /* Button component token: primary.text */
    --f-button-primary-text: var(--f-brand-color-text-light);
    /* Button component token: primary.text-disabled */
    --f-button-primary-text-disabled: var(--f-brand-color-text-disabled);
    /* Button component token: primary.text-hover */
    --f-button-primary-text-hover: var(--f-brand-color-text-light);
    /* Button component token: secondary.background */
    --f-button-secondary-background: var(
        --f-brand-color-background-transparent
    );
    /* Button component token: secondary.background-hover */
    --f-button-secondary-background-hover: var(
        --f-brand-color-background-default
    );
    /* Button component token: secondary.border */
    --f-button-secondary-border: var(--f-brand-color-border-primary);
    /* Button component token: secondary.border-disabled */
    --f-button-secondary-border-disabled: var(--f-brand-color-border-disabled);
    /* Button component token: secondary.border-hover */
    --f-button-secondary-border-hover: var(--f-brand-color-border-primary);
    /* Button component token: secondary.icon */
    --f-button-secondary-icon: var(--f-brand-color-icon-primary);
    /* Button component token: secondary.text */
    --f-button-secondary-text: var(--f-brand-color-text-primary);
    /* Button component token: secondary.text-disabled */
    --f-button-secondary-text-disabled: var(--f-brand-color-text-disabled);
    /* Button component token: secondary.text-hover */
    --f-button-secondary-text-hover: var(--f-brand-color-text-primary);
    /* Button component token: type.font-family */
    --f-button-type-font-family: var(--f-brand-type-body-medium-font-family);
    /* Button component token: type.font-size */
    --f-button-type-font-size: var(--f-brand-type-body-medium-font-size);
    /* Button component token: type.font-weight */
    --f-button-type-font-weight: var(--f-brand-type-body-medium-font-weight);
    /* Button component token: type.line-height */
    --f-button-type-line-height: var(--f-brand-type-body-medium-line-height);
    /* Button component token: white-filled.background */
    --f-button-white-filled-background: var(--f-brand-color-background-light);
    /* Button component token: white-filled.background-hover */
    --f-button-white-filled-background-hover: var(
        --f-brand-color-background-primary-hover
    );
    /* Button component token: white-filled.border */
    --f-button-white-filled-border: var(--f-brand-color-border-primary);
    /* Button component token: white-filled.border-disabled */
    --f-button-white-filled-border-disabled: var(
        --f-brand-color-border-disabled
    );
    /* Button component token: white-filled.border-hover */
    --f-button-white-filled-border-hover: var(
        --f-brand-color-border-primary-hover
    );
    /* Button component token: white-filled.icon */
    --f-button-white-filled-icon: var(--f-brand-color-icon-primary);
    /* Button component token: white-filled.text */
    --f-button-white-filled-text: var(--f-brand-color-text-primary);
    /* Button component token: white-filled.text-disabled */
    --f-button-white-filled-text-disabled: var(--f-brand-color-text-disabled);
    /* Button component token: white-filled.text-hover */
    --f-button-white-filled-text-hover: var(--f-brand-color-text-light);
    /* Button component token: white-outlined.background */
    --f-button-white-outlined-background: var(
        --f-brand-color-background-transparent
    );
    /* Button component token: white-outlined.background-hover */
    --f-button-white-outlined-background-hover: var(
        --f-brand-color-background-light
    );
    /* Button component token: white-outlined.border */
    --f-button-white-outlined-border: var(--f-brand-color-border-light);
    /* Button component token: white-outlined.border-disabled */
    --f-button-white-outlined-border-disabled: var(
        --f-brand-color-border-disabled
    );
    /* Button component token: white-outlined.border-hover */
    --f-button-white-outlined-border-hover: var(--f-brand-color-border-primary);
    /* Button component token: white-outlined.icon */
    --f-button-white-outlined-icon: var(--f-brand-color-icon-light);
    /* Button component token: white-outlined.text */
    --f-button-white-outlined-text: var(--f-brand-color-text-light);
    /* Button component token: white-outlined.text-disabled */
    --f-button-white-outlined-text-disabled: var(--f-brand-color-text-disabled);
    /* Button component token: white-outlined.text-hover */
    --f-button-white-outlined-text-hover: var(--f-brand-color-text-primary);
    --f-button-base: var(--f-button-base-font-weight)
        var(--f-button-base-font-size) / var(--f-button-base-font-family);
    --f-button-type: var(--f-button-type-font-weight)
        var(--f-button-type-font-size) / var(--f-button-type-line-height)
        var(--f-button-type-font-family);
    /* Deprecated: Use --f-button-primary-background instead. Kept for backward compatibility. */
    --f-button-primary-background-color: var(
        --f-brand-color-background-primary
    );
    /* Deprecated: Use --f-button-primary-background-hover instead. Kept for backward compatibility. */
    --f-button-primary-background-color-hover: var(
        --f-brand-color-primary-hover
    );
}

/* ============================================
 * DEPRECATED TOKENS
 * ============================================
 * These tokens are deprecated and will be phased out.
 * Please replace them with the new tokens they reference.
 * ============================================ */

:root {
    /* Deprecated: Use base.radius.none instead */
    --f-base-border-radius-none: var(--f-base-radius-none);

    /* Deprecated: Use base.radius.sm instead */
    --f-base-border-radius-tiny: var(--f-base-radius-sm);

    /* Deprecated: Use base.radius.md instead */
    --f-base-border-radius-small: var(--f-base-radius-md);

    /* Deprecated: Use base.radius.lg instead */
    --f-base-border-radius-medium: var(--f-base-radius-lg);

    /* Deprecated: Use base.radius.xl instead */
    --f-base-border-radius-large: var(--f-base-radius-xl);

    /* Deprecated: Use base.radius.full instead */
    --f-base-border-radius-circular: var(--f-base-radius-full);

    /* Deprecated: Use base.color.solid.burgundy.400 instead. Kept for backward compatibility. */
    --f-base-color-solid-burgundy-50: var(--f-base-color-solid-burgundy-400);

    /* Deprecated: Use base.color.solid.burgundy.900 instead. Kept for backward compatibility. */
    --f-base-color-solid-burgundy-100: var(--f-base-color-solid-burgundy-900);

    /* Deprecated: Use base.color.solid.white-100.100 instead */
    --f-base-color-solid-white: var(--f-base-color-solid-white-100);

    /* Deprecated: This token is deprecated. Use base.opacity.70 (0.7) for opacity values. Kept for backward compatibility. */
    --f-base-color-solid-transparency: 75%;

    /* Deprecated: Use base.color.solid.grey.100-new instead. Kept for backward compatibility. Note: The old grey-100 (#1F212B) maps to grey.900, not grey.100-new. */
    --f-base-color-solid-grey-10: var(--f-base-color-solid-grey-100-new);

    /* Deprecated: Use base.color.solid.grey.200 instead. Kept for backward compatibility. */
    --f-base-color-solid-grey-25: var(--f-base-color-solid-grey-200);

    /* Deprecated: Use base.color.solid.grey.300 instead. Kept for backward compatibility. */
    --f-base-color-solid-grey-30: var(--f-base-color-solid-grey-300);

    /* Deprecated: Use base.color.solid.grey.400 instead. Kept for backward compatibility. */
    --f-base-color-solid-grey-50: var(--f-base-color-solid-grey-400);

    /* Deprecated: Use base.color.solid.grey.600 instead. Kept for backward compatibility. */
    --f-base-color-solid-grey-75: var(--f-base-color-solid-grey-600);

    /* DEPRECATED: This token previously had value #1F212B (darkest grey) and was used for text-default, icon-default, borders. The new correct grey.100 is #F2F3FA (lightest grey for backgrounds). This deprecated entry maintains backward compatibility with production code. Migrate to: use base.color.solid.grey.900 for the old text/icon/border color, or base.color.solid.grey-100-new (see below) for the new light background color. */
    --f-base-color-solid-grey-100: var(--f-base-color-solid-grey-900);

    /* Deprecated: Use base.color.solid.grey.900-70a instead. Kept for backward compatibility. */
    --f-base-color-solid-grey-100a: var(--f-base-color-solid-grey-900-70a);

    /* Deprecated: Use base.color.solid.green.200 instead. Kept for backward compatibility. */
    --f-base-color-solid-green-50: var(--f-base-color-solid-green-200);

    /* Deprecated: Use base.color.solid.yellow.100 instead. Kept for backward compatibility. */
    --f-base-color-solid-yellow-50: var(--f-base-color-solid-yellow-100);

    /* Deprecated: Use base.color.solid.red.100 instead. Kept for backward compatibility. */
    --f-base-color-solid-red-50: var(--f-base-color-solid-red-100);

    /* Deprecated: Use base.color.solid.violet.100 instead. Kept for backward compatibility. */
    --f-base-color-solid-violet-25: var(--f-base-color-solid-violet-100);

    /* Deprecated: Use base.color.solid.violet.200 instead. Kept for backward compatibility. */
    --f-base-color-solid-violet-50: var(--f-base-color-solid-violet-200);

    /* Deprecated: Use base.color.solid.loyalty.gold.100 instead. Kept for backward compatibility. */
    --f-base-color-solid-gold-50: var(--f-base-color-solid-loyalty-gold-100);

    /* Deprecated: Use base.color.solid.loyalty.gold.400 instead. Kept for backward compatibility. */
    --f-base-color-solid-gold-75: var(--f-base-color-solid-loyalty-gold-400);

    /* Deprecated: Use base.color.solid.loyalty.gold.900 instead. Kept for backward compatibility. */
    --f-base-color-solid-gold-100: var(--f-base-color-solid-loyalty-gold-900);

    /* Deprecated: Use base.color.solid.loyalty.silver.400 instead. Kept for backward compatibility. */
    --f-base-color-solid-silver-50: var(
        --f-base-color-solid-loyalty-silver-400
    );

    /* Deprecated: Use base.color.solid.grey.600 instead. Kept for backward compatibility. */
    --f-base-color-solid-silver-100: var(--f-base-color-solid-grey-600);

    /* Deprecated: Use base.color.solid.loyalty.platinum.100 instead. Kept for backward compatibility. */
    --f-base-color-solid-platinum-50: var(
        --f-base-color-solid-loyalty-platinum-100
    );

    /* Deprecated: Use base.color.solid.loyalty.platinum.900 instead. Kept for backward compatibility. */
    --f-base-color-solid-platinum-100: var(
        --f-base-color-solid-loyalty-platinum-900
    );

    /* Deprecated: Use base.color.gradient.loyalty.burgundy instead */
    --f-base-color-gradient-burgundy: var(
        --f-base-color-gradient-loyalty-burgundy
    );

    /* Deprecated: Use base.color.gradient.loyalty.silver instead */
    --f-base-color-gradient-silver: var(--f-base-color-gradient-loyalty-silver);

    /* Deprecated: Use base.color.gradient.loyalty.gold instead */
    --f-base-color-gradient-gold: var(--f-base-color-gradient-loyalty-gold);

    /* Deprecated: Use base.color.gradient.loyalty.platinum instead */
    --f-base-color-gradient-platinum: var(
        --f-base-color-gradient-loyalty-platinum
    );

    /* Deprecated: Use base.size.12 instead */
    --f-base-size-7: var(--f-base-size-12);

    /* Deprecated: Use base.size.16 instead */
    --f-base-size-9: var(--f-base-size-16);

    /* Deprecated: Use brand.radius.none instead */
    --f-brand-border-radius-none: var(--f-brand-radius-none);

    /* Deprecated: Use brand.radius.base instead */
    --f-brand-border-radius-base: var(--f-brand-radius-base);

    /* Deprecated: Use brand.radius.small instead */
    --f-brand-border-radius-small: var(--f-brand-radius-small);

    /* Deprecated: Use brand.radius.inner instead */
    --f-brand-border-radius-inner: var(--f-brand-radius-inner);

    /* Deprecated: Use brand.radius.outer instead */
    --f-brand-border-radius-outer: var(--f-brand-radius-outer);

    /* Deprecated: Use brand.radius.rounded instead */
    --f-brand-border-radius-rounded: var(--f-brand-radius-rounded);

    /* Typography token for font-family */
    --f-brand-type-link-font-family: var(--f-base-type-family-secondary);

    /* Typography token for font-weight */
    --f-brand-type-link-font-weight: var(--f-base-type-weight-medium);

    /* Typography token for font-size */
    --f-brand-type-link-font-size: var(--f-base-type-scale-3);

    /* Typography token for line-height */
    --f-brand-type-link-line-height: var(--f-base-type-line-height-3);

    /* Deprecated: Use base.size.3 (12px) instead */
    --f-brand-icon-size-inline: var(--f-base-size-3);

    /* Deprecated: Use base.size.6 (24px) instead */
    --f-brand-icon-size-nav: var(--f-base-size-6);

    /* Deprecated: Use base.size.12 (48px) instead */
    --f-brand-icon-size-badges: var(--f-base-size-12);

    /* Deprecated: Use button.base.border-radius instead */
    --f-button-border-radius: var(--f-button-base-border-radius);

    /* Deprecated: Use button.primary.background instead. Kept for backward compatibility. */
    --f-button-primary-background-color: var(
        --f-brand-color-background-primary
    );

    /* Deprecated: Use button.primary.background-hover instead. Kept for backward compatibility. */
    --f-button-primary-background-color-hover: var(
        --f-brand-color-primary-hover
    );

    /* Deprecated: Use button.primary.text instead */
    --f-button-primary-text-color: var(--f-button-primary-text);

    /* Deprecated: Use button.primary.background instead. This directly references the burgundy color for fallback compatibility. */
    --f-button-primary: var(--f-brand-color-primary);

    /* Deprecated: Use button.secondary.text instead */
    --f-button-secondary-text-color: var(--f-button-secondary-text);

    /* Typography token for font-family */
    --f-brand-type-link: var(--f-brand-type-link-font-weight)
        var(--f-brand-type-link-font-size) /
        var(--f-brand-type-link-line-height)
        var(--f-brand-type-link-font-family);
}

/* ============================================
 * RESPONSIVE TYPOGRAPHY TOKENS - 1200px
 * ============================================
 * Typography tokens that adapt at breakpoints up to 1200px width.
 * These tokens override font-size and line-height for smaller screens.
 * ============================================ */

@media all and (max-width: 1200px) {
    :root {
        --f-brand-type-title-1: var(--f-brand-type-title-1-font-weight)
            var(--f-base-type-scale-6) / var(--f-base-type-line-height-6)
            var(--f-brand-type-title-1-font-family);
        --f-brand-type-title-2: var(--f-brand-type-title-2-font-weight)
            var(--f-base-type-scale-5) / var(--f-base-type-line-height-5)
            var(--f-brand-type-title-2-font-family);
        --f-brand-type-title-3: var(--f-brand-type-title-3-font-weight)
            var(--f-base-type-scale-5) / var(--f-base-type-line-height-5)
            var(--f-brand-type-title-3-font-family);
        --f-brand-type-page-title: var(--f-brand-type-page-title-font-weight)
            var(--f-base-type-scale-7) / var(--f-base-type-line-height-7)
            var(--f-brand-type-page-title-font-family);
        --f-brand-type-numerals: var(--f-brand-type-numerals-font-weight)
            var(--f-base-type-scale-5) / var(--f-base-type-line-height-5)
            var(--f-brand-type-numerals-font-family);
    }
}

/* ============================================
 * RESPONSIVE TYPOGRAPHY TOKENS - 768px
 * ============================================
 * Typography tokens that adapt at breakpoints up to 768px width.
 * These tokens override font-size and line-height for smaller screens.
 * ============================================ */

@media all and (max-width: 768px) {
    :root {
        --f-brand-type-page-title: var(--f-brand-type-page-title-font-weight)
            var(--f-base-type-scale-6) / var(--f-base-type-line-height-6)
            var(--f-brand-type-page-title-font-family);
    }
}