/*
  FFR Component Variant Architecture
  File: ffr-variant-tokens.css
  Purpose: Cohesive site-wide UI palette families mapped to semantic component tokens.
  Each named family provides coordinated Light, Medium and Dark variants.
*/
@layer site {
  :root {
    --ffr-variant-white: #ffffff;
    --ffr-variant-ink: #101820;
  }

  /* Primary Steel Blue & Gray
     Core palette: #101820 | #17324D | #365B73 | #6F8797 | #C79A3B | #E5EAEE
     Professional steel blue, navy, blue-gray and restrained metallic-gold accents for dependable enterprise use. */

  [data-ffr-variant="light"],
  [data-ffr-variant="steel-light"] {
    --ffr-theme-bg: #E5EAEE;
    --ffr-theme-bg-secondary: #FFFFFF;
    --ffr-theme-surface: rgba(16,24,32,.05);
    --ffr-theme-surface-strong: rgba(16,24,32,.10);
    --ffr-theme-surface-soft: rgba(16,24,32,.035);
    --ffr-theme-text: #101820;
    --ffr-theme-text-muted: #17324D;
    --ffr-theme-text-soft: #17324D;
    --ffr-theme-border: #6F8797;
    --ffr-theme-border-strong: #365B73;
    --ffr-theme-link: #365B73;
    --ffr-theme-link-hover: #17324D;
    --ffr-theme-accent: #C79A3B;
    --ffr-theme-accent-contrast: #101820;
    --ffr-theme-nav-bg: rgba(255,255,255,.55);
    --ffr-theme-nav-hover: rgba(16,24,32,.08);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #101820;
    --ffr-theme-dropdown-hover: #E5EAEE;
    --ffr-theme-dropdown-link-hover: #365B73;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #365B73;
    --ffr-theme-button-text: #FFFFFF;
    --ffr-theme-button-hover-bg: #17324D;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #101820;
    --ffr-theme-focus: #C79A3B;
    --ffr-theme-shadow: 0 14px 30px rgba(15,23,42,.12);
  }

  [data-ffr-variant="medium"],
  [data-ffr-variant="steel-medium"] {
    --ffr-theme-bg: #365B73;
    --ffr-theme-bg-secondary: #17324D;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #E5EAEE;
    --ffr-theme-text-soft: #E5EAEE;
    --ffr-theme-border: rgba(255,255,255,.26);
    --ffr-theme-border-strong: rgba(255,255,255,.42);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #C79A3B;
    --ffr-theme-accent-contrast: #101820;
    --ffr-theme-nav-bg: rgba(0,0,0,.20);
    --ffr-theme-nav-hover: rgba(255,255,255,.17);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #101820;
    --ffr-theme-dropdown-hover: #E5EAEE;
    --ffr-theme-dropdown-link-hover: #365B73;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #C79A3B;
    --ffr-theme-button-text: #101820;
    --ffr-theme-button-hover-bg: #E5EAEE;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #101820;
    --ffr-theme-focus: #C79A3B;
    --ffr-theme-shadow: 0 16px 36px rgba(2,8,23,.24);
  }

  :root,
  [data-ffr-variant="dark"],
  [data-ffr-variant="steel-dark"] {
    --ffr-theme-bg: #101820;
    --ffr-theme-bg-secondary: #17324D;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #E5EAEE;
    --ffr-theme-text-soft: #E5EAEE;
    --ffr-theme-border: rgba(255,255,255,.18);
    --ffr-theme-border-strong: rgba(255,255,255,.30);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #C79A3B;
    --ffr-theme-accent-contrast: #101820;
    --ffr-theme-nav-bg: rgba(0,0,0,.28);
    --ffr-theme-nav-hover: rgba(255,255,255,.14);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #101820;
    --ffr-theme-dropdown-hover: #E5EAEE;
    --ffr-theme-dropdown-link-hover: #365B73;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #C79A3B;
    --ffr-theme-button-text: #101820;
    --ffr-theme-button-hover-bg: #E5EAEE;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #101820;
    --ffr-theme-focus: #C79A3B;
    --ffr-theme-shadow: 0 18px 42px rgba(2,8,23,.30);
  }

  /* Modern Navy
     Core palette: #0B0F14 | #18222C | #0B2545 | #1D4F7A | #C7A65D | #E9EDF2
     Deep navy and charcoal with a restrained warm-gold accent for an authoritative, polished and elevated presentation. */

  [data-ffr-variant="navy-light"] {
    --ffr-theme-bg: #E9EDF2;
    --ffr-theme-bg-secondary: #FFFFFF;
    --ffr-theme-surface: rgba(16,24,32,.05);
    --ffr-theme-surface-strong: rgba(16,24,32,.10);
    --ffr-theme-surface-soft: rgba(16,24,32,.035);
    --ffr-theme-text: #0B0F14;
    --ffr-theme-text-muted: #18222C;
    --ffr-theme-text-soft: #18222C;
    --ffr-theme-border: #1D4F7A;
    --ffr-theme-border-strong: #0B2545;
    --ffr-theme-link: #0B2545;
    --ffr-theme-link-hover: #18222C;
    --ffr-theme-accent: #C7A65D;
    --ffr-theme-accent-contrast: #0B0F14;
    --ffr-theme-nav-bg: rgba(255,255,255,.55);
    --ffr-theme-nav-hover: rgba(16,24,32,.08);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #0B0F14;
    --ffr-theme-dropdown-hover: #E9EDF2;
    --ffr-theme-dropdown-link-hover: #0B2545;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #0B2545;
    --ffr-theme-button-text: #FFFFFF;
    --ffr-theme-button-hover-bg: #18222C;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #0B0F14;
    --ffr-theme-focus: #C7A65D;
    --ffr-theme-shadow: 0 14px 30px rgba(15,23,42,.12);
  }

  [data-ffr-variant="navy-medium"] {
    --ffr-theme-bg: #0B2545;
    --ffr-theme-bg-secondary: #18222C;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #E9EDF2;
    --ffr-theme-text-soft: #E9EDF2;
    --ffr-theme-border: rgba(255,255,255,.26);
    --ffr-theme-border-strong: rgba(255,255,255,.42);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #C7A65D;
    --ffr-theme-accent-contrast: #0B0F14;
    --ffr-theme-nav-bg: rgba(0,0,0,.20);
    --ffr-theme-nav-hover: rgba(255,255,255,.17);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #0B0F14;
    --ffr-theme-dropdown-hover: #E9EDF2;
    --ffr-theme-dropdown-link-hover: #0B2545;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #C7A65D;
    --ffr-theme-button-text: #0B0F14;
    --ffr-theme-button-hover-bg: #E9EDF2;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #0B0F14;
    --ffr-theme-focus: #C7A65D;
    --ffr-theme-shadow: 0 16px 36px rgba(2,8,23,.24);
  }

  [data-ffr-variant="navy-dark"] {
    --ffr-theme-bg: #0B0F14;
    --ffr-theme-bg-secondary: #18222C;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #E9EDF2;
    --ffr-theme-text-soft: #E9EDF2;
    --ffr-theme-border: rgba(255,255,255,.18);
    --ffr-theme-border-strong: rgba(255,255,255,.30);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #C7A65D;
    --ffr-theme-accent-contrast: #0B0F14;
    --ffr-theme-nav-bg: rgba(0,0,0,.28);
    --ffr-theme-nav-hover: rgba(255,255,255,.14);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #0B0F14;
    --ffr-theme-dropdown-hover: #E9EDF2;
    --ffr-theme-dropdown-link-hover: #0B2545;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #C7A65D;
    --ffr-theme-button-text: #0B0F14;
    --ffr-theme-button-hover-bg: #E9EDF2;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #0B0F14;
    --ffr-theme-focus: #C7A65D;
    --ffr-theme-shadow: 0 18px 42px rgba(2,8,23,.30);
  }

  /* Cool and Warm
     Core palette: #151A1F | #27343E | #244A6A | #C45A24 | #D89A2B | #F3F0EA
     Gunmetal, steel blue and navy balanced by burnt orange and amber for a dynamic, persuasive interface. */

  [data-ffr-variant="cool-warm-light"] {
    --ffr-theme-bg: #F3F0EA;
    --ffr-theme-bg-secondary: #FFFFFF;
    --ffr-theme-surface: rgba(16,24,32,.05);
    --ffr-theme-surface-strong: rgba(16,24,32,.10);
    --ffr-theme-surface-soft: rgba(16,24,32,.035);
    --ffr-theme-text: #151A1F;
    --ffr-theme-text-muted: #27343E;
    --ffr-theme-text-soft: #27343E;
    --ffr-theme-border: #C45A24;
    --ffr-theme-border-strong: #244A6A;
    --ffr-theme-link: #244A6A;
    --ffr-theme-link-hover: #27343E;
    --ffr-theme-accent: #D89A2B;
    --ffr-theme-accent-contrast: #151A1F;
    --ffr-theme-nav-bg: rgba(255,255,255,.55);
    --ffr-theme-nav-hover: rgba(16,24,32,.08);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #151A1F;
    --ffr-theme-dropdown-hover: #F3F0EA;
    --ffr-theme-dropdown-link-hover: #244A6A;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #244A6A;
    --ffr-theme-button-text: #FFFFFF;
    --ffr-theme-button-hover-bg: #27343E;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #151A1F;
    --ffr-theme-focus: #D89A2B;
    --ffr-theme-shadow: 0 14px 30px rgba(15,23,42,.12);
  }

  [data-ffr-variant="cool-warm-medium"] {
    --ffr-theme-bg: #244A6A;
    --ffr-theme-bg-secondary: #27343E;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #F3F0EA;
    --ffr-theme-text-soft: #F3F0EA;
    --ffr-theme-border: rgba(255,255,255,.26);
    --ffr-theme-border-strong: rgba(255,255,255,.42);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #D89A2B;
    --ffr-theme-accent-contrast: #151A1F;
    --ffr-theme-nav-bg: rgba(0,0,0,.20);
    --ffr-theme-nav-hover: rgba(255,255,255,.17);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #151A1F;
    --ffr-theme-dropdown-hover: #F3F0EA;
    --ffr-theme-dropdown-link-hover: #244A6A;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #D89A2B;
    --ffr-theme-button-text: #151A1F;
    --ffr-theme-button-hover-bg: #F3F0EA;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #151A1F;
    --ffr-theme-focus: #D89A2B;
    --ffr-theme-shadow: 0 16px 36px rgba(2,8,23,.24);
  }

  [data-ffr-variant="cool-warm-dark"] {
    --ffr-theme-bg: #151A1F;
    --ffr-theme-bg-secondary: #27343E;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #F3F0EA;
    --ffr-theme-text-soft: #F3F0EA;
    --ffr-theme-border: rgba(255,255,255,.18);
    --ffr-theme-border-strong: rgba(255,255,255,.30);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #D89A2B;
    --ffr-theme-accent-contrast: #151A1F;
    --ffr-theme-nav-bg: rgba(0,0,0,.28);
    --ffr-theme-nav-hover: rgba(255,255,255,.14);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #151A1F;
    --ffr-theme-dropdown-hover: #F3F0EA;
    --ffr-theme-dropdown-link-hover: #244A6A;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #D89A2B;
    --ffr-theme-button-text: #151A1F;
    --ffr-theme-button-hover-bg: #F3F0EA;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #151A1F;
    --ffr-theme-focus: #D89A2B;
    --ffr-theme-shadow: 0 18px 42px rgba(2,8,23,.30);
  }

  /* Cool and Collected
     Core palette: #0D1B1E | #123B3A | #1F6F6C | #5AA7A4 | #B8D8D6 | #F1F7F6
     Deep teal and blue-green with cool metallic aqua support for a calm, technical and forward-looking design. */

  [data-ffr-variant="cool-collected-light"] {
    --ffr-theme-bg: #F1F7F6;
    --ffr-theme-bg-secondary: #FFFFFF;
    --ffr-theme-surface: rgba(16,24,32,.05);
    --ffr-theme-surface-strong: rgba(16,24,32,.10);
    --ffr-theme-surface-soft: rgba(16,24,32,.035);
    --ffr-theme-text: #0D1B1E;
    --ffr-theme-text-muted: #123B3A;
    --ffr-theme-text-soft: #123B3A;
    --ffr-theme-border: #5AA7A4;
    --ffr-theme-border-strong: #1F6F6C;
    --ffr-theme-link: #1F6F6C;
    --ffr-theme-link-hover: #123B3A;
    --ffr-theme-accent: #B8D8D6;
    --ffr-theme-accent-contrast: #0D1B1E;
    --ffr-theme-nav-bg: rgba(255,255,255,.55);
    --ffr-theme-nav-hover: rgba(16,24,32,.08);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #0D1B1E;
    --ffr-theme-dropdown-hover: #F1F7F6;
    --ffr-theme-dropdown-link-hover: #1F6F6C;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #1F6F6C;
    --ffr-theme-button-text: #FFFFFF;
    --ffr-theme-button-hover-bg: #123B3A;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #0D1B1E;
    --ffr-theme-focus: #B8D8D6;
    --ffr-theme-shadow: 0 14px 30px rgba(15,23,42,.12);
  }

  [data-ffr-variant="cool-collected-medium"] {
    --ffr-theme-bg: #1F6F6C;
    --ffr-theme-bg-secondary: #123B3A;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #F1F7F6;
    --ffr-theme-text-soft: #F1F7F6;
    --ffr-theme-border: rgba(255,255,255,.26);
    --ffr-theme-border-strong: rgba(255,255,255,.42);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #B8D8D6;
    --ffr-theme-accent-contrast: #0D1B1E;
    --ffr-theme-nav-bg: rgba(0,0,0,.20);
    --ffr-theme-nav-hover: rgba(255,255,255,.17);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #0D1B1E;
    --ffr-theme-dropdown-hover: #F1F7F6;
    --ffr-theme-dropdown-link-hover: #1F6F6C;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #B8D8D6;
    --ffr-theme-button-text: #0D1B1E;
    --ffr-theme-button-hover-bg: #F1F7F6;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #0D1B1E;
    --ffr-theme-focus: #B8D8D6;
    --ffr-theme-shadow: 0 16px 36px rgba(2,8,23,.24);
  }

  [data-ffr-variant="cool-collected-dark"] {
    --ffr-theme-bg: #0D1B1E;
    --ffr-theme-bg-secondary: #123B3A;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #F1F7F6;
    --ffr-theme-text-soft: #F1F7F6;
    --ffr-theme-border: rgba(255,255,255,.18);
    --ffr-theme-border-strong: rgba(255,255,255,.30);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #B8D8D6;
    --ffr-theme-accent-contrast: #0D1B1E;
    --ffr-theme-nav-bg: rgba(0,0,0,.28);
    --ffr-theme-nav-hover: rgba(255,255,255,.14);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #0D1B1E;
    --ffr-theme-dropdown-hover: #F1F7F6;
    --ffr-theme-dropdown-link-hover: #1F6F6C;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #B8D8D6;
    --ffr-theme-button-text: #0D1B1E;
    --ffr-theme-button-hover-bg: #F1F7F6;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #0D1B1E;
    --ffr-theme-focus: #B8D8D6;
    --ffr-theme-shadow: 0 18px 42px rgba(2,8,23,.30);
  }

  /* Cosmic Artistry
     Core palette: #11151D | #263142 | #415675 | #7B8FA7 | #C9CED6 | #F3F4F6
     Space blue, slate, atmospheric blue-gray and silver neutrals for a sophisticated, artistic and modern tone. */

  [data-ffr-variant="cosmic-light"] {
    --ffr-theme-bg: #F3F4F6;
    --ffr-theme-bg-secondary: #FFFFFF;
    --ffr-theme-surface: rgba(16,24,32,.05);
    --ffr-theme-surface-strong: rgba(16,24,32,.10);
    --ffr-theme-surface-soft: rgba(16,24,32,.035);
    --ffr-theme-text: #11151D;
    --ffr-theme-text-muted: #263142;
    --ffr-theme-text-soft: #263142;
    --ffr-theme-border: #7B8FA7;
    --ffr-theme-border-strong: #415675;
    --ffr-theme-link: #415675;
    --ffr-theme-link-hover: #263142;
    --ffr-theme-accent: #C9CED6;
    --ffr-theme-accent-contrast: #11151D;
    --ffr-theme-nav-bg: rgba(255,255,255,.55);
    --ffr-theme-nav-hover: rgba(16,24,32,.08);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #11151D;
    --ffr-theme-dropdown-hover: #F3F4F6;
    --ffr-theme-dropdown-link-hover: #415675;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #415675;
    --ffr-theme-button-text: #FFFFFF;
    --ffr-theme-button-hover-bg: #263142;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #11151D;
    --ffr-theme-focus: #C9CED6;
    --ffr-theme-shadow: 0 14px 30px rgba(15,23,42,.12);
  }

  [data-ffr-variant="cosmic-medium"] {
    --ffr-theme-bg: #415675;
    --ffr-theme-bg-secondary: #263142;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #F3F4F6;
    --ffr-theme-text-soft: #F3F4F6;
    --ffr-theme-border: rgba(255,255,255,.26);
    --ffr-theme-border-strong: rgba(255,255,255,.42);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #C9CED6;
    --ffr-theme-accent-contrast: #11151D;
    --ffr-theme-nav-bg: rgba(0,0,0,.20);
    --ffr-theme-nav-hover: rgba(255,255,255,.17);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #11151D;
    --ffr-theme-dropdown-hover: #F3F4F6;
    --ffr-theme-dropdown-link-hover: #415675;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #C9CED6;
    --ffr-theme-button-text: #11151D;
    --ffr-theme-button-hover-bg: #F3F4F6;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #11151D;
    --ffr-theme-focus: #C9CED6;
    --ffr-theme-shadow: 0 16px 36px rgba(2,8,23,.24);
  }

  [data-ffr-variant="cosmic-dark"] {
    --ffr-theme-bg: #11151D;
    --ffr-theme-bg-secondary: #263142;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #F3F4F6;
    --ffr-theme-text-soft: #F3F4F6;
    --ffr-theme-border: rgba(255,255,255,.18);
    --ffr-theme-border-strong: rgba(255,255,255,.30);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #C9CED6;
    --ffr-theme-accent-contrast: #11151D;
    --ffr-theme-nav-bg: rgba(0,0,0,.28);
    --ffr-theme-nav-hover: rgba(255,255,255,.14);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #11151D;
    --ffr-theme-dropdown-hover: #F3F4F6;
    --ffr-theme-dropdown-link-hover: #415675;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #C9CED6;
    --ffr-theme-button-text: #11151D;
    --ffr-theme-button-hover-bg: #F3F4F6;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #11151D;
    --ffr-theme-focus: #C9CED6;
    --ffr-theme-shadow: 0 18px 42px rgba(2,8,23,.30);
  }

  /* Sleek and Futuristic
     Core palette: #12171D | #25313B | #1E5A8A | #8796A5 | #D68A62 | #ECE8E1
     Sapphire and gunmetal with platinum and restrained peach-copper warmth for a sleek technological appearance. */

  [data-ffr-variant="futuristic-light"] {
    --ffr-theme-bg: #ECE8E1;
    --ffr-theme-bg-secondary: #FFFFFF;
    --ffr-theme-surface: rgba(16,24,32,.05);
    --ffr-theme-surface-strong: rgba(16,24,32,.10);
    --ffr-theme-surface-soft: rgba(16,24,32,.035);
    --ffr-theme-text: #12171D;
    --ffr-theme-text-muted: #25313B;
    --ffr-theme-text-soft: #25313B;
    --ffr-theme-border: #8796A5;
    --ffr-theme-border-strong: #1E5A8A;
    --ffr-theme-link: #1E5A8A;
    --ffr-theme-link-hover: #25313B;
    --ffr-theme-accent: #D68A62;
    --ffr-theme-accent-contrast: #12171D;
    --ffr-theme-nav-bg: rgba(255,255,255,.55);
    --ffr-theme-nav-hover: rgba(16,24,32,.08);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #12171D;
    --ffr-theme-dropdown-hover: #ECE8E1;
    --ffr-theme-dropdown-link-hover: #1E5A8A;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #1E5A8A;
    --ffr-theme-button-text: #FFFFFF;
    --ffr-theme-button-hover-bg: #25313B;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #12171D;
    --ffr-theme-focus: #D68A62;
    --ffr-theme-shadow: 0 14px 30px rgba(15,23,42,.12);
  }

  [data-ffr-variant="futuristic-medium"] {
    --ffr-theme-bg: #1E5A8A;
    --ffr-theme-bg-secondary: #25313B;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #ECE8E1;
    --ffr-theme-text-soft: #ECE8E1;
    --ffr-theme-border: rgba(255,255,255,.26);
    --ffr-theme-border-strong: rgba(255,255,255,.42);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #D68A62;
    --ffr-theme-accent-contrast: #12171D;
    --ffr-theme-nav-bg: rgba(0,0,0,.20);
    --ffr-theme-nav-hover: rgba(255,255,255,.17);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #12171D;
    --ffr-theme-dropdown-hover: #ECE8E1;
    --ffr-theme-dropdown-link-hover: #1E5A8A;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #D68A62;
    --ffr-theme-button-text: #12171D;
    --ffr-theme-button-hover-bg: #ECE8E1;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #12171D;
    --ffr-theme-focus: #D68A62;
    --ffr-theme-shadow: 0 16px 36px rgba(2,8,23,.24);
  }

  [data-ffr-variant="futuristic-dark"] {
    --ffr-theme-bg: #12171D;
    --ffr-theme-bg-secondary: #25313B;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #ECE8E1;
    --ffr-theme-text-soft: #ECE8E1;
    --ffr-theme-border: rgba(255,255,255,.18);
    --ffr-theme-border-strong: rgba(255,255,255,.30);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #D68A62;
    --ffr-theme-accent-contrast: #12171D;
    --ffr-theme-nav-bg: rgba(0,0,0,.28);
    --ffr-theme-nav-hover: rgba(255,255,255,.14);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #12171D;
    --ffr-theme-dropdown-hover: #ECE8E1;
    --ffr-theme-dropdown-link-hover: #1E5A8A;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #D68A62;
    --ffr-theme-button-text: #12171D;
    --ffr-theme-button-hover-bg: #ECE8E1;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #12171D;
    --ffr-theme-focus: #D68A62;
    --ffr-theme-shadow: 0 18px 42px rgba(2,8,23,.30);
  }

  /* Blue and Refreshing
     Core palette: #071C33 | #123F73 | #1976A8 | #31AFC4 | #A7D8E6 | #EFF7FA
     Deep blue, lapis, azure and cyan-blue supported by pale blue neutrals for a fresh and adaptable digital palette. */

  [data-ffr-variant="refreshing-blue-light"] {
    --ffr-theme-bg: #EFF7FA;
    --ffr-theme-bg-secondary: #FFFFFF;
    --ffr-theme-surface: rgba(16,24,32,.05);
    --ffr-theme-surface-strong: rgba(16,24,32,.10);
    --ffr-theme-surface-soft: rgba(16,24,32,.035);
    --ffr-theme-text: #071C33;
    --ffr-theme-text-muted: #123F73;
    --ffr-theme-text-soft: #123F73;
    --ffr-theme-border: #31AFC4;
    --ffr-theme-border-strong: #1976A8;
    --ffr-theme-link: #1976A8;
    --ffr-theme-link-hover: #123F73;
    --ffr-theme-accent: #A7D8E6;
    --ffr-theme-accent-contrast: #071C33;
    --ffr-theme-nav-bg: rgba(255,255,255,.55);
    --ffr-theme-nav-hover: rgba(16,24,32,.08);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #071C33;
    --ffr-theme-dropdown-hover: #EFF7FA;
    --ffr-theme-dropdown-link-hover: #1976A8;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #1976A8;
    --ffr-theme-button-text: #FFFFFF;
    --ffr-theme-button-hover-bg: #123F73;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #071C33;
    --ffr-theme-focus: #A7D8E6;
    --ffr-theme-shadow: 0 14px 30px rgba(15,23,42,.12);
  }

  [data-ffr-variant="refreshing-blue-medium"] {
    --ffr-theme-bg: #1976A8;
    --ffr-theme-bg-secondary: #123F73;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #EFF7FA;
    --ffr-theme-text-soft: #EFF7FA;
    --ffr-theme-border: rgba(255,255,255,.26);
    --ffr-theme-border-strong: rgba(255,255,255,.42);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #A7D8E6;
    --ffr-theme-accent-contrast: #071C33;
    --ffr-theme-nav-bg: rgba(0,0,0,.20);
    --ffr-theme-nav-hover: rgba(255,255,255,.17);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #071C33;
    --ffr-theme-dropdown-hover: #EFF7FA;
    --ffr-theme-dropdown-link-hover: #1976A8;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #A7D8E6;
    --ffr-theme-button-text: #071C33;
    --ffr-theme-button-hover-bg: #EFF7FA;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #071C33;
    --ffr-theme-focus: #A7D8E6;
    --ffr-theme-shadow: 0 16px 36px rgba(2,8,23,.24);
  }

  [data-ffr-variant="refreshing-blue-dark"] {
    --ffr-theme-bg: #071C33;
    --ffr-theme-bg-secondary: #123F73;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #EFF7FA;
    --ffr-theme-text-soft: #EFF7FA;
    --ffr-theme-border: rgba(255,255,255,.18);
    --ffr-theme-border-strong: rgba(255,255,255,.30);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #A7D8E6;
    --ffr-theme-accent-contrast: #071C33;
    --ffr-theme-nav-bg: rgba(0,0,0,.28);
    --ffr-theme-nav-hover: rgba(255,255,255,.14);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #071C33;
    --ffr-theme-dropdown-hover: #EFF7FA;
    --ffr-theme-dropdown-link-hover: #1976A8;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #A7D8E6;
    --ffr-theme-button-text: #071C33;
    --ffr-theme-button-hover-bg: #EFF7FA;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #071C33;
    --ffr-theme-focus: #A7D8E6;
    --ffr-theme-shadow: 0 18px 42px rgba(2,8,23,.30);
  }

  /* Clean and Modern
     Core palette: #102823 | #1E5B4F | #2E7668 | #3B9C89 | #6FC5B4 | #E4F5F1
     Myrtle, keppel and teal-green with open white-tinted surfaces for a minimal, fresh and accessible system. */

  [data-ffr-variant="clean-modern-light"] {
    --ffr-theme-bg: #E4F5F1;
    --ffr-theme-bg-secondary: #FFFFFF;
    --ffr-theme-surface: rgba(16,24,32,.05);
    --ffr-theme-surface-strong: rgba(16,24,32,.10);
    --ffr-theme-surface-soft: rgba(16,24,32,.035);
    --ffr-theme-text: #102823;
    --ffr-theme-text-muted: #1E5B4F;
    --ffr-theme-text-soft: #1E5B4F;
    --ffr-theme-border: #3B9C89;
    --ffr-theme-border-strong: #2E7668;
    --ffr-theme-link: #2E7668;
    --ffr-theme-link-hover: #1E5B4F;
    --ffr-theme-accent: #6FC5B4;
    --ffr-theme-accent-contrast: #102823;
    --ffr-theme-nav-bg: rgba(255,255,255,.55);
    --ffr-theme-nav-hover: rgba(16,24,32,.08);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #102823;
    --ffr-theme-dropdown-hover: #E4F5F1;
    --ffr-theme-dropdown-link-hover: #2E7668;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #2E7668;
    --ffr-theme-button-text: #FFFFFF;
    --ffr-theme-button-hover-bg: #1E5B4F;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #102823;
    --ffr-theme-focus: #6FC5B4;
    --ffr-theme-shadow: 0 14px 30px rgba(15,23,42,.12);
  }

  [data-ffr-variant="clean-modern-medium"] {
    --ffr-theme-bg: #2E7668;
    --ffr-theme-bg-secondary: #1E5B4F;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #E4F5F1;
    --ffr-theme-text-soft: #E4F5F1;
    --ffr-theme-border: rgba(255,255,255,.26);
    --ffr-theme-border-strong: rgba(255,255,255,.42);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #6FC5B4;
    --ffr-theme-accent-contrast: #102823;
    --ffr-theme-nav-bg: rgba(0,0,0,.20);
    --ffr-theme-nav-hover: rgba(255,255,255,.17);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #102823;
    --ffr-theme-dropdown-hover: #E4F5F1;
    --ffr-theme-dropdown-link-hover: #2E7668;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #6FC5B4;
    --ffr-theme-button-text: #102823;
    --ffr-theme-button-hover-bg: #E4F5F1;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #102823;
    --ffr-theme-focus: #6FC5B4;
    --ffr-theme-shadow: 0 16px 36px rgba(2,8,23,.24);
  }

  [data-ffr-variant="clean-modern-dark"] {
    --ffr-theme-bg: #102823;
    --ffr-theme-bg-secondary: #1E5B4F;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #E4F5F1;
    --ffr-theme-text-soft: #E4F5F1;
    --ffr-theme-border: rgba(255,255,255,.18);
    --ffr-theme-border-strong: rgba(255,255,255,.30);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #6FC5B4;
    --ffr-theme-accent-contrast: #102823;
    --ffr-theme-nav-bg: rgba(0,0,0,.28);
    --ffr-theme-nav-hover: rgba(255,255,255,.14);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #102823;
    --ffr-theme-dropdown-hover: #E4F5F1;
    --ffr-theme-dropdown-link-hover: #2E7668;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #6FC5B4;
    --ffr-theme-button-text: #102823;
    --ffr-theme-button-hover-bg: #E4F5F1;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #102823;
    --ffr-theme-focus: #6FC5B4;
    --ffr-theme-shadow: 0 18px 42px rgba(2,8,23,.30);
  }

  /* Close to Nature
     Core palette: #17261E | #31563C | #2C6F73 | #6B95A6 | #A8C9CE | #EFF3EA
     Natural greens, teal, blue-green and pale cerulean neutrals for stability, balance and contemporary warmth. */

  [data-ffr-variant="nature-light"] {
    --ffr-theme-bg: #EFF3EA;
    --ffr-theme-bg-secondary: #FFFFFF;
    --ffr-theme-surface: rgba(16,24,32,.05);
    --ffr-theme-surface-strong: rgba(16,24,32,.10);
    --ffr-theme-surface-soft: rgba(16,24,32,.035);
    --ffr-theme-text: #17261E;
    --ffr-theme-text-muted: #31563C;
    --ffr-theme-text-soft: #31563C;
    --ffr-theme-border: #6B95A6;
    --ffr-theme-border-strong: #2C6F73;
    --ffr-theme-link: #2C6F73;
    --ffr-theme-link-hover: #31563C;
    --ffr-theme-accent: #A8C9CE;
    --ffr-theme-accent-contrast: #17261E;
    --ffr-theme-nav-bg: rgba(255,255,255,.55);
    --ffr-theme-nav-hover: rgba(16,24,32,.08);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #17261E;
    --ffr-theme-dropdown-hover: #EFF3EA;
    --ffr-theme-dropdown-link-hover: #2C6F73;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #2C6F73;
    --ffr-theme-button-text: #FFFFFF;
    --ffr-theme-button-hover-bg: #31563C;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #17261E;
    --ffr-theme-focus: #A8C9CE;
    --ffr-theme-shadow: 0 14px 30px rgba(15,23,42,.12);
  }

  [data-ffr-variant="nature-medium"] {
    --ffr-theme-bg: #2C6F73;
    --ffr-theme-bg-secondary: #31563C;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #EFF3EA;
    --ffr-theme-text-soft: #EFF3EA;
    --ffr-theme-border: rgba(255,255,255,.26);
    --ffr-theme-border-strong: rgba(255,255,255,.42);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #A8C9CE;
    --ffr-theme-accent-contrast: #17261E;
    --ffr-theme-nav-bg: rgba(0,0,0,.20);
    --ffr-theme-nav-hover: rgba(255,255,255,.17);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #17261E;
    --ffr-theme-dropdown-hover: #EFF3EA;
    --ffr-theme-dropdown-link-hover: #2C6F73;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #A8C9CE;
    --ffr-theme-button-text: #17261E;
    --ffr-theme-button-hover-bg: #EFF3EA;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #17261E;
    --ffr-theme-focus: #A8C9CE;
    --ffr-theme-shadow: 0 16px 36px rgba(2,8,23,.24);
  }

  [data-ffr-variant="nature-dark"] {
    --ffr-theme-bg: #17261E;
    --ffr-theme-bg-secondary: #31563C;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #EFF3EA;
    --ffr-theme-text-soft: #EFF3EA;
    --ffr-theme-border: rgba(255,255,255,.18);
    --ffr-theme-border-strong: rgba(255,255,255,.30);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #A8C9CE;
    --ffr-theme-accent-contrast: #17261E;
    --ffr-theme-nav-bg: rgba(0,0,0,.28);
    --ffr-theme-nav-hover: rgba(255,255,255,.14);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #17261E;
    --ffr-theme-dropdown-hover: #EFF3EA;
    --ffr-theme-dropdown-link-hover: #2C6F73;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #A8C9CE;
    --ffr-theme-button-text: #17261E;
    --ffr-theme-button-hover-bg: #EFF3EA;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #17261E;
    --ffr-theme-focus: #A8C9CE;
    --ffr-theme-shadow: 0 18px 42px rgba(2,8,23,.30);
  }

  /* Corporate and Serious
     Core palette: #0B1526 | #102A43 | #174A7E | #2D7FC1 | #A63838 | #EEF2F6
     Oxford blue and professional medium blue with a controlled red accent for authority, stability and reliability. */

  [data-ffr-variant="corporate-light"] {
    --ffr-theme-bg: #EEF2F6;
    --ffr-theme-bg-secondary: #FFFFFF;
    --ffr-theme-surface: rgba(16,24,32,.05);
    --ffr-theme-surface-strong: rgba(16,24,32,.10);
    --ffr-theme-surface-soft: rgba(16,24,32,.035);
    --ffr-theme-text: #0B1526;
    --ffr-theme-text-muted: #102A43;
    --ffr-theme-text-soft: #102A43;
    --ffr-theme-border: #2D7FC1;
    --ffr-theme-border-strong: #174A7E;
    --ffr-theme-link: #174A7E;
    --ffr-theme-link-hover: #102A43;
    --ffr-theme-accent: #A63838;
    --ffr-theme-accent-contrast: #FFFFFF;
    --ffr-theme-nav-bg: rgba(255,255,255,.55);
    --ffr-theme-nav-hover: rgba(16,24,32,.08);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #0B1526;
    --ffr-theme-dropdown-hover: #EEF2F6;
    --ffr-theme-dropdown-link-hover: #174A7E;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #174A7E;
    --ffr-theme-button-text: #FFFFFF;
    --ffr-theme-button-hover-bg: #102A43;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #0B1526;
    --ffr-theme-focus: #A63838;
    --ffr-theme-shadow: 0 14px 30px rgba(15,23,42,.12);
  }

  [data-ffr-variant="corporate-medium"] {
    --ffr-theme-bg: #174A7E;
    --ffr-theme-bg-secondary: #102A43;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #EEF2F6;
    --ffr-theme-text-soft: #EEF2F6;
    --ffr-theme-border: rgba(255,255,255,.26);
    --ffr-theme-border-strong: rgba(255,255,255,.42);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #A63838;
    --ffr-theme-accent-contrast: #FFFFFF;
    --ffr-theme-nav-bg: rgba(0,0,0,.20);
    --ffr-theme-nav-hover: rgba(255,255,255,.17);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #0B1526;
    --ffr-theme-dropdown-hover: #EEF2F6;
    --ffr-theme-dropdown-link-hover: #174A7E;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #A63838;
    --ffr-theme-button-text: #FFFFFF;
    --ffr-theme-button-hover-bg: #EEF2F6;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #0B1526;
    --ffr-theme-focus: #A63838;
    --ffr-theme-shadow: 0 16px 36px rgba(2,8,23,.24);
  }

  [data-ffr-variant="corporate-dark"] {
    --ffr-theme-bg: #0B1526;
    --ffr-theme-bg-secondary: #102A43;
    --ffr-theme-surface: rgba(255,255,255,.10);
    --ffr-theme-surface-strong: rgba(255,255,255,.17);
    --ffr-theme-surface-soft: rgba(255,255,255,.07);
    --ffr-theme-text: #FFFFFF;
    --ffr-theme-text-muted: #EEF2F6;
    --ffr-theme-text-soft: #EEF2F6;
    --ffr-theme-border: rgba(255,255,255,.18);
    --ffr-theme-border-strong: rgba(255,255,255,.30);
    --ffr-theme-link: #FFFFFF;
    --ffr-theme-link-hover: #FFFFFF;
    --ffr-theme-accent: #A63838;
    --ffr-theme-accent-contrast: #FFFFFF;
    --ffr-theme-nav-bg: rgba(0,0,0,.28);
    --ffr-theme-nav-hover: rgba(255,255,255,.14);
    --ffr-theme-dropdown-bg: #FFFFFF;
    --ffr-theme-dropdown-text: #0B1526;
    --ffr-theme-dropdown-hover: #EEF2F6;
    --ffr-theme-dropdown-link-hover: #174A7E;
    --ffr-theme-dropdown-border: rgba(15,23,42,.12);
    --ffr-theme-button-bg: #A63838;
    --ffr-theme-button-text: #FFFFFF;
    --ffr-theme-button-hover-bg: #EEF2F6;
    --ffr-theme-input-bg: #FFFFFF;
    --ffr-theme-input-text: #0B1526;
    --ffr-theme-focus: #A63838;
    --ffr-theme-shadow: 0 18px 42px rgba(2,8,23,.30);
  }

  html[data-ffr-variant$="-light"], html[data-ffr-variant="light"] { color-scheme: light; }
  html[data-ffr-variant$="-medium"], html[data-ffr-variant$="-dark"], html[data-ffr-variant="medium"], html[data-ffr-variant="dark"] { color-scheme: dark; }
}

/* ======================================================================
   Unified site-theme semantic contract — Phase 1
   ----------------------------------------------------------------------
   This layer is additive. Existing --ffr-theme-* variables remain intact
   for the current header/navigation/footer implementation. The new
   family + tone attributes are applied by ffr-shell-variant.js and expose
   a reusable site-wide semantic/component token API for staged migration.
   ====================================================================== */
@layer themes {
  /* Family primitives: approved source palettes. */
  [data-ffr-theme="steel"] {
    --ffr-palette-950: #101820;
    --ffr-palette-900: #17324D;
    --ffr-palette-700: #365B73;
    --ffr-palette-500: #6F8797;
    --ffr-palette-accent: #C79A3B;
    --ffr-palette-100: #E5EAEE;
    --ffr-palette-accent-contrast: #101820;
  }

  [data-ffr-theme="navy"] {
    --ffr-palette-950: #0B0F14;
    --ffr-palette-900: #18222C;
    --ffr-palette-700: #0B2545;
    --ffr-palette-500: #1D4F7A;
    --ffr-palette-accent: #C7A65D;
    --ffr-palette-100: #E9EDF2;
    --ffr-palette-accent-contrast: #0B0F14;
  }

  [data-ffr-theme="cool-warm"] {
    --ffr-palette-950: #151A1F;
    --ffr-palette-900: #27343E;
    --ffr-palette-700: #244A6A;
    --ffr-palette-500: #C45A24;
    --ffr-palette-accent: #D89A2B;
    --ffr-palette-100: #F3F0EA;
    --ffr-palette-accent-contrast: #151A1F;
  }

  [data-ffr-theme="cool-collected"] {
    --ffr-palette-950: #0D1B1E;
    --ffr-palette-900: #123B3A;
    --ffr-palette-700: #1F6F6C;
    --ffr-palette-500: #5AA7A4;
    --ffr-palette-accent: #B8D8D6;
    --ffr-palette-100: #F1F7F6;
    --ffr-palette-accent-contrast: #0D1B1E;
  }

  [data-ffr-theme="cosmic"] {
    --ffr-palette-950: #11151D;
    --ffr-palette-900: #263142;
    --ffr-palette-700: #415675;
    --ffr-palette-500: #7B8FA7;
    --ffr-palette-accent: #C9CED6;
    --ffr-palette-100: #F3F4F6;
    --ffr-palette-accent-contrast: #11151D;
  }

  [data-ffr-theme="futuristic"] {
    --ffr-palette-950: #12171D;
    --ffr-palette-900: #25313B;
    --ffr-palette-700: #1E5A8A;
    --ffr-palette-500: #8796A5;
    --ffr-palette-accent: #D68A62;
    --ffr-palette-100: #ECE8E1;
    --ffr-palette-accent-contrast: #12171D;
  }

  [data-ffr-theme="refreshing-blue"] {
    --ffr-palette-950: #071C33;
    --ffr-palette-900: #123F73;
    --ffr-palette-700: #1976A8;
    --ffr-palette-500: #31AFC4;
    --ffr-palette-accent: #A7D8E6;
    --ffr-palette-100: #EFF7FA;
    --ffr-palette-accent-contrast: #071C33;
  }

  [data-ffr-theme="clean-modern"] {
    --ffr-palette-950: #102823;
    --ffr-palette-900: #1E5B4F;
    --ffr-palette-700: #2E7668;
    --ffr-palette-500: #3B9C89;
    --ffr-palette-accent: #6FC5B4;
    --ffr-palette-100: #E4F5F1;
    --ffr-palette-accent-contrast: #102823;
  }

  [data-ffr-theme="nature"] {
    --ffr-palette-950: #17261E;
    --ffr-palette-900: #31563C;
    --ffr-palette-700: #2C6F73;
    --ffr-palette-500: #6B95A6;
    --ffr-palette-accent: #A8C9CE;
    --ffr-palette-100: #EFF3EA;
    --ffr-palette-accent-contrast: #17261E;
  }

  [data-ffr-theme="corporate"] {
    --ffr-palette-950: #0B1526;
    --ffr-palette-900: #102A43;
    --ffr-palette-700: #174A7E;
    --ffr-palette-500: #2D7FC1;
    --ffr-palette-accent: #A63838;
    --ffr-palette-100: #EEF2F6;
    --ffr-palette-accent-contrast: #FFFFFF;
  }

  /* Shared family-derived roles. */
  [data-ffr-theme] {
    --ffr-accent: var(--ffr-palette-accent);
    --ffr-accent-hover: color-mix(in srgb, var(--ffr-palette-accent) 78%, var(--ffr-palette-950));
    --ffr-accent-contrast: var(--ffr-palette-accent-contrast);

    /* Stable elevated-surface roles. Popovers such as the Regional
       datepicker remain light for scanability in all site tones. */
    --ffr-elevated-text: var(--ffr-palette-950);
    --ffr-elevated-text-muted: var(--ffr-palette-900);
    --ffr-elevated-border: rgba(15,23,42,.14);
    --ffr-elevated-surface-alt: color-mix(in srgb, var(--ffr-palette-950) 7%, #FFFFFF);
    --ffr-elevated-surface-hover: color-mix(in srgb, var(--ffr-palette-950) 11%, #FFFFFF);
    --ffr-elevated-heading-bg: var(--ffr-palette-900);
    --ffr-elevated-heading-text: #FFFFFF;
    --ffr-elevated-selected-bg: var(--ffr-palette-900);
    --ffr-elevated-selected-text: #FFFFFF;

    /* Shell/component aliases. Values resolve from the active tone below,
       allowing shell CSS to consume the unified contract only. */
    --ffr-header-text-muted: var(--ffr-text-muted);
    --ffr-header-border: var(--ffr-border-default);
    --ffr-header-border-strong: var(--ffr-border-strong);
    --ffr-header-surface-strong: var(--ffr-bg-surface-strong);
    --ffr-header-surface-soft: var(--ffr-bg-surface-soft);
    --ffr-header-link: var(--ffr-link);
    --ffr-header-link-hover: var(--ffr-link-hover);
    --ffr-header-button-bg: var(--ffr-button-primary-bg);
    --ffr-header-button-text: var(--ffr-button-primary-text);
    --ffr-header-button-hover-bg: var(--ffr-button-primary-hover-bg);
    --ffr-header-button-hover-text: var(--ffr-button-primary-hover-text);
    --ffr-header-input-bg: var(--ffr-form-control-bg);
    --ffr-header-input-text: var(--ffr-form-control-text);
    --ffr-header-input-border: var(--ffr-border-strong);
    --ffr-header-focus: var(--ffr-focus-ring);

    --ffr-nav-border: var(--ffr-border-default);
    --ffr-nav-surface-soft: var(--ffr-bg-surface-soft);
    --ffr-nav-link-hover: var(--ffr-link-hover);
    --ffr-nav-dropdown-bg: #FFFFFF;
    --ffr-nav-dropdown-text: var(--ffr-palette-950);
    --ffr-nav-dropdown-hover: var(--ffr-palette-100);
    --ffr-nav-dropdown-link-hover: var(--ffr-palette-700);
    --ffr-nav-dropdown-border: rgba(15,23,42,.12);

    --ffr-footer-text-muted: var(--ffr-text-muted);
    --ffr-footer-border: var(--ffr-border-default);
    --ffr-footer-link: var(--ffr-link);
    --ffr-footer-link-hover: var(--ffr-link-hover);
    --ffr-footer-accent: var(--ffr-accent);
  }

  /* Light tone semantic environment. */
  [data-ffr-theme][data-ffr-tone="light"] {
    --ffr-bg-page: var(--ffr-palette-100);
    --ffr-bg-surface: #FFFFFF;
    --ffr-bg-surface-alt: color-mix(in srgb, var(--ffr-palette-950) 5%, transparent);
    --ffr-bg-surface-strong: color-mix(in srgb, var(--ffr-palette-950) 10%, transparent);
    --ffr-bg-surface-soft: color-mix(in srgb, var(--ffr-palette-950) 3.5%, transparent);
    --ffr-bg-elevated: #FFFFFF;
    --ffr-bg-inverse: var(--ffr-palette-950);
    --ffr-bg-overlay: color-mix(in srgb, var(--ffr-palette-950) 88%, transparent);

    --ffr-text-primary: var(--ffr-palette-950);
    --ffr-text-secondary: var(--ffr-palette-900);
    --ffr-text-muted: var(--ffr-palette-900);
    --ffr-text-inverse: #FFFFFF;
    --ffr-text-disabled: var(--ffr-palette-500);

    --ffr-border-default: var(--ffr-palette-500);
    --ffr-border-subtle: color-mix(in srgb, var(--ffr-palette-950) 12%, transparent);
    --ffr-border-strong: var(--ffr-palette-700);

    --ffr-link: var(--ffr-palette-700);
    --ffr-link-hover: var(--ffr-palette-900);
    --ffr-link-active: var(--ffr-palette-950);
    --ffr-link-visited: var(--ffr-palette-700);

    --ffr-focus-ring: var(--ffr-palette-700);
    --ffr-focus-offset-color: #FFFFFF;
    --ffr-selection-bg: var(--ffr-palette-700);
    --ffr-selection-text: #FFFFFF;
    --ffr-status-error-inline-text: #7A2020;

    --ffr-button-primary-bg: var(--ffr-palette-700);
    --ffr-button-primary-text: #FFFFFF;
    --ffr-button-primary-hover-bg: var(--ffr-palette-900);
    --ffr-button-primary-hover-text: #FFFFFF;
    --ffr-button-secondary-bg: #FFFFFF;
    --ffr-button-secondary-text: var(--ffr-palette-700);
    --ffr-button-secondary-border: var(--ffr-palette-500);
    --ffr-button-secondary-hover-bg: color-mix(in srgb, var(--ffr-palette-950) 7%, #FFFFFF);
    --ffr-button-disabled-bg: color-mix(in srgb, var(--ffr-palette-950) 6%, #FFFFFF);
    --ffr-button-disabled-text: var(--ffr-palette-500);

    --ffr-card-bg: #FFFFFF;
    --ffr-card-text: var(--ffr-palette-950);
    --ffr-card-border: var(--ffr-palette-500);

    --ffr-header-bg: var(--ffr-palette-100);
    --ffr-header-bg-secondary: #FFFFFF;
    --ffr-header-shadow: 0 14px 30px rgba(15,23,42,.12);
    --ffr-header-text: var(--ffr-palette-950);
    /* Preserve the established light-shell translucent neutral exactly.
       Site content surfaces remain family-derived through --ffr-bg-* tokens. */
    --ffr-header-surface-strong: rgba(16,24,32,.10);
    --ffr-header-surface-soft: rgba(16,24,32,.035);
    --ffr-nav-bg: rgba(255,255,255,.55);
    --ffr-nav-text: var(--ffr-palette-950);
    --ffr-nav-surface-soft: rgba(16,24,32,.035);
    --ffr-nav-hover-bg: rgba(16,24,32,.08);
    --ffr-footer-bg: var(--ffr-palette-100);
    --ffr-footer-bg-secondary: #FFFFFF;
    --ffr-footer-text: var(--ffr-palette-950);

    --ffr-form-control-bg: #FFFFFF;
    --ffr-form-control-text: var(--ffr-palette-950);
    --ffr-form-control-placeholder: var(--ffr-palette-900);
    --ffr-form-control-border: var(--ffr-palette-500);
    --ffr-form-control-focus: var(--ffr-focus-ring);
    --ffr-form-control-disabled-bg: color-mix(in srgb, var(--ffr-palette-950) 6%, #FFFFFF);
    --ffr-form-control-disabled-text: var(--ffr-palette-500);

    --ffr-tab-bg: color-mix(in srgb, var(--ffr-palette-950) 6%, #FFFFFF);
    --ffr-tab-text: var(--ffr-palette-700);
    --ffr-accordion-bg: #FFFFFF;
    --ffr-accordion-text: var(--ffr-palette-950);
    --ffr-table-border: var(--ffr-palette-500);
    --ffr-tooltip-bg: var(--ffr-palette-950);
    --ffr-tooltip-text: #FFFFFF;

    --ffr-skip-link-bg: #FFFFFF;
    --ffr-skip-link-text: var(--ffr-palette-950);
    --ffr-skip-link-border: var(--ffr-palette-700);
  }

  /* Medium tone semantic environment. */
  [data-ffr-theme][data-ffr-tone="medium"] {
    /* Content environment: intentionally light/muted even when the shell
       uses the Medium family treatment. This keeps blueprint/content
       surfaces readable and modern without changing shell identity. */
    --ffr-bg-page: color-mix(in srgb, var(--ffr-palette-100) 60%, #FFFFFF);
    --ffr-bg-surface: #FFFFFF;
    --ffr-bg-surface-alt: color-mix(in srgb, var(--ffr-palette-100) 62%, #FFFFFF);
    --ffr-bg-surface-strong: color-mix(in srgb, var(--ffr-palette-950) 10%, transparent);
    --ffr-bg-surface-soft: color-mix(in srgb, var(--ffr-palette-950) 4%, transparent);
    --ffr-bg-elevated: #FFFFFF;
    --ffr-bg-inverse: var(--ffr-palette-950);
    --ffr-bg-overlay: color-mix(in srgb, var(--ffr-palette-950) 88%, transparent);

    --ffr-text-primary: var(--ffr-palette-950);
    --ffr-text-secondary: var(--ffr-palette-900);
    --ffr-text-muted: var(--ffr-palette-900);
    --ffr-text-inverse: #FFFFFF;
    --ffr-text-disabled: var(--ffr-palette-500);

    --ffr-border-default: var(--ffr-palette-500);
    --ffr-border-subtle: color-mix(in srgb, var(--ffr-palette-950) 12%, transparent);
    --ffr-border-strong: var(--ffr-palette-700);

    --ffr-link: var(--ffr-palette-700);
    --ffr-link-hover: var(--ffr-palette-900);
    --ffr-link-active: var(--ffr-palette-950);
    --ffr-link-visited: var(--ffr-palette-700);

    --ffr-focus-ring: var(--ffr-palette-700);
    --ffr-focus-offset-color: #FFFFFF;
    --ffr-selection-bg: var(--ffr-palette-700);
    --ffr-selection-text: #FFFFFF;
    --ffr-status-error-inline-text: #7A2020;

    --ffr-button-primary-bg: var(--ffr-palette-700);
    --ffr-button-primary-text: #FFFFFF;
    --ffr-button-primary-hover-bg: var(--ffr-palette-900);
    --ffr-button-primary-hover-text: #FFFFFF;
    --ffr-button-secondary-bg: #FFFFFF;
    --ffr-button-secondary-text: var(--ffr-palette-700);
    --ffr-button-secondary-border: var(--ffr-palette-500);
    --ffr-button-secondary-hover-bg: color-mix(in srgb, var(--ffr-palette-100) 70%, #FFFFFF);
    --ffr-button-disabled-bg: color-mix(in srgb, var(--ffr-palette-950) 6%, #FFFFFF);
    --ffr-button-disabled-text: var(--ffr-palette-500);

    --ffr-card-bg: #FFFFFF;
    --ffr-card-text: var(--ffr-palette-950);
    --ffr-card-border: var(--ffr-palette-500);

    /* Shell preservation contract — values below intentionally retain the
       pre-change Medium header/navigation/footer appearance. */
    --ffr-header-bg: var(--ffr-palette-700);
    --ffr-header-bg-secondary: var(--ffr-palette-900);
    --ffr-header-shadow: 0 16px 36px rgba(2,8,23,.24);
    --ffr-header-text: #FFFFFF;
    --ffr-header-text-muted: var(--ffr-palette-100);
    --ffr-header-border: rgba(255,255,255,.26);
    --ffr-header-border-strong: rgba(255,255,255,.42);
    --ffr-header-surface-strong: rgba(255,255,255,.17);
    --ffr-header-surface-soft: rgba(255,255,255,.07);
    --ffr-header-link: #FFFFFF;
    --ffr-header-link-hover: #FFFFFF;
    --ffr-header-button-bg: var(--ffr-palette-accent);
    --ffr-header-button-text: var(--ffr-palette-accent-contrast);
    --ffr-header-button-hover-bg: var(--ffr-palette-100);
    --ffr-header-button-hover-text: var(--ffr-palette-950);
    --ffr-header-input-bg: #FFFFFF;
    --ffr-header-input-text: var(--ffr-palette-950);
    --ffr-header-input-border: rgba(255,255,255,.42);
    --ffr-header-focus: #FFFFFF;

    --ffr-nav-bg: rgba(0,0,0,.20);
    --ffr-nav-text: #FFFFFF;
    --ffr-nav-border: rgba(255,255,255,.26);
    --ffr-nav-surface-soft: rgba(255,255,255,.07);
    --ffr-nav-link-hover: #FFFFFF;
    --ffr-nav-hover-bg: rgba(255,255,255,.17);
    --ffr-nav-dropdown-bg: #FFFFFF;
    --ffr-nav-dropdown-text: var(--ffr-palette-950);
    --ffr-nav-dropdown-hover: var(--ffr-palette-100);
    --ffr-nav-dropdown-link-hover: var(--ffr-palette-700);
    --ffr-nav-dropdown-border: rgba(15,23,42,.12);

    --ffr-footer-bg: var(--ffr-palette-700);
    --ffr-footer-bg-secondary: var(--ffr-palette-900);
    --ffr-footer-text: #FFFFFF;
    --ffr-footer-text-muted: var(--ffr-palette-100);
    --ffr-footer-border: rgba(255,255,255,.26);
    --ffr-footer-link: #FFFFFF;
    --ffr-footer-link-hover: #FFFFFF;
    --ffr-footer-accent: var(--ffr-palette-accent);

    --ffr-form-control-bg: #FFFFFF;
    --ffr-form-control-text: var(--ffr-palette-950);
    --ffr-form-control-placeholder: var(--ffr-palette-900);
    --ffr-form-control-border: var(--ffr-palette-500);
    --ffr-form-control-focus: var(--ffr-palette-700);
    --ffr-form-control-disabled-bg: color-mix(in srgb, var(--ffr-palette-950) 6%, #FFFFFF);
    --ffr-form-control-disabled-text: var(--ffr-palette-500);

    --ffr-tab-bg: color-mix(in srgb, var(--ffr-palette-100) 70%, #FFFFFF);
    --ffr-tab-text: var(--ffr-palette-700);
    --ffr-accordion-bg: #FFFFFF;
    --ffr-accordion-text: var(--ffr-palette-950);
    --ffr-table-border: var(--ffr-palette-500);
    --ffr-tooltip-bg: var(--ffr-palette-950);
    --ffr-tooltip-text: #FFFFFF;

    --ffr-skip-link-bg: #FFFFFF;
    --ffr-skip-link-text: var(--ffr-palette-950);
    --ffr-skip-link-border: var(--ffr-palette-700);
  }

  /* Dark tone semantic environment. */
  [data-ffr-theme][data-ffr-tone="dark"] {
    /* Content environment: near-white theme tint paired with the existing
       Dark shell. The Dark label now describes the shell treatment rather
       than forcing dark-mode body/content surfaces. */
    --ffr-bg-page: color-mix(in srgb, var(--ffr-palette-100) 82%, #FFFFFF);
    --ffr-bg-surface: #FFFFFF;
    --ffr-bg-surface-alt: color-mix(in srgb, var(--ffr-palette-100) 78%, #FFFFFF);
    --ffr-bg-surface-strong: color-mix(in srgb, var(--ffr-palette-950) 11%, transparent);
    --ffr-bg-surface-soft: color-mix(in srgb, var(--ffr-palette-950) 4.5%, transparent);
    --ffr-bg-elevated: #FFFFFF;
    --ffr-bg-inverse: var(--ffr-palette-950);
    --ffr-bg-overlay: color-mix(in srgb, var(--ffr-palette-950) 88%, transparent);

    --ffr-text-primary: var(--ffr-palette-950);
    --ffr-text-secondary: var(--ffr-palette-900);
    --ffr-text-muted: var(--ffr-palette-900);
    --ffr-text-inverse: #FFFFFF;
    --ffr-text-disabled: var(--ffr-palette-500);

    --ffr-border-default: var(--ffr-palette-500);
    --ffr-border-subtle: color-mix(in srgb, var(--ffr-palette-950) 13%, transparent);
    --ffr-border-strong: var(--ffr-palette-700);

    --ffr-link: var(--ffr-palette-700);
    --ffr-link-hover: var(--ffr-palette-900);
    --ffr-link-active: var(--ffr-palette-950);
    --ffr-link-visited: var(--ffr-palette-700);

    --ffr-focus-ring: var(--ffr-palette-700);
    --ffr-focus-offset-color: #FFFFFF;
    --ffr-selection-bg: var(--ffr-palette-700);
    --ffr-selection-text: #FFFFFF;
    --ffr-status-error-inline-text: #7A2020;

    --ffr-button-primary-bg: var(--ffr-palette-700);
    --ffr-button-primary-text: #FFFFFF;
    --ffr-button-primary-hover-bg: var(--ffr-palette-900);
    --ffr-button-primary-hover-text: #FFFFFF;
    --ffr-button-secondary-bg: #FFFFFF;
    --ffr-button-secondary-text: var(--ffr-palette-700);
    --ffr-button-secondary-border: var(--ffr-palette-500);
    --ffr-button-secondary-hover-bg: color-mix(in srgb, var(--ffr-palette-100) 84%, #FFFFFF);
    --ffr-button-disabled-bg: color-mix(in srgb, var(--ffr-palette-950) 6%, #FFFFFF);
    --ffr-button-disabled-text: var(--ffr-palette-500);

    --ffr-card-bg: #FFFFFF;
    --ffr-card-text: var(--ffr-palette-950);
    --ffr-card-border: var(--ffr-palette-500);

    /* Shell preservation contract — values below intentionally retain the
       pre-change Dark header/navigation/footer appearance. */
    --ffr-header-bg: var(--ffr-palette-950);
    --ffr-header-bg-secondary: var(--ffr-palette-900);
    --ffr-header-shadow: 0 18px 42px rgba(2,8,23,.30);
    --ffr-header-text: #FFFFFF;
    --ffr-header-text-muted: var(--ffr-palette-100);
    --ffr-header-border: rgba(255,255,255,.18);
    --ffr-header-border-strong: rgba(255,255,255,.30);
    --ffr-header-surface-strong: rgba(255,255,255,.17);
    --ffr-header-surface-soft: rgba(255,255,255,.07);
    --ffr-header-link: #FFFFFF;
    --ffr-header-link-hover: #FFFFFF;
    --ffr-header-button-bg: var(--ffr-palette-accent);
    --ffr-header-button-text: var(--ffr-palette-accent-contrast);
    --ffr-header-button-hover-bg: var(--ffr-palette-100);
    --ffr-header-button-hover-text: var(--ffr-palette-950);
    --ffr-header-input-bg: #FFFFFF;
    --ffr-header-input-text: var(--ffr-palette-950);
    --ffr-header-input-border: rgba(255,255,255,.30);
    --ffr-header-focus: #FFFFFF;

    --ffr-nav-bg: rgba(0,0,0,.28);
    --ffr-nav-text: #FFFFFF;
    --ffr-nav-border: rgba(255,255,255,.18);
    --ffr-nav-surface-soft: rgba(255,255,255,.07);
    --ffr-nav-link-hover: #FFFFFF;
    --ffr-nav-hover-bg: rgba(255,255,255,.14);
    --ffr-nav-dropdown-bg: #FFFFFF;
    --ffr-nav-dropdown-text: var(--ffr-palette-950);
    --ffr-nav-dropdown-hover: var(--ffr-palette-100);
    --ffr-nav-dropdown-link-hover: var(--ffr-palette-700);
    --ffr-nav-dropdown-border: rgba(15,23,42,.12);

    --ffr-footer-bg: var(--ffr-palette-950);
    --ffr-footer-bg-secondary: var(--ffr-palette-900);
    --ffr-footer-text: #FFFFFF;
    --ffr-footer-text-muted: var(--ffr-palette-100);
    --ffr-footer-border: rgba(255,255,255,.18);
    --ffr-footer-link: #FFFFFF;
    --ffr-footer-link-hover: #FFFFFF;
    --ffr-footer-accent: var(--ffr-palette-accent);

    --ffr-form-control-bg: #FFFFFF;
    --ffr-form-control-text: var(--ffr-palette-950);
    --ffr-form-control-placeholder: var(--ffr-palette-900);
    --ffr-form-control-border: var(--ffr-palette-500);
    --ffr-form-control-focus: var(--ffr-palette-700);
    --ffr-form-control-disabled-bg: color-mix(in srgb, var(--ffr-palette-950) 6%, #FFFFFF);
    --ffr-form-control-disabled-text: var(--ffr-palette-500);

    --ffr-tab-bg: color-mix(in srgb, var(--ffr-palette-100) 84%, #FFFFFF);
    --ffr-tab-text: var(--ffr-palette-700);
    --ffr-accordion-bg: #FFFFFF;
    --ffr-accordion-text: var(--ffr-palette-950);
    --ffr-table-border: var(--ffr-palette-500);
    --ffr-tooltip-bg: var(--ffr-palette-950);
    --ffr-tooltip-text: #FFFFFF;

    --ffr-skip-link-bg: #FFFFFF;
    --ffr-skip-link-text: var(--ffr-palette-950);
    --ffr-skip-link-border: var(--ffr-palette-700);
  }

  html[data-ffr-tone="light"] { color-scheme: light; }
  html[data-ffr-tone="medium"],
  html[data-ffr-tone="dark"] { color-scheme: dark; }
}