@layer brocade.primitives,
       brocade.semantic,
       brocade.modes.color-scheme,
       brocade.modes.transparency,
       brocade.modes.motion,
       brocade.modes.contrast;

/**
 * Brocade Raw Primitives Index
 * 
 * Imports all raw primitive token files.
 * This is the complete set of foundational values.
 */

/**
 * Brocade Color Primitives
 * 
 * Raw color values using OKLCH for perceptual uniformity.
 * Follows the recommended 50-950 scale where lower numbers are lighter.
 */

@layer brocade.primitives {
  :root {
    /* ========================================================================
       Neutral Scale
       ======================================================================== */
  
    --brocade-raw-color-neutral-50: oklch(99.7% 0.004 91.4);
    --brocade-raw-color-neutral-100: oklch(97.7% 0.009 84.6);
    --brocade-raw-color-neutral-200: oklch(94.5% 0.016 82.8);
    --brocade-raw-color-neutral-300: oklch(88.2% 0.023 80.7);
    --brocade-raw-color-neutral-400: oklch(82.2% 0.029 79.4);
    --brocade-raw-color-neutral-500: oklch(66.0% 0.026 75.9);
    --brocade-raw-color-neutral-600: oklch(49.8% 0.023 72.3);
    --brocade-raw-color-neutral-700: oklch(43.5% 0.019 71.7);
    --brocade-raw-color-neutral-800: oklch(37.2% 0.016 71.0);
    --brocade-raw-color-neutral-900: oklch(26.5% 0.010 68.6);
    --brocade-raw-color-neutral-950: oklch(21.1% 0.007 67.4);
  
    /* ========================================================================
       Blue Scale (Primary Brand)
       ======================================================================== */
  
    --brocade-raw-color-blue-50: oklch(94.2% 0.018 259.2);
    --brocade-raw-color-blue-100: oklch(89.8% 0.023 259.2);
    --brocade-raw-color-blue-200: oklch(81.2% 0.035 259.2);
    --brocade-raw-color-blue-300: oklch(72.5% 0.046 259.2);
    --brocade-raw-color-blue-400: oklch(63.9% 0.057 259.2);
    --brocade-raw-color-blue-500: oklch(55.2% 0.068 259.2);
    --brocade-raw-color-blue-600: oklch(46.6% 0.080 259.2);
    --brocade-raw-color-blue-700: oklch(38.9% 0.066 259.2);
    --brocade-raw-color-blue-800: oklch(31.3% 0.052 259.2);
    --brocade-raw-color-blue-900: oklch(23.6% 0.038 259.2);
    --brocade-raw-color-blue-950: oklch(19.8% 0.031 259.2);
  
    /* ========================================================================
       Green Scale (Success)
       ======================================================================== */
  
    --brocade-raw-color-green-50: oklch(94.1% 0.016 167.3);
    --brocade-raw-color-green-100: oklch(89.6% 0.020 167.3);
    --brocade-raw-color-green-200: oklch(80.7% 0.027 167.3);
    --brocade-raw-color-green-300: oklch(71.8% 0.035 167.3);
    --brocade-raw-color-green-400: oklch(62.9% 0.042 167.3);
    --brocade-raw-color-green-500: oklch(54.0% 0.050 167.3);
    --brocade-raw-color-green-600: oklch(45.1% 0.058 167.3);
    --brocade-raw-color-green-700: oklch(37.8% 0.048 167.3);
    --brocade-raw-color-green-800: oklch(30.6% 0.038 167.3);
    --brocade-raw-color-green-900: oklch(23.3% 0.027 167.3);
    --brocade-raw-color-green-950: oklch(19.6% 0.022 167.3);
  
    /* ========================================================================
       Red Scale (Danger/Error)
       ======================================================================== */
  
    --brocade-raw-color-red-50: oklch(94.1% 0.021 30.4);
    --brocade-raw-color-red-100: oklch(89.8% 0.029 30.4);
    --brocade-raw-color-red-200: oklch(81.1% 0.047 30.4);
    --brocade-raw-color-red-300: oklch(72.4% 0.064 30.4);
    --brocade-raw-color-red-400: oklch(63.7% 0.081 30.4);
    --brocade-raw-color-red-500: oklch(55.0% 0.098 30.4);
    --brocade-raw-color-red-600: oklch(46.3% 0.116 30.4);
    --brocade-raw-color-red-700: oklch(38.2% 0.099 30.6);
    --brocade-raw-color-red-800: oklch(30.8% 0.076 30.6);
    --brocade-raw-color-red-900: oklch(23.4% 0.053 30.6);
    --brocade-raw-color-red-950: oklch(19.7% 0.041 30.6);
  
    /* ========================================================================
       Orange Scale (Warning)
       ======================================================================== */
  
    --brocade-raw-color-orange-50: oklch(94.4% 0.018 77.0);
    --brocade-raw-color-orange-100: oklch(90.3% 0.025 77.0);
    --brocade-raw-color-orange-200: oklch(82.1% 0.038 77.0);
    --brocade-raw-color-orange-300: oklch(74.0% 0.051 77.0);
    --brocade-raw-color-orange-400: oklch(65.8% 0.064 77.0);
    --brocade-raw-color-orange-500: oklch(57.6% 0.077 77.0);
    --brocade-raw-color-orange-600: oklch(49.4% 0.090 77.0);
    --brocade-raw-color-orange-700: oklch(41.1% 0.074 77.0);
    --brocade-raw-color-orange-800: oklch(32.7% 0.058 77.0);
    --brocade-raw-color-orange-900: oklch(24.4% 0.043 77.0);
    --brocade-raw-color-orange-950: oklch(20.2% 0.035 77.0);
  
    /* ========================================================================
       Cyan Scale (Info)
       ======================================================================== */
  
    --brocade-raw-color-cyan-50: oklch(94.3% 0.016 209.1);
    --brocade-raw-color-cyan-100: oklch(90.1% 0.020 209.1);
    --brocade-raw-color-cyan-200: oklch(81.7% 0.028 209.1);
    --brocade-raw-color-cyan-300: oklch(73.2% 0.036 209.1);
    --brocade-raw-color-cyan-400: oklch(64.8% 0.045 209.1);
    --brocade-raw-color-cyan-500: oklch(56.4% 0.053 209.1);
    --brocade-raw-color-cyan-600: oklch(48.0% 0.061 209.1);
    --brocade-raw-color-cyan-700: oklch(40.0% 0.050 209.1);
    --brocade-raw-color-cyan-800: oklch(32.0% 0.040 209.1);
    --brocade-raw-color-cyan-900: oklch(24.0% 0.029 209.1);
    --brocade-raw-color-cyan-950: oklch(20.0% 0.024 209.1);
  
    /* ========================================================================
       Special Values
       ======================================================================== */
  
    --brocade-raw-color-white: oklch(100% 0 0);
    --brocade-raw-color-black: oklch(0% 0 0);

    /* sirrobert.net — violet scale and background washes */
    --brocade-raw-color-violet-50: oklch(94.1% 0.019 292.9);
    --brocade-raw-color-violet-100: oklch(89.6% 0.026 292.9);
    --brocade-raw-color-violet-200: oklch(80.7% 0.040 292.9);
    --brocade-raw-color-violet-300: oklch(71.8% 0.054 292.9);
    --brocade-raw-color-violet-400: oklch(62.9% 0.068 292.9);
    --brocade-raw-color-violet-500: oklch(54.0% 0.082 292.9);
    --brocade-raw-color-violet-600: oklch(45.1% 0.096 292.9);
    --brocade-raw-color-violet-700: oklch(37.8% 0.080 292.9);
    --brocade-raw-color-violet-800: oklch(30.6% 0.063 292.9);
    --brocade-raw-color-violet-900: oklch(23.3% 0.046 292.9);
    --brocade-raw-color-violet-950: oklch(19.6% 0.037 292.9);
    --brocade-raw-color-wash-warm: oklch(99.1% 0.011 89.7);
    --brocade-raw-color-wash-cool: oklch(94.5% 0.013 321.9);
    --brocade-raw-color-wash-warm-dark: oklch(24.3% 0.012 67.2);
    --brocade-raw-color-wash-cool-dark: oklch(24.0% 0.018 310.0);
  
    /* ========================================================================
       Opacity Values (0-100 scale, normalized to 0-1)
       ======================================================================== */
  
    --brocade-raw-opacity-0: 0;
    --brocade-raw-opacity-5: 0.05;
    --brocade-raw-opacity-10: 0.1;
    --brocade-raw-opacity-25: 0.25;
    --brocade-raw-opacity-50: 0.5;
    --brocade-raw-opacity-75: 0.75;
    --brocade-raw-opacity-100: 1;
  }
}

/**
 * Brocade Spacing Primitives
 * 
 * Raw spacing values using rem units for accessibility.
 * Follows the required numeric scale: 0, 1, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128
 * Assumes 1rem = 16px base font size.
 */

@layer brocade.primitives {
  :root {
    /* ========================================================================
       Positive Spacing Scale
       ======================================================================== */
  
    --brocade-raw-space-0: 0;
    --brocade-raw-space-1: 0.0625rem;    /* 1px */
    --brocade-raw-space-2: 0.125rem;     /* 2px */
    --brocade-raw-space-4: 0.25rem;      /* 4px */
    --brocade-raw-space-8: 0.5rem;       /* 8px */
    --brocade-raw-space-12: 0.75rem;     /* 12px */
    --brocade-raw-space-16: 1rem;        /* 16px */
    --brocade-raw-space-20: 1.25rem;     /* 20px */
    --brocade-raw-space-24: 1.5rem;      /* 24px */
    --brocade-raw-space-32: 2rem;        /* 32px */
    --brocade-raw-space-40: 2.5rem;      /* 40px */
    --brocade-raw-space-48: 3rem;        /* 48px */
    --brocade-raw-space-64: 4rem;        /* 64px */
    --brocade-raw-space-80: 5rem;        /* 80px */
    --brocade-raw-space-96: 6rem;        /* 96px */
    --brocade-raw-space-128: 8rem;       /* 128px */
  
    /* ========================================================================
       Negative Spacing Scale (for negative margins)
       ======================================================================== */
  
    --brocade-raw-space-negative-1: -0.0625rem;
    --brocade-raw-space-negative-2: -0.125rem;
    --brocade-raw-space-negative-4: -0.25rem;
    --brocade-raw-space-negative-8: -0.5rem;
    --brocade-raw-space-negative-12: -0.75rem;
    --brocade-raw-space-negative-16: -1rem;
    --brocade-raw-space-negative-20: -1.25rem;
    --brocade-raw-space-negative-24: -1.5rem;
    --brocade-raw-space-negative-32: -2rem;
    --brocade-raw-space-negative-40: -2.5rem;
    --brocade-raw-space-negative-48: -3rem;
    --brocade-raw-space-negative-64: -4rem;
    --brocade-raw-space-negative-80: -5rem;
    --brocade-raw-space-negative-96: -6rem;
    --brocade-raw-space-negative-128: -8rem;

    /* ========================================================================
       Fluid Spacing Scale (viewport-responsive, clamp-based)
       Optional sibling to the discrete scale. Uniform numbered tier
       (1xl, 2xl, 3xl). Both clamp bounds are rem-anchored for accessibility;
       the middle term scales with the viewport.
       ======================================================================== */

    --brocade-raw-space-fluid-sm:  clamp(1rem,   2vw, 1.5rem);
    --brocade-raw-space-fluid-md:  clamp(1.5rem, 3vw, 2.5rem);
    --brocade-raw-space-fluid-lg:  clamp(2rem,   4vw, 3rem);
    --brocade-raw-space-fluid-1xl: clamp(3rem,   6vw, 5rem);
    --brocade-raw-space-fluid-2xl: clamp(4rem,   7vw, 6rem);
    --brocade-raw-space-fluid-3xl: clamp(4rem,   8vw, 8rem);
  }
}

/**
 * Brocade Typography Primitives
 * 
 * Raw typography values using rem units for font sizes.
 * Includes font families, sizes, weights, line heights, and letter spacing.
 */

@layer brocade.primitives {
  :root {
    /* ========================================================================
       Font Families
       ======================================================================== */
  
    --brocade-raw-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --brocade-raw-font-serif: 'Spectral', Georgia, 'Times New Roman', serif;
    --brocade-raw-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  
    /* ========================================================================
       Font Sizes (rem units)
       ======================================================================== */
  
    --brocade-raw-font-size-10: 0.625rem;    /* 10px */
    --brocade-raw-font-size-12: 0.75rem;     /* 12px */
    --brocade-raw-font-size-14: 0.875rem;    /* 14px */
    --brocade-raw-font-size-16: 1rem;        /* 16px */
    --brocade-raw-font-size-18: 1.125rem;    /* 18px */
    --brocade-raw-font-size-20: 1.25rem;     /* 20px */
    --brocade-raw-font-size-24: 1.5rem;      /* 24px */
    --brocade-raw-font-size-30: 1.875rem;    /* 30px */
    --brocade-raw-font-size-36: 2.25rem;     /* 36px */
    --brocade-raw-font-size-48: 3rem;        /* 48px */
    --brocade-raw-font-size-60: 3.75rem;     /* 60px */
    --brocade-raw-font-size-72: 4.5rem;      /* 72px */
  
    /* ========================================================================
       Font Weights (numeric)
       ======================================================================== */
  
    --brocade-raw-font-weight-100: 100;
    --brocade-raw-font-weight-200: 200;
    --brocade-raw-font-weight-300: 300;
    --brocade-raw-font-weight-400: 400;
    --brocade-raw-font-weight-500: 500;
    --brocade-raw-font-weight-600: 600;
    --brocade-raw-font-weight-700: 700;
    --brocade-raw-font-weight-800: 800;
    --brocade-raw-font-weight-900: 900;
  
    /* Named weights */
    --brocade-raw-font-weight-light: 300;
    --brocade-raw-font-weight-regular: 400;
    --brocade-raw-font-weight-medium: 500;
    --brocade-raw-font-weight-semibold: 600;
    --brocade-raw-font-weight-bold: 700;
  
    /* ========================================================================
       Line Heights (unitless multipliers)
       ======================================================================== */
  
    --brocade-raw-line-height-1: 1;
    --brocade-raw-line-height-1-25: 1.25;
    --brocade-raw-line-height-1-5: 1.5;
    --brocade-raw-line-height-1-75: 1.75;
    --brocade-raw-line-height-2: 2;
  
    /* Named line heights */
    --brocade-raw-line-height-tight: 1.25;
    --brocade-raw-line-height-normal: 1.5;
    --brocade-raw-line-height-loose: 1.75;
  
    /* ========================================================================
       Letter Spacing (em units)
       ======================================================================== */
  
    --brocade-raw-letter-spacing-tight: -0.025em;
    --brocade-raw-letter-spacing-normal: 0em;
    --brocade-raw-letter-spacing-wide: 0.025em;
    --brocade-raw-letter-spacing-wider: 0.05em;
    --brocade-raw-letter-spacing-widest: 0.1em;
  }
}

/**
 * Brocade Border Primitives
 * 
 * Raw border values for radii and widths.
 * Radii use rem units, widths use px for precision.
 */

@layer brocade.primitives {
  :root {
    /* ========================================================================
       Border Radii
       ======================================================================== */
  
    --brocade-raw-radius-0: 0;
    --brocade-raw-radius-2: 0.125rem;      /* 2px */
    --brocade-raw-radius-4: 0.25rem;       /* 4px */
    --brocade-raw-radius-6: 0.375rem;      /* 6px */
    --brocade-raw-radius-8: 0.5rem;        /* 8px */
    --brocade-raw-radius-12: 0.75rem;      /* 12px */
    --brocade-raw-radius-16: 1rem;         /* 16px */
    --brocade-raw-radius-24: 1.5rem;       /* 24px */
    --brocade-raw-radius-full: 9999px;
  
    /* ========================================================================
       Border Widths
       ======================================================================== */
  
    --brocade-raw-border-width-0: 0;
    --brocade-raw-border-width-1: 1px;
    --brocade-raw-border-width-2: 2px;
    --brocade-raw-border-width-4: 4px;
    --brocade-raw-border-width-8: 8px;
  
    /* ========================================================================
       Focus Ring Widths
       ======================================================================== */
  
    --brocade-raw-focus-ring-width-2: 2px;
    --brocade-raw-focus-ring-width-3: 3px;
    --brocade-raw-focus-ring-width-4: 4px;
  
    /* ========================================================================
       Focus Ring Offsets
       ======================================================================== */
  
    --brocade-raw-focus-ring-offset-0: 0;
    --brocade-raw-focus-ring-offset-1: 1px;
    --brocade-raw-focus-ring-offset-2: 2px;
    --brocade-raw-focus-ring-offset-4: 4px;
  }
}

/**
 * Brocade Shadow Primitives
 * 
 * Raw shadow values for elevation and depth.
 * Uses semi-transparent black for universal compatibility.
 */

@layer brocade.primitives {
  :root {
    /* ========================================================================
       Box Shadows
       ======================================================================== */
  
    --brocade-raw-shadow-none: none;
  
    --brocade-raw-shadow-sm: 
      0 1px 2px 0 oklch(0% 0 0 / 0.05);
  
    --brocade-raw-shadow-md: 
      0 4px 6px -1px oklch(0% 0 0 / 0.1),
      0 2px 4px -2px oklch(0% 0 0 / 0.1);
  
    --brocade-raw-shadow-lg: 
      0 10px 15px -3px oklch(0% 0 0 / 0.1),
      0 4px 6px -4px oklch(0% 0 0 / 0.1);
  
    --brocade-raw-shadow-xl: 
      0 20px 25px -5px oklch(0% 0 0 / 0.1),
      0 8px 10px -6px oklch(0% 0 0 / 0.1);
  
    --brocade-raw-shadow-2xl: 
      0 25px 50px -12px oklch(0% 0 0 / 0.25);
  
    /* ========================================================================
       Inner Shadows
       ======================================================================== */
  
    --brocade-raw-shadow-inner: 
      inset 0 2px 4px 0 oklch(0% 0 0 / 0.05);
  }
}

/**
 * Brocade Transition Primitives
 * 
 * Raw transition values for durations, easing functions, and delays.
 * Durations and delays use milliseconds, easings use standard CSS timing functions.
 */

@layer brocade.primitives {
  :root {
    /* ========================================================================
       Durations
       ======================================================================== */
  
    --brocade-raw-duration-0: 0ms;
    --brocade-raw-duration-50: 50ms;
    --brocade-raw-duration-100: 100ms;
    --brocade-raw-duration-150: 150ms;
    --brocade-raw-duration-200: 200ms;
    --brocade-raw-duration-250: 250ms;
    --brocade-raw-duration-300: 300ms;
    --brocade-raw-duration-400: 400ms;
    --brocade-raw-duration-500: 500ms;
  
    /* Named durations */
    --brocade-raw-duration-instant: 0ms;
    --brocade-raw-duration-fast: 100ms;
    --brocade-raw-duration-normal: 200ms;
    --brocade-raw-duration-slow: 300ms;
  
    /* ========================================================================
       Easing Functions
       ======================================================================== */
  
    --brocade-raw-easing-linear: linear;
    --brocade-raw-easing-ease: ease;
    --brocade-raw-easing-ease-in: ease-in;
    --brocade-raw-easing-ease-out: ease-out;
    --brocade-raw-easing-ease-in-out: ease-in-out;
  
    /* Custom cubic-bezier easings */
    --brocade-raw-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --brocade-raw-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --brocade-raw-easing-sharp: cubic-bezier(0.4, 0, 0.6, 1);
  
    /* ========================================================================
       Delays
       ======================================================================== */
  
    --brocade-raw-delay-0: 0ms;
    --brocade-raw-delay-50: 50ms;
    --brocade-raw-delay-100: 100ms;
    --brocade-raw-delay-150: 150ms;
    --brocade-raw-delay-200: 200ms;
  }
}

/**
 * Brocade Animation Primitives
 * 
 * Raw animation definitions referencing keyframes.
 * Keyframes must be defined separately; tokens reference them by name.
 */

@layer brocade.primitives {
  :root {
    /* ========================================================================
       Animation Definitions
       ======================================================================== */
  
    --brocade-raw-animation-fade-in: 
      fade-in var(--brocade-raw-duration-normal, 200ms) var(--brocade-raw-easing-ease-out, ease-out);
  
    --brocade-raw-animation-fade-out: 
      fade-out var(--brocade-raw-duration-normal, 200ms) var(--brocade-raw-easing-ease-in, ease-in);
  
    --brocade-raw-animation-slide-in-up: 
      slide-in-up var(--brocade-raw-duration-normal, 200ms) var(--brocade-raw-easing-ease-out, ease-out);
  
    --brocade-raw-animation-slide-in-down: 
      slide-in-down var(--brocade-raw-duration-normal, 200ms) var(--brocade-raw-easing-ease-out, ease-out);
  
    --brocade-raw-animation-slide-in-left: 
      slide-in-left var(--brocade-raw-duration-normal, 200ms) var(--brocade-raw-easing-ease-out, ease-out);
  
    --brocade-raw-animation-slide-in-right: 
      slide-in-right var(--brocade-raw-duration-normal, 200ms) var(--brocade-raw-easing-ease-out, ease-out);
  
    --brocade-raw-animation-slide-out-up: 
      slide-out-up var(--brocade-raw-duration-normal, 200ms) var(--brocade-raw-easing-ease-in, ease-in);
  
    --brocade-raw-animation-slide-out-down: 
      slide-out-down var(--brocade-raw-duration-normal, 200ms) var(--brocade-raw-easing-ease-in, ease-in);
  
    --brocade-raw-animation-slide-out-left: 
      slide-out-left var(--brocade-raw-duration-normal, 200ms) var(--brocade-raw-easing-ease-in, ease-in);
  
    --brocade-raw-animation-slide-out-right: 
      slide-out-right var(--brocade-raw-duration-normal, 200ms) var(--brocade-raw-easing-ease-in, ease-in);
  
    --brocade-raw-animation-spin: 
      spin var(--brocade-raw-duration-500, 500ms) var(--brocade-raw-easing-linear, linear) infinite;
  
    --brocade-raw-animation-bounce: 
      bounce var(--brocade-raw-duration-500, 500ms) var(--brocade-raw-easing-bounce, cubic-bezier(0.68, -0.55, 0.265, 1.55)) infinite;
  
    --brocade-raw-animation-pulse: 
      pulse var(--brocade-raw-duration-normal, 200ms) var(--brocade-raw-easing-ease-in-out, ease-in-out) infinite alternate;
  }

  /* ==========================================================================
     Keyframe Definitions
   
     These keyframes match the animation token names for discoverability.
     ========================================================================== */

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  @keyframes slide-in-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  @keyframes slide-in-down {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
  }

  @keyframes slide-in-left {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }

  @keyframes slide-in-right {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
  }

  @keyframes slide-out-up {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
  }

  @keyframes slide-out-down {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
  }

  @keyframes slide-out-left {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
  }

  @keyframes slide-out-right {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-25%); }
  }

  @keyframes pulse {
    from { opacity: 1; }
    to { opacity: 0.5; }
  }
}

/**
 * Brocade Layout Primitives
 * 
 * Raw layout values for viewport units, content widths, z-index layers,
 * elevation, aspect ratios, and grid/flex layout properties.
 */

@layer brocade.primitives {
  :root {
    /* ========================================================================
       Viewport Units
       ======================================================================== */
  
    /* Viewport width */
    --brocade-raw-viewport-vw-full: 100vw;
    --brocade-raw-viewport-vw-half: 50vw;
    --brocade-raw-viewport-vw-third: 33.333vw;
    --brocade-raw-viewport-vw-quarter: 25vw;
  
    /* Viewport height - using dvh where supported */
    --brocade-raw-viewport-vh-full: 100dvh;
    --brocade-raw-viewport-vh-half: 50dvh;
    --brocade-raw-viewport-vh-third: 33.333dvh;
    --brocade-raw-viewport-vh-quarter: 25dvh;
  
    /* ========================================================================
       Content Widths
       ======================================================================== */
  
    --brocade-raw-width-prose: 65ch;
    --brocade-raw-width-narrow: 45ch;
    --brocade-raw-width-wide: 90ch;
    --brocade-raw-width-full: 100%;
    --brocade-raw-width-screen: 100vw;
  
    /* Fixed widths for common breakpoints */
    --brocade-raw-width-xs: 20rem;    /* 320px */
    --brocade-raw-width-sm: 24rem;    /* 384px */
    --brocade-raw-width-md: 28rem;    /* 448px */
    --brocade-raw-width-lg: 32rem;    /* 512px */
    --brocade-raw-width-xl: 36rem;    /* 576px */
    --brocade-raw-width-2xl: 42rem;   /* 672px */
    --brocade-raw-width-3xl: 48rem;   /* 768px */
    --brocade-raw-width-4xl: 56rem;   /* 896px */
    --brocade-raw-width-5xl: 64rem;   /* 1024px */
    --brocade-raw-width-6xl: 72rem;   /* 1152px */
    --brocade-raw-width-7xl: 80rem;   /* 1280px */
  
    /* ========================================================================
       Z-Index Layers
       ======================================================================== */
  
    --brocade-raw-z-index-base: 0;
    --brocade-raw-z-index-dropdown: 1000;
    --brocade-raw-z-index-sticky: 1100;
    --brocade-raw-z-index-fixed: 1200;
    --brocade-raw-z-index-modal: 1300;
    --brocade-raw-z-index-popover: 1400;
    --brocade-raw-z-index-tooltip: 1500;
  
    /* ========================================================================
       Elevation (combines z-index with shadows)
       ======================================================================== */
  
    --brocade-raw-elevation-0: 0;
    --brocade-raw-elevation-1: 1;
    --brocade-raw-elevation-2: 2;
    --brocade-raw-elevation-3: 3;
    --brocade-raw-elevation-4: 4;
    --brocade-raw-elevation-5: 5;
  
    /* ========================================================================
       Aspect Ratios
       ======================================================================== */
  
    --brocade-raw-aspect-square: 1 / 1;
    --brocade-raw-aspect-video: 16 / 9;
    --brocade-raw-aspect-widescreen: 21 / 9;
    --brocade-raw-aspect-portrait: 3 / 4;
    --brocade-raw-aspect-landscape: 4 / 3;
    --brocade-raw-aspect-ultrawide: 32 / 9;
  
    /* ========================================================================
       Flex Layout
       ======================================================================== */
  
    /* Direction */
    --brocade-raw-layout-direction-row: row;
    --brocade-raw-layout-direction-row-reverse: row-reverse;
    --brocade-raw-layout-direction-column: column;
    --brocade-raw-layout-direction-column-reverse: column-reverse;
  
    /* Wrap */
    --brocade-raw-layout-wrap-nowrap: nowrap;
    --brocade-raw-layout-wrap-wrap: wrap;
    --brocade-raw-layout-wrap-wrap-reverse: wrap-reverse;
  
    /* Alignment (cross-axis) */
    --brocade-raw-layout-align-start: start;
    --brocade-raw-layout-align-center: center;
    --brocade-raw-layout-align-end: end;
    --brocade-raw-layout-align-stretch: stretch;
    --brocade-raw-layout-align-baseline: baseline;
  
    /* Justification (main-axis) */
    --brocade-raw-layout-justify-start: start;
    --brocade-raw-layout-justify-center: center;
    --brocade-raw-layout-justify-end: end;
    --brocade-raw-layout-justify-space-between: space-between;
    --brocade-raw-layout-justify-space-around: space-around;
    --brocade-raw-layout-justify-space-evenly: space-evenly;
  
    /* ========================================================================
       Grid Layout
       ======================================================================== */
  
    /* Column templates */
    --brocade-raw-layout-grid-1col: 1fr;
    --brocade-raw-layout-grid-2col: repeat(2, 1fr);
    --brocade-raw-layout-grid-3col: repeat(3, 1fr);
    --brocade-raw-layout-grid-4col: repeat(4, 1fr);
    --brocade-raw-layout-grid-5col: repeat(5, 1fr);
    --brocade-raw-layout-grid-6col: repeat(6, 1fr);
    --brocade-raw-layout-grid-12col: repeat(12, 1fr);
  
    /* Auto-fit responsive grids */
    --brocade-raw-layout-grid-auto-xs: repeat(auto-fit, minmax(8rem, 1fr));    /* 128px */
    --brocade-raw-layout-grid-auto-sm: repeat(auto-fit, minmax(12rem, 1fr));   /* 192px */
    --brocade-raw-layout-grid-auto-md: repeat(auto-fit, minmax(16rem, 1fr));   /* 256px */
    --brocade-raw-layout-grid-auto-lg: repeat(auto-fit, minmax(20rem, 1fr));   /* 320px */
    --brocade-raw-layout-grid-auto-xl: repeat(auto-fit, minmax(24rem, 1fr));   /* 384px */
  
    /* Grid auto flow */
    --brocade-raw-layout-flow-row: row;
    --brocade-raw-layout-flow-column: column;
    --brocade-raw-layout-flow-dense: dense;
    --brocade-raw-layout-flow-row-dense: row dense;
    --brocade-raw-layout-flow-column-dense: column dense;
  }
}

/**
 * Brocade Icon Primitives
 * 
 * Raw icon values for sizes and stroke widths.
 * Sizes align with the spacing scale for visual consistency.
 */

@layer brocade.primitives {
  :root {
    /* ========================================================================
       Icon Sizes (rem units, aligning with spacing scale)
       ======================================================================== */
  
    --brocade-raw-icon-size-12: 0.75rem;     /* 12px */
    --brocade-raw-icon-size-16: 1rem;        /* 16px */
    --brocade-raw-icon-size-20: 1.25rem;     /* 20px */
    --brocade-raw-icon-size-24: 1.5rem;      /* 24px */
    --brocade-raw-icon-size-32: 2rem;        /* 32px */
    --brocade-raw-icon-size-40: 2.5rem;      /* 40px */
    --brocade-raw-icon-size-48: 3rem;        /* 48px */
  
    /* ========================================================================
       Icon Stroke Widths (numeric, pixel-equivalent)
       ======================================================================== */
  
    --brocade-raw-icon-stroke-1: 1;
    --brocade-raw-icon-stroke-1-5: 1.5;
    --brocade-raw-icon-stroke-2: 2;
    --brocade-raw-icon-stroke-2-5: 2.5;
    --brocade-raw-icon-stroke-3: 3;
  }
}

/**
 * Brocade Interaction Primitives
 * 
 * Raw interaction values for cursor styles and user selection behavior.
 */

@layer brocade.primitives {
  :root {
    /* ========================================================================
       Cursor Styles
       ======================================================================== */
  
    --brocade-raw-cursor-default: default;
    --brocade-raw-cursor-interactive: pointer;
    --brocade-raw-cursor-disabled: not-allowed;
    --brocade-raw-cursor-text: text;
    --brocade-raw-cursor-wait: wait;
    --brocade-raw-cursor-progress: progress;
    --brocade-raw-cursor-grab: grab;
    --brocade-raw-cursor-grabbing: grabbing;
    --brocade-raw-cursor-move: move;
    --brocade-raw-cursor-copy: copy;
    --brocade-raw-cursor-crosshair: crosshair;
    --brocade-raw-cursor-help: help;
  
    /* Resize cursors */
    --brocade-raw-cursor-resize-n: n-resize;
    --brocade-raw-cursor-resize-s: s-resize;
    --brocade-raw-cursor-resize-e: e-resize;
    --brocade-raw-cursor-resize-w: w-resize;
    --brocade-raw-cursor-resize-ne: ne-resize;
    --brocade-raw-cursor-resize-nw: nw-resize;
    --brocade-raw-cursor-resize-se: se-resize;
    --brocade-raw-cursor-resize-sw: sw-resize;
    --brocade-raw-cursor-resize-ew: ew-resize;
    --brocade-raw-cursor-resize-ns: ns-resize;
  
    /* ========================================================================
       User Select Behavior
       ======================================================================== */
  
    --brocade-raw-user-select-none: none;
    --brocade-raw-user-select-text: text;
    --brocade-raw-user-select-all: all;
    --brocade-raw-user-select-auto: auto;
  }
}

/**
 * sirrobert.net — site primitives: the design's type sizes, rhythm, widths, and motion.
 */

@layer brocade.primitives {
  :root {
    --brocade-raw-font-size-11-5: 0.71875rem;
    --brocade-raw-font-size-13: 0.8125rem;
    --brocade-raw-font-size-13-5: 0.84375rem;
    --brocade-raw-font-size-14-5: 0.90625rem;
    --brocade-raw-font-size-16-5: 1.03125rem;
    --brocade-raw-font-size-17: 1.0625rem;
    --brocade-raw-font-size-17-5: 1.09375rem;
    --brocade-raw-font-size-19: 1.1875rem;
    --brocade-raw-font-size-19-5: 1.21875rem;
    --brocade-raw-font-size-21: 1.3125rem;
    --brocade-raw-font-size-21-5: 1.34375rem;
    --brocade-raw-font-size-23: 1.4375rem;
    --brocade-raw-font-size-27: 1.6875rem;
    --brocade-raw-font-size-62: 3.875rem;
    --brocade-raw-font-size-fluid-display: clamp(2.375rem, 6.6vw, 3.625rem);
    --brocade-raw-font-size-fluid-lede: clamp(1.4375rem, 3.4vw, 1.9375rem);
    --brocade-raw-font-size-fluid-page: clamp(2.125rem, 5.6vw, 3.125rem);
    --brocade-raw-font-size-fluid-section: clamp(1.5625rem, 3.2vw, 2rem);
    --brocade-raw-font-size-fluid-article: clamp(1.9375rem, 5vw, 2.75rem);
    --brocade-raw-font-size-fluid-intro: clamp(1.125rem, 2.1vw, 1.28125rem);
    --brocade-raw-line-height-0-86: 0.86;
    --brocade-raw-line-height-1-08: 1.08;
    --brocade-raw-line-height-1-14: 1.14;
    --brocade-raw-line-height-1-3: 1.3;
    --brocade-raw-line-height-1-32: 1.32;
    --brocade-raw-line-height-1-34: 1.34;
    --brocade-raw-line-height-1-45: 1.45;
    --brocade-raw-line-height-1-55: 1.55;
    --brocade-raw-line-height-1-6: 1.6;
    --brocade-raw-line-height-1-62: 1.62;
    --brocade-raw-line-height-1-7: 1.7;
    --brocade-raw-line-height-1-72: 1.72;
    --brocade-raw-line-height-2-1: 2.1;
    --brocade-raw-letter-spacing-negative-20: -0.02em;
    --brocade-raw-letter-spacing-negative-18: -0.018em;
    --brocade-raw-letter-spacing-negative-15: -0.015em;
    --brocade-raw-letter-spacing-negative-12: -0.012em;
    --brocade-raw-letter-spacing-negative-10: -0.01em;
    --brocade-raw-letter-spacing-5: 0.005em;
    --brocade-raw-letter-spacing-60: 0.06em;
    --brocade-raw-letter-spacing-80: 0.08em;
    --brocade-raw-letter-spacing-120: 0.12em;
    --brocade-raw-letter-spacing-140: 0.14em;
    --brocade-raw-letter-spacing-160: 0.16em;
    --brocade-raw-letter-spacing-180: 0.18em;
    --brocade-raw-letter-spacing-200: 0.2em;
    --brocade-raw-space-5: 0.3125rem;
    --brocade-raw-space-6: 0.375rem;
    --brocade-raw-space-7: 0.4375rem;
    --brocade-raw-space-9: 0.5625rem;
    --brocade-raw-space-10: 0.625rem;
    --brocade-raw-space-11: 0.6875rem;
    --brocade-raw-space-14: 0.875rem;
    --brocade-raw-space-15: 0.9375rem;
    --brocade-raw-space-18: 1.125rem;
    --brocade-raw-space-22: 1.375rem;
    --brocade-raw-space-26: 1.625rem;
    --brocade-raw-space-28: 1.75rem;
    --brocade-raw-space-30: 1.875rem;
    --brocade-raw-space-36: 2.25rem;
    --brocade-raw-space-42: 2.625rem;
    --brocade-raw-space-44: 2.75rem;
    --brocade-raw-space-52: 3.25rem;
    --brocade-raw-space-fluid-gutter: clamp(1.25rem, 4vw, 2.75rem);
    --brocade-raw-space-fluid-hero-top: clamp(3.5rem, 10vw, 6.875rem);
    --brocade-raw-space-fluid-hero-bottom: clamp(2.25rem, 6vw, 4rem);
    --brocade-raw-space-fluid-hero-gap: clamp(1.875rem, 5vw, 4rem);
    --brocade-raw-space-fluid-section: clamp(2.75rem, 6vw, 4.5rem);
    --brocade-raw-space-fluid-section-gap: clamp(1.25rem, 4vw, 3rem);
    --brocade-raw-space-fluid-section-foot: clamp(1.75rem, 4vw, 2.75rem);
    --brocade-raw-space-fluid-rest: clamp(1.625rem, 4vw, 2.375rem);
    --brocade-raw-space-fluid-page: clamp(2.75rem, 7vw, 5.5rem);
    --brocade-raw-space-fluid-article: clamp(2.25rem, 6vw, 4.75rem);
    --brocade-raw-space-fluid-card: clamp(1.25rem, 2.6vw, 1.625rem);
    --brocade-raw-space-fluid-history-gap: clamp(2.125rem, 5vw, 3.75rem);
    --brocade-raw-width-site: 68.75rem;
    --brocade-raw-width-reading: 33rem;
    --brocade-raw-width-lede: 22ch;
    --brocade-raw-width-blurb: 40rem;
    --brocade-raw-width-contact: 44rem;
    --brocade-raw-width-rest: 54rem;
    --brocade-raw-width-grid-300: min(100%, 18.75rem);
    --brocade-raw-width-grid-255: min(100%, 15.9375rem);
    --brocade-raw-width-grid-220: min(100%, 13.75rem);
    --brocade-raw-width-grid-320: min(100%, 20rem);
    --brocade-raw-width-grid-210: min(100%, 13.125rem);
    --brocade-raw-size-dot-7: 0.4375rem;
    --brocade-raw-border-width-1-5: 1.5px;
    --brocade-raw-border-width-3: 3px;
    --brocade-raw-border-width-0-5: 0.5px;
    --brocade-raw-offset-underline-3: 3px;
    --brocade-raw-offset-underline-4: 4px;
    --brocade-raw-offset-dot-4: -4px;
    --brocade-raw-offset-dot-9: 0.5625rem;
    --brocade-raw-shadow-lifted: 0 20px 44px -34px rgb(60 44 28 / 0.6);
    --brocade-raw-blur-10: 10px;
    --brocade-raw-opacity-88: 88%;
    --brocade-raw-duration-2400: 2400ms;
    --brocade-raw-easing-bloom: cubic-bezier(0.2, 0.7, 0.3, 1);
    --brocade-raw-scale-99: 0.99;
  }
}


/**
 * Brocade Semantic Tokens Index
 * 
 * Imports all semantic token files.
 * These tokens reference raw primitives with fallbacks.
 */

/**
 * Brocade Semantic Color Tokens
 * 
 * Semantic color tokens that reference raw primitives.
 * All tokens include hex fallbacks for browser compatibility.
 */

@layer brocade.semantic {
  :root {
    /* ========================================================================
       Primary Brand Colors
       ======================================================================== */
  
    --brocade-color-primary-base: var(--brocade-raw-color-red-600, #8e3b2f);
    --brocade-color-primary-hover: var(--brocade-raw-color-red-700, #6e2a20);
    --brocade-color-primary-active: var(--brocade-raw-color-red-800, #4f1e17);
    --brocade-color-primary-disabled: var(--brocade-raw-color-neutral-300, #e0d7c8);
    --brocade-color-primary-foreground: var(--brocade-raw-color-neutral-50, #fffefb);
  
    /* ========================================================================
       Secondary Colors
       ======================================================================== */
  
    --brocade-color-secondary-base: var(--brocade-raw-color-violet-600, #584a86);
    --brocade-color-secondary-hover: var(--brocade-raw-color-violet-700, #443968);
    --brocade-color-secondary-active: var(--brocade-raw-color-violet-800, #31284c);
    --brocade-color-secondary-disabled: var(--brocade-raw-color-neutral-300, #e0d7c8);
    --brocade-color-secondary-foreground: var(--brocade-raw-color-neutral-50, #fffefb);
  
    /* ========================================================================
       Success Colors
       ======================================================================== */
  
    --brocade-color-success-base: var(--brocade-raw-color-green-600, #33604f);
    --brocade-color-success-hover: var(--brocade-raw-color-green-700, #274a3d);
    --brocade-color-success-active: var(--brocade-raw-color-green-800, #1b352b);
    --brocade-color-success-disabled: var(--brocade-raw-color-neutral-300, #e0d7c8);
    --brocade-color-success-foreground: var(--brocade-raw-color-neutral-50, #fffefb);
  
    /* ========================================================================
       Danger/Error Colors
       ======================================================================== */
  
    --brocade-color-danger-base: var(--brocade-raw-color-red-600, #8e3b2f);
    --brocade-color-danger-hover: var(--brocade-raw-color-red-700, #6e2a20);
    --brocade-color-danger-active: var(--brocade-raw-color-red-800, #4f1e17);
    --brocade-color-danger-disabled: var(--brocade-raw-color-neutral-300, #e0d7c8);
    --brocade-color-danger-foreground: var(--brocade-raw-color-neutral-50, #fffefb);
  
    /* ========================================================================
       Warning Colors
       ======================================================================== */
  
    --brocade-color-warning-base: var(--brocade-raw-color-orange-600, #7e5a1c);
    --brocade-color-warning-hover: var(--brocade-raw-color-orange-700, #614514);
    --brocade-color-warning-active: var(--brocade-raw-color-orange-800, #45300c);
    --brocade-color-warning-disabled: var(--brocade-raw-color-neutral-300, #e0d7c8);
    --brocade-color-warning-foreground: var(--brocade-raw-color-neutral-50, #fffefb);
  
    /* ========================================================================
       Info Colors
       ======================================================================== */
  
    --brocade-color-info-base: var(--brocade-raw-color-blue-600, #3e5a86);
    --brocade-color-info-hover: var(--brocade-raw-color-blue-700, #2f4568);
    --brocade-color-info-active: var(--brocade-raw-color-blue-800, #21314b);
    --brocade-color-info-disabled: var(--brocade-raw-color-neutral-300, #e0d7c8);
    --brocade-color-info-foreground: var(--brocade-raw-color-neutral-50, #fffefb);
  
    /* ========================================================================
       Background Colors
       ======================================================================== */
  
    --brocade-color-background-base: var(--brocade-raw-color-neutral-100, #faf7f1);
    --brocade-color-background-muted: var(--brocade-raw-color-neutral-200, #f2ece1);
    --brocade-color-background-elevated: var(--brocade-raw-color-neutral-50, #fffefb);
    --brocade-color-background-hover: var(--brocade-raw-color-neutral-200, #f2ece1);
    --brocade-color-background-active: var(--brocade-raw-color-neutral-300, #e0d7c8);
  
    /* ========================================================================
       Foreground/Text Colors
       ======================================================================== */
  
    --brocade-color-foreground-base: var(--brocade-raw-color-neutral-950, #1b1815);
    --brocade-color-foreground-muted: var(--brocade-raw-color-neutral-600, #6b6155);
    --brocade-color-foreground-subtle: var(--brocade-raw-color-neutral-500, #9c9081);
    --brocade-color-foreground-disabled: var(--brocade-raw-color-neutral-400, #cfc3b0);
  
    /* ========================================================================
       Border Colors
       ======================================================================== */
  
    --brocade-color-border-base: var(--brocade-raw-color-neutral-300, #e0d7c8);
    --brocade-color-border-strong: var(--brocade-raw-color-neutral-400, #cfc3b0);
    --brocade-color-border-muted: var(--brocade-raw-color-neutral-200, #f2ece1);
    --brocade-color-border-hover: var(--brocade-raw-color-neutral-600, #6b6155);
    --brocade-color-border-focus: var(--brocade-raw-color-red-600, #8e3b2f);
    --brocade-color-border-invalid: var(--brocade-raw-color-red-500, #a35a4e);
    --brocade-color-border-valid: var(--brocade-raw-color-green-500, #527869);
  
    /* ========================================================================
       Muted Colors
       ======================================================================== */

    --brocade-color-muted-base: var(--brocade-raw-color-neutral-200, #f2ece1);
    --brocade-color-muted-foreground: var(--brocade-raw-color-neutral-600, #6b6155);

    /* ========================================================================
       Overlay/Scrim Colors
       ======================================================================== */

    /* Translucent scrim behind elevated surfaces (modals, dialogs, drawers) or
       behind content floating over unpredictable media (controls over video).
       Composed from a raw primitive + transparency so it re-themes with the raw
       layer; reduced-transparency mode overrides it to opaque. */
    --brocade-color-overlay-base: color-mix(in oklch, var(--brocade-raw-color-black, #000000) 50%, transparent);

    /* Ink for content placed directly on the scrim. Mode-INVARIANT (the scrim is
       fixed in both light and dark, so its ink must be too — not remapped by the
       color-scheme modes) and decoupled from the surface foreground role: a raw
       near-white, legible on the translucent scrim and on the opaque scrim under
       reduced transparency. The value is a witness, not a mandate. */
    --brocade-color-overlay-foreground: var(--brocade-raw-color-neutral-50, #fffefb);

    /* ========================================================================
       Link Colors
       ======================================================================== */
  
    --brocade-color-link-base: var(--brocade-raw-color-red-600, #8e3b2f);
    --brocade-color-link-hover: var(--brocade-raw-color-red-700, #6e2a20);
    --brocade-color-link-visited: var(--brocade-raw-color-red-700, #6e2a20);
  }
}

/**
 * Brocade Semantic Spacing Tokens
 * 
 * Semantic spacing tokens that reference raw space primitives.
 * Note: raw-space transforms to semantic 'size' tokens per spec.
 */

@layer brocade.semantic {
  :root {
    /* ========================================================================
       Padding
       ======================================================================== */
  
    --brocade-size-padding-base: var(--brocade-raw-space-16, 1rem);
    --brocade-size-padding-small: var(--brocade-raw-space-8, 0.5rem);
    --brocade-size-padding-large: var(--brocade-raw-space-24, 1.5rem);
    --brocade-size-padding-none: var(--brocade-raw-space-0, 0);
  
    /* Granular padding sizes */
    --brocade-size-padding-xs: var(--brocade-raw-space-4, 0.25rem);
    --brocade-size-padding-sm: var(--brocade-raw-space-8, 0.5rem);
    --brocade-size-padding-md: var(--brocade-raw-space-16, 1rem);
    --brocade-size-padding-lg: var(--brocade-raw-space-24, 1.5rem);
    --brocade-size-padding-xl: var(--brocade-raw-space-32, 2rem);
    --brocade-size-padding-2xl: var(--brocade-raw-space-48, 3rem);
  
    /* ========================================================================
       Margin
       ======================================================================== */
  
    --brocade-size-margin-base: var(--brocade-raw-space-16, 1rem);
    --brocade-size-margin-small: var(--brocade-raw-space-8, 0.5rem);
    --brocade-size-margin-large: var(--brocade-raw-space-24, 1.5rem);
    --brocade-size-margin-none: var(--brocade-raw-space-0, 0);
  
    /* Granular margin sizes */
    --brocade-size-margin-xs: var(--brocade-raw-space-4, 0.25rem);
    --brocade-size-margin-sm: var(--brocade-raw-space-8, 0.5rem);
    --brocade-size-margin-md: var(--brocade-raw-space-16, 1rem);
    --brocade-size-margin-lg: var(--brocade-raw-space-24, 1.5rem);
    --brocade-size-margin-xl: var(--brocade-raw-space-32, 2rem);
    --brocade-size-margin-2xl: var(--brocade-raw-space-48, 3rem);
  
    /* ========================================================================
       Gap (for flexbox and grid)
       ======================================================================== */
  
    --brocade-size-gap-base: var(--brocade-raw-space-16, 1rem);
    --brocade-size-gap-small: var(--brocade-raw-space-8, 0.5rem);
    --brocade-size-gap-large: var(--brocade-raw-space-24, 1.5rem);
    --brocade-size-gap-none: var(--brocade-raw-space-0, 0);
  
    /* Granular gap sizes */
    --brocade-size-gap-xs: var(--brocade-raw-space-4, 0.25rem);
    --brocade-size-gap-sm: var(--brocade-raw-space-8, 0.5rem);
    --brocade-size-gap-md: var(--brocade-raw-space-16, 1rem);
    --brocade-size-gap-lg: var(--brocade-raw-space-24, 1.5rem);
    --brocade-size-gap-xl: var(--brocade-raw-space-32, 2rem);
    --brocade-size-gap-2xl: var(--brocade-raw-space-48, 3rem);
  
    /* ========================================================================
       Inset (for positioned elements)
       ======================================================================== */
  
    --brocade-size-inset-base: var(--brocade-raw-space-16, 1rem);
    --brocade-size-inset-small: var(--brocade-raw-space-8, 0.5rem);
    --brocade-size-inset-large: var(--brocade-raw-space-24, 1.5rem);
    --brocade-size-inset-none: var(--brocade-raw-space-0, 0);

    /* ========================================================================
       Fluid: Section Rhythm (viewport-responsive vertical spacing)
       ======================================================================== */

    --brocade-size-section-sm: var(--brocade-raw-space-fluid-lg,  clamp(2rem, 4vw, 3rem));
    --brocade-size-section-md: var(--brocade-raw-space-fluid-2xl, clamp(4rem, 7vw, 6rem));
    --brocade-size-section-lg: var(--brocade-raw-space-fluid-3xl, clamp(4rem, 8vw, 8rem));

    /* ========================================================================
       Fluid: Gutters (viewport-responsive inline spacing)
       ======================================================================== */

    --brocade-size-gutter-sm: var(--brocade-raw-space-fluid-sm, clamp(1rem,   2vw, 1.5rem));
    --brocade-size-gutter-md: var(--brocade-raw-space-fluid-md, clamp(1.5rem, 3vw, 2.5rem));
  }
}

/**
 * Brocade Semantic Typography Tokens
 * 
 * Semantic typography tokens that reference raw font primitives.
 */

@layer brocade.semantic {
  :root {
    /* ========================================================================
       Font Families
       ======================================================================== */
  
    --brocade-font-family-base: var(--brocade-raw-font-serif, Georgia, serif);
    --brocade-font-family-heading: var(--brocade-raw-font-serif, Georgia, serif);
    --brocade-font-family-mono: var(--brocade-raw-font-mono, monospace);
  
    /* ========================================================================
       Font Sizes - Body Text
       ======================================================================== */
  
    --brocade-font-size-base: var(--brocade-raw-font-size-16, 1rem);
    --brocade-font-size-small: var(--brocade-raw-font-size-14, 0.875rem);
    --brocade-font-size-large: var(--brocade-raw-font-size-18, 1.125rem);
  
    /* Granular sizes */
    --brocade-font-size-xs: var(--brocade-raw-font-size-12, 0.75rem);
    --brocade-font-size-sm: var(--brocade-raw-font-size-14, 0.875rem);
    --brocade-font-size-md: var(--brocade-raw-font-size-16, 1rem);
    --brocade-font-size-lg: var(--brocade-raw-font-size-18, 1.125rem);
    --brocade-font-size-xl: var(--brocade-raw-font-size-20, 1.25rem);
  
    /* ========================================================================
       Font Sizes - Headings
       ======================================================================== */
  
    --brocade-font-size-heading-1: var(--brocade-raw-font-size-48, 3rem);
    --brocade-font-size-heading-2: var(--brocade-raw-font-size-36, 2.25rem);
    --brocade-font-size-heading-3: var(--brocade-raw-font-size-30, 1.875rem);
    --brocade-font-size-heading-4: var(--brocade-raw-font-size-24, 1.5rem);
    --brocade-font-size-heading-5: var(--brocade-raw-font-size-20, 1.25rem);
    --brocade-font-size-heading-6: var(--brocade-raw-font-size-18, 1.125rem);
  
    /* ========================================================================
       Font Weights
       ======================================================================== */
  
    --brocade-font-weight-base: var(--brocade-raw-font-weight-regular, 400);
    --brocade-font-weight-heading: var(--brocade-raw-font-weight-regular, 400);
    --brocade-font-weight-medium: var(--brocade-raw-font-weight-medium, 500);
    --brocade-font-weight-semibold: var(--brocade-raw-font-weight-semibold, 600);
    --brocade-font-weight-bold: var(--brocade-raw-font-weight-bold, 700);
    --brocade-font-weight-light: var(--brocade-raw-font-weight-light, 300);
  
    /* ========================================================================
       Line Heights
       ======================================================================== */
  
    --brocade-line-height-base: var(--brocade-raw-line-height-normal, 1.5);
    --brocade-line-height-heading: var(--brocade-raw-line-height-tight, 1.25);
    --brocade-line-height-tight: var(--brocade-raw-line-height-tight, 1.25);
    --brocade-line-height-normal: var(--brocade-raw-line-height-normal, 1.5);
    --brocade-line-height-loose: var(--brocade-raw-line-height-loose, 1.75);
  
    /* ========================================================================
       Letter Spacing
       ======================================================================== */
  
    --brocade-letter-spacing-base: var(--brocade-raw-letter-spacing-normal, 0em);
    --brocade-letter-spacing-heading: var(--brocade-raw-letter-spacing-tight, -0.025em);
    --brocade-letter-spacing-tight: var(--brocade-raw-letter-spacing-tight, -0.025em);
    --brocade-letter-spacing-normal: var(--brocade-raw-letter-spacing-normal, 0em);
    --brocade-letter-spacing-wide: var(--brocade-raw-letter-spacing-wide, 0.025em);
  }
}

/**
 * Brocade Semantic Border Tokens
 * 
 * Semantic border tokens that reference raw radius and width primitives.
 * Includes focus ring tokens for accessibility.
 */

@layer brocade.semantic {
  :root {
    /* ========================================================================
       Border Radius
       ======================================================================== */
  
    --brocade-border-radius-base: var(--brocade-raw-radius-4, 0.25rem);
    --brocade-border-radius-small: var(--brocade-raw-radius-2, 0.125rem);
    --brocade-border-radius-large: var(--brocade-raw-radius-8, 0.5rem);
    --brocade-border-radius-none: var(--brocade-raw-radius-0, 0);
    --brocade-border-radius-full: var(--brocade-raw-radius-full, 9999px);
  
    /* Component-specific radii */
    --brocade-border-radius-button: var(--brocade-raw-radius-6, 0.375rem);
    --brocade-border-radius-card: var(--brocade-raw-radius-8, 0.5rem);
    --brocade-border-radius-input: var(--brocade-raw-radius-4, 0.25rem);
    --brocade-border-radius-badge: var(--brocade-raw-radius-full, 9999px);
    --brocade-border-radius-modal: var(--brocade-raw-radius-12, 0.75rem);
    --brocade-border-radius-popover: var(--brocade-raw-radius-8, 0.5rem);
  
    /* ========================================================================
       Border Width
       ======================================================================== */
  
    --brocade-border-width-base: var(--brocade-raw-border-width-1, 1px);
    --brocade-border-width-thin: var(--brocade-raw-border-width-1, 1px);
    --brocade-border-width-medium: var(--brocade-raw-border-width-2, 2px);
    --brocade-border-width-thick: var(--brocade-raw-border-width-4, 4px);
    --brocade-border-width-none: var(--brocade-raw-border-width-0, 0);
  
    /* ========================================================================
       Focus Ring Tokens
       ======================================================================== */
  
    --brocade-focus-ring-width: var(--brocade-raw-focus-ring-width-2, 2px);
    --brocade-focus-ring-offset: var(--brocade-raw-focus-ring-offset-2, 2px);
    --brocade-focus-ring-color: var(--brocade-color-primary-base, #3b82f6);
  
    /* Alternative focus ring styles */
    --brocade-focus-ring-width-thin: var(--brocade-raw-focus-ring-width-2, 2px);
    --brocade-focus-ring-width-thick: var(--brocade-raw-focus-ring-width-4, 4px);
    --brocade-focus-ring-offset-none: var(--brocade-raw-focus-ring-offset-0, 0);
    --brocade-focus-ring-offset-small: var(--brocade-raw-focus-ring-offset-1, 1px);
    --brocade-focus-ring-offset-large: var(--brocade-raw-focus-ring-offset-4, 4px);
  }
}

/**
 * Brocade Semantic Shadow Tokens
 * 
 * Semantic shadow tokens that reference raw shadow primitives.
 */

@layer brocade.semantic {
  :root {
    /* ========================================================================
       General Shadows
       ======================================================================== */
  
    --brocade-shadow-base: var(--brocade-raw-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
    --brocade-shadow-small: var(--brocade-raw-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
    --brocade-shadow-medium: var(--brocade-raw-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    --brocade-shadow-large: var(--brocade-raw-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    --brocade-shadow-none: var(--brocade-raw-shadow-none, none);
  
    /* ========================================================================
       Component-Specific Shadows
       ======================================================================== */
  
    --brocade-shadow-card: var(--brocade-raw-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
    --brocade-shadow-card-hover: var(--brocade-raw-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    --brocade-shadow-elevated: var(--brocade-raw-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
    --brocade-shadow-modal: var(--brocade-raw-shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
    --brocade-shadow-dropdown: var(--brocade-raw-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    --brocade-shadow-popover: var(--brocade-raw-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    --brocade-shadow-tooltip: var(--brocade-raw-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
  
    /* ========================================================================
       Inner Shadow
       ======================================================================== */
  
    --brocade-shadow-inner: var(--brocade-raw-shadow-inner, inset 0 2px 4px 0 rgba(0, 0, 0, 0.05));
  }
}

/**
 * Brocade Semantic Transition Tokens
 * 
 * Semantic transition tokens that reference raw duration, easing, and delay primitives.
 * Note: raw duration/easing/delay transform to semantic 'transition' tokens per spec.
 * Includes both component tokens and combined shorthand tokens.
 */

@layer brocade.semantic {
  :root {
    /* ========================================================================
       Component Tokens (Duration, Easing, Delay)
       ======================================================================== */
  
    --brocade-transition-duration-base: var(--brocade-raw-duration-normal, 200ms);
    --brocade-transition-duration-fast: var(--brocade-raw-duration-fast, 100ms);
    --brocade-transition-duration-slow: var(--brocade-raw-duration-slow, 300ms);
  
    --brocade-transition-easing-base: var(--brocade-raw-easing-ease-out, ease-out);
    --brocade-transition-easing-in: var(--brocade-raw-easing-ease-in, ease-in);
    --brocade-transition-easing-out: var(--brocade-raw-easing-ease-out, ease-out);
    --brocade-transition-easing-in-out: var(--brocade-raw-easing-ease-in-out, ease-in-out);
  
    --brocade-transition-delay-base: var(--brocade-raw-delay-0, 0ms);
    --brocade-transition-delay-short: var(--brocade-raw-delay-50, 50ms);
    --brocade-transition-delay-medium: var(--brocade-raw-delay-100, 100ms);
  
    /* ========================================================================
       Combined Transition Tokens (Recommended)
       ======================================================================== */
  
    /* Base transition - general purpose */
    --brocade-transition-base: all 
      var(--brocade-transition-duration-base, 200ms) 
      var(--brocade-transition-easing-base, ease-out) 
      var(--brocade-transition-delay-base, 0ms);
  
    /* Fast transition - for subtle changes */
    --brocade-transition-fast: all 
      var(--brocade-transition-duration-fast, 100ms) 
      var(--brocade-transition-easing-out, ease-out) 
      var(--brocade-transition-delay-base, 0ms);
  
    /* Slow transition - for emphasized changes */
    --brocade-transition-slow: all 
      var(--brocade-transition-duration-slow, 300ms) 
      var(--brocade-transition-easing-in-out, ease-in-out) 
      var(--brocade-transition-delay-base, 0ms);
  
    /* ========================================================================
       Property-Specific Transitions
       ======================================================================== */
  
    --brocade-transition-color: color 
      var(--brocade-transition-duration-fast, 100ms) 
      var(--brocade-transition-easing-out, ease-out);
  
    --brocade-transition-background: background-color 
      var(--brocade-transition-duration-fast, 100ms) 
      var(--brocade-transition-easing-out, ease-out);
  
    --brocade-transition-border: border-color 
      var(--brocade-transition-duration-fast, 100ms) 
      var(--brocade-transition-easing-out, ease-out);
  
    --brocade-transition-transform: transform 
      var(--brocade-transition-duration-base, 200ms) 
      var(--brocade-transition-easing-out, ease-out);
  
    --brocade-transition-opacity: opacity 
      var(--brocade-transition-duration-base, 200ms) 
      var(--brocade-transition-easing-out, ease-out);
  
    --brocade-transition-shadow: box-shadow 
      var(--brocade-transition-duration-base, 200ms) 
      var(--brocade-transition-easing-out, ease-out);
  }
}

/**
 * Brocade Semantic Animation Tokens
 * 
 * Semantic animation tokens that reference raw animation primitives.
 */

@layer brocade.semantic {
  :root {
    /* ========================================================================
       General Animations
       ======================================================================== */
  
    --brocade-animation-fade-in: var(--brocade-raw-animation-fade-in, fade-in 200ms ease-out);
    --brocade-animation-fade-out: var(--brocade-raw-animation-fade-out, fade-out 200ms ease-in);
  
    /* ========================================================================
       Slide Animations
       ======================================================================== */
  
    --brocade-animation-slide-in-up: var(--brocade-raw-animation-slide-in-up, slide-in-up 200ms ease-out);
    --brocade-animation-slide-in-down: var(--brocade-raw-animation-slide-in-down, slide-in-down 200ms ease-out);
    --brocade-animation-slide-in-left: var(--brocade-raw-animation-slide-in-left, slide-in-left 200ms ease-out);
    --brocade-animation-slide-in-right: var(--brocade-raw-animation-slide-in-right, slide-in-right 200ms ease-out);
  
    --brocade-animation-slide-out-up: var(--brocade-raw-animation-slide-out-up, slide-out-up 200ms ease-in);
    --brocade-animation-slide-out-down: var(--brocade-raw-animation-slide-out-down, slide-out-down 200ms ease-in);
    --brocade-animation-slide-out-left: var(--brocade-raw-animation-slide-out-left, slide-out-left 200ms ease-in);
    --brocade-animation-slide-out-right: var(--brocade-raw-animation-slide-out-right, slide-out-right 200ms ease-in);
  
    /* ========================================================================
       Looping Animations
       ======================================================================== */
  
    --brocade-animation-spin: var(--brocade-raw-animation-spin, spin 500ms linear infinite);
    --brocade-animation-bounce: var(--brocade-raw-animation-bounce, bounce 500ms ease-in-out infinite);
    --brocade-animation-pulse: var(--brocade-raw-animation-pulse, pulse 200ms ease-in-out infinite alternate);
  
    /* ========================================================================
       Component-Specific Animations
       ======================================================================== */
  
    --brocade-animation-modal-enter: var(--brocade-raw-animation-fade-in, fade-in 200ms ease-out);
    --brocade-animation-modal-exit: var(--brocade-raw-animation-fade-out, fade-out 200ms ease-in);
  
    --brocade-animation-dropdown-enter: var(--brocade-raw-animation-slide-in-down, slide-in-down 200ms ease-out);
    --brocade-animation-dropdown-exit: var(--brocade-raw-animation-slide-out-up, slide-out-up 200ms ease-in);
  
    --brocade-animation-drawer-enter: var(--brocade-raw-animation-slide-in-right, slide-in-right 200ms ease-out);
    --brocade-animation-drawer-exit: var(--brocade-raw-animation-slide-out-right, slide-out-right 200ms ease-in);
  
    --brocade-animation-loading: var(--brocade-raw-animation-spin, spin 500ms linear infinite);
  }
}

/**
 * Brocade Semantic Layout Tokens
 * 
 * Semantic layout tokens for viewport, widths, z-index, elevation,
 * and grid/flex layout with standard containers.
 */

@layer brocade.semantic {
  :root {
    /* ========================================================================
       Viewport
       ======================================================================== */
  
    --brocade-viewport-height-full: var(--brocade-raw-viewport-vh-full, 100dvh);
    --brocade-viewport-width-full: var(--brocade-raw-viewport-vw-full, 100vw);
    --brocade-viewport-height-half: var(--brocade-raw-viewport-vh-half, 50dvh);
    --brocade-viewport-width-half: var(--brocade-raw-viewport-vw-half, 50vw);
  
    /* ========================================================================
       Content Widths
       ======================================================================== */
  
    --brocade-width-content-prose: var(--brocade-raw-width-prose, 65ch);
    --brocade-width-content-narrow: var(--brocade-raw-width-narrow, 45ch);
    --brocade-width-content-wide: var(--brocade-raw-width-wide, 90ch);
    --brocade-width-container: var(--brocade-raw-width-5xl, 64rem);
  
    /* ========================================================================
       Z-Index Layers
       ======================================================================== */
  
    --brocade-z-index-base: var(--brocade-raw-z-index-base, 0);
    --brocade-z-index-dropdown: var(--brocade-raw-z-index-dropdown, 1000);
    --brocade-z-index-sticky: var(--brocade-raw-z-index-sticky, 1100);
    --brocade-z-index-fixed: var(--brocade-raw-z-index-fixed, 1200);
    --brocade-z-index-modal: var(--brocade-raw-z-index-modal, 1300);
    --brocade-z-index-popover: var(--brocade-raw-z-index-popover, 1400);
    --brocade-z-index-tooltip: var(--brocade-raw-z-index-tooltip, 1500);
  
    /* ========================================================================
       Elevation
       ======================================================================== */
  
    --brocade-elevation-0: var(--brocade-raw-z-index-base, 0);
    --brocade-elevation-1: var(--brocade-raw-z-index-dropdown, 1000);
    --brocade-elevation-2: var(--brocade-raw-z-index-sticky, 1100);
    --brocade-elevation-3: var(--brocade-raw-z-index-fixed, 1200);
    --brocade-elevation-4: var(--brocade-raw-z-index-modal, 1300);
    --brocade-elevation-5: var(--brocade-raw-z-index-popover, 1400);
  
    /* ========================================================================
       Card Layout
       ======================================================================== */
  
    --brocade-layout-card-direction: var(--brocade-raw-layout-direction-row, row);
    --brocade-layout-card-wrap: var(--brocade-raw-layout-wrap-wrap, wrap);
    --brocade-layout-card-gap: var(--brocade-raw-space-24, 1.5rem);
    --brocade-layout-card-align: var(--brocade-raw-layout-align-stretch, stretch);
    --brocade-layout-card-justify: var(--brocade-raw-layout-justify-start, start);
    --brocade-layout-card-columns: var(--brocade-raw-layout-grid-auto-md, repeat(auto-fit, minmax(16rem, 1fr)));
  
    /* ========================================================================
       List Layout
       ======================================================================== */
  
    --brocade-layout-list-direction: var(--brocade-raw-layout-direction-column, column);
    --brocade-layout-list-gap: var(--brocade-raw-space-8, 0.5rem);
    --brocade-layout-list-align: var(--brocade-raw-layout-align-stretch, stretch);
  
    /* ========================================================================
       Navigation Layout
       ======================================================================== */
  
    --brocade-layout-nav-direction: var(--brocade-raw-layout-direction-row, row);
    --brocade-layout-nav-justify: var(--brocade-raw-layout-justify-space-between, space-between);
    --brocade-layout-nav-align: var(--brocade-raw-layout-align-center, center);
    --brocade-layout-nav-gap: var(--brocade-raw-space-16, 1rem);
  
    /* ========================================================================
       Stack Layout
       ======================================================================== */
  
    --brocade-layout-stack-direction: var(--brocade-raw-layout-direction-column, column);
    --brocade-layout-stack-align: var(--brocade-raw-layout-align-stretch, stretch);
    --brocade-layout-stack-gap: var(--brocade-raw-space-16, 1rem);
  
    /* ========================================================================
       Inline Layout
       ======================================================================== */
  
    --brocade-layout-inline-direction: var(--brocade-raw-layout-direction-row, row);
    --brocade-layout-inline-wrap: var(--brocade-raw-layout-wrap-wrap, wrap);
    --brocade-layout-inline-align: var(--brocade-raw-layout-align-center, center);
    --brocade-layout-inline-gap: var(--brocade-raw-space-8, 0.5rem);
  
    /* ========================================================================
       Form Layout
       ======================================================================== */
  
    --brocade-layout-form-direction: var(--brocade-raw-layout-direction-column, column);
    --brocade-layout-form-gap: var(--brocade-raw-space-16, 1rem);
    --brocade-layout-form-align: var(--brocade-raw-layout-align-stretch, stretch);
  
    /* ========================================================================
       Toolbar Layout
       ======================================================================== */
  
    --brocade-layout-toolbar-direction: var(--brocade-raw-layout-direction-row, row);
    --brocade-layout-toolbar-justify: var(--brocade-raw-layout-justify-start, start);
    --brocade-layout-toolbar-align: var(--brocade-raw-layout-align-center, center);
    --brocade-layout-toolbar-gap: var(--brocade-raw-space-8, 0.5rem);
  
    /* ========================================================================
       Gallery Layout
       ======================================================================== */
  
    --brocade-layout-gallery-columns: var(--brocade-raw-layout-grid-auto-sm, repeat(auto-fit, minmax(12rem, 1fr)));
    --brocade-layout-gallery-gap: var(--brocade-raw-space-16, 1rem);
    --brocade-layout-gallery-flow: var(--brocade-raw-layout-flow-row, row);
  }
}

/**
 * Brocade Semantic Icon Tokens
 * 
 * Semantic icon tokens that reference raw icon primitives.
 */

@layer brocade.semantic {
  :root {
    /* ========================================================================
       Icon Sizes
       ======================================================================== */
  
    --brocade-icon-size-base: var(--brocade-raw-icon-size-20, 1.25rem);
    --brocade-icon-size-small: var(--brocade-raw-icon-size-16, 1rem);
    --brocade-icon-size-large: var(--brocade-raw-icon-size-24, 1.5rem);
  
    /* Granular sizes */
    --brocade-icon-size-xs: var(--brocade-raw-icon-size-12, 0.75rem);
    --brocade-icon-size-sm: var(--brocade-raw-icon-size-16, 1rem);
    --brocade-icon-size-md: var(--brocade-raw-icon-size-20, 1.25rem);
    --brocade-icon-size-lg: var(--brocade-raw-icon-size-24, 1.5rem);
    --brocade-icon-size-xl: var(--brocade-raw-icon-size-32, 2rem);
    --brocade-icon-size-2xl: var(--brocade-raw-icon-size-40, 2.5rem);
  
    /* ========================================================================
       Icon Stroke Widths
       ======================================================================== */
  
    --brocade-icon-stroke-base: var(--brocade-raw-icon-stroke-2, 2);
    --brocade-icon-stroke-thin: var(--brocade-raw-icon-stroke-1, 1);
    --brocade-icon-stroke-medium: var(--brocade-raw-icon-stroke-2, 2);
    --brocade-icon-stroke-thick: var(--brocade-raw-icon-stroke-3, 3);
  
    /* ========================================================================
       Icon Colors (references text colors for consistency)
       ======================================================================== */
  
    --brocade-icon-color-base: var(--brocade-color-foreground-base, #171717);
    --brocade-icon-color-muted: var(--brocade-color-foreground-muted, #525252);
    --brocade-icon-color-subtle: var(--brocade-color-foreground-subtle, #737373);
    --brocade-icon-color-primary: var(--brocade-color-primary-base, #3b82f6);
    --brocade-icon-color-success: var(--brocade-color-success-base, #22c55e);
    --brocade-icon-color-danger: var(--brocade-color-danger-base, #ef4444);
    --brocade-icon-color-warning: var(--brocade-color-warning-base, #f59e0b);
    --brocade-icon-color-info: var(--brocade-color-info-base, #06b6d4);
  }
}

/**
 * Brocade Semantic Interaction Tokens
 * 
 * Semantic interaction tokens that reference raw cursor and user-select primitives.
 */

@layer brocade.semantic {
  :root {
    /* ========================================================================
       Cursor Styles
       ======================================================================== */
  
    --brocade-cursor-base: var(--brocade-raw-cursor-default, default);
    --brocade-cursor-interactive: var(--brocade-raw-cursor-interactive, pointer);
    --brocade-cursor-disabled: var(--brocade-raw-cursor-disabled, not-allowed);
    --brocade-cursor-text: var(--brocade-raw-cursor-text, text);
    --brocade-cursor-wait: var(--brocade-raw-cursor-wait, wait);
    --brocade-cursor-grab: var(--brocade-raw-cursor-grab, grab);
    --brocade-cursor-grabbing: var(--brocade-raw-cursor-grabbing, grabbing);
  
    /* ========================================================================
       User Select Behavior
       ======================================================================== */
  
    --brocade-user-select-base: var(--brocade-raw-user-select-auto, auto);
    --brocade-user-select-none: var(--brocade-raw-user-select-none, none);
    --brocade-user-select-text: var(--brocade-raw-user-select-text, text);
    --brocade-user-select-all: var(--brocade-raw-user-select-all, all);
  }
}

/**
 * sirrobert.net — site semantic tokens. Site stylesheets read these and brocade's own; they define none.
 */

@layer brocade.semantic {
  :root {
    --brocade-color-accent-claret: var(--brocade-raw-color-red-600, #8e3b2f);
    --brocade-color-accent-violet: var(--brocade-raw-color-violet-600, #584a86);
    --brocade-color-accent-moss: var(--brocade-raw-color-green-600, #33604f);
    --brocade-color-accent-amber: var(--brocade-raw-color-orange-600, #7e5a1c);
    --brocade-color-foreground-soft: var(--brocade-raw-color-neutral-800, #463f37);
    --brocade-color-wash-warm: var(--brocade-raw-color-wash-warm, #fffcf4);
    --brocade-color-wash-cool: var(--brocade-raw-color-wash-cool, #f1eaf2);
    --brocade-font-family-ui: var(--brocade-raw-font-sans, 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif);
    --brocade-font-size-label: var(--brocade-raw-font-size-11-5, 0.71875rem);
    --brocade-font-size-tag: var(--brocade-raw-font-size-12, 0.75rem);
    --brocade-font-size-meta: var(--brocade-raw-font-size-13, 0.8125rem);
    --brocade-font-size-meta-lg: var(--brocade-raw-font-size-13-5, 0.84375rem);
    --brocade-font-size-ui: var(--brocade-raw-font-size-14, 0.875rem);
    --brocade-font-size-button: var(--brocade-raw-font-size-14-5, 0.90625rem);
    --brocade-font-size-note: var(--brocade-raw-font-size-16-5, 1.03125rem);
    --brocade-font-size-blurb: var(--brocade-raw-font-size-17, 1.0625rem);
    --brocade-font-size-aside: var(--brocade-raw-font-size-17-5, 1.09375rem);
    --brocade-font-size-body: var(--brocade-raw-font-size-18, 1.125rem);
    --brocade-font-size-brand: var(--brocade-raw-font-size-19, 1.1875rem);
    --brocade-font-size-colophon: var(--brocade-raw-font-size-19-5, 1.21875rem);
    --brocade-font-size-reading: var(--brocade-raw-font-size-20, 1.25rem);
    --brocade-font-size-quote: var(--brocade-raw-font-size-21, 1.3125rem);
    --brocade-font-size-card-title: var(--brocade-raw-font-size-21-5, 1.34375rem);
    --brocade-font-size-item-title: var(--brocade-raw-font-size-23, 1.4375rem);
    --brocade-font-size-subhead: var(--brocade-raw-font-size-27, 1.6875rem);
    --brocade-font-size-dropcap: var(--brocade-raw-font-size-62, 3.875rem);
    --brocade-font-size-display: var(--brocade-raw-font-size-fluid-display, clamp(2.375rem, 6.6vw, 3.625rem));
    --brocade-font-size-lede: var(--brocade-raw-font-size-fluid-lede, clamp(1.4375rem, 3.4vw, 1.9375rem));
    --brocade-font-size-page-title: var(--brocade-raw-font-size-fluid-page, clamp(2.125rem, 5.6vw, 3.125rem));
    --brocade-font-size-section-title: var(--brocade-raw-font-size-fluid-section, clamp(1.5625rem, 3.2vw, 2rem));
    --brocade-font-size-article-title: var(--brocade-raw-font-size-fluid-article, clamp(1.9375rem, 5vw, 2.75rem));
    --brocade-font-size-intro: var(--brocade-raw-font-size-fluid-intro, clamp(1.125rem, 2.1vw, 1.28125rem));
    --brocade-font-weight-reading: var(--brocade-raw-font-weight-light, 300);
    --brocade-font-weight-regular: var(--brocade-raw-font-weight-regular, 400);
    --brocade-line-height-dropcap: var(--brocade-raw-line-height-0-86, 0.86);
    --brocade-line-height-display: var(--brocade-raw-line-height-1-08, 1.08);
    --brocade-line-height-article-title: var(--brocade-raw-line-height-1-14, 1.14);
    --brocade-line-height-title: var(--brocade-raw-line-height-1-25, 1.25);
    --brocade-line-height-item: var(--brocade-raw-line-height-1-3, 1.3);
    --brocade-line-height-list-title: var(--brocade-raw-line-height-1-32, 1.32);
    --brocade-line-height-lede: var(--brocade-raw-line-height-1-34, 1.34);
    --brocade-line-height-snug: var(--brocade-raw-line-height-1-45, 1.45);
    --brocade-line-height-card: var(--brocade-raw-line-height-1-55, 1.55);
    --brocade-line-height-quote: var(--brocade-raw-line-height-1-6, 1.6);
    --brocade-line-height-body: var(--brocade-raw-line-height-1-62, 1.62);
    --brocade-line-height-colophon: var(--brocade-raw-line-height-1-7, 1.7);
    --brocade-line-height-reading: var(--brocade-raw-line-height-1-72, 1.72);
    --brocade-line-height-list: var(--brocade-raw-line-height-2-1, 2.1);
    --brocade-letter-spacing-article-title: var(--brocade-raw-letter-spacing-negative-20, -0.02em);
    --brocade-letter-spacing-display: var(--brocade-raw-letter-spacing-negative-18, -0.018em);
    --brocade-letter-spacing-section-title: var(--brocade-raw-letter-spacing-negative-15, -0.015em);
    --brocade-letter-spacing-item-title: var(--brocade-raw-letter-spacing-negative-12, -0.012em);
    --brocade-letter-spacing-card-title: var(--brocade-raw-letter-spacing-negative-10, -0.01em);
    --brocade-letter-spacing-brand: var(--brocade-raw-letter-spacing-5, 0.005em);
    --brocade-letter-spacing-date: var(--brocade-raw-letter-spacing-60, 0.06em);
    --brocade-letter-spacing-years: var(--brocade-raw-letter-spacing-80, 0.08em);
    --brocade-letter-spacing-tag: var(--brocade-raw-letter-spacing-120, 0.12em);
    --brocade-letter-spacing-kind: var(--brocade-raw-letter-spacing-140, 0.14em);
    --brocade-letter-spacing-eyebrow: var(--brocade-raw-letter-spacing-160, 0.16em);
    --brocade-letter-spacing-kicker: var(--brocade-raw-letter-spacing-180, 0.18em);
    --brocade-letter-spacing-caps: var(--brocade-raw-letter-spacing-200, 0.2em);
    --brocade-space-0: var(--brocade-raw-space-0, 0);
    --brocade-space-2: var(--brocade-raw-space-2, 0.125rem);
    --brocade-space-4: var(--brocade-raw-space-4, 0.25rem);
    --brocade-space-8: var(--brocade-raw-space-8, 0.5rem);
    --brocade-space-12: var(--brocade-raw-space-12, 0.75rem);
    --brocade-space-16: var(--brocade-raw-space-16, 1rem);
    --brocade-space-20: var(--brocade-raw-space-20, 1.25rem);
    --brocade-space-24: var(--brocade-raw-space-24, 1.5rem);
    --brocade-space-32: var(--brocade-raw-space-32, 2rem);
    --brocade-space-40: var(--brocade-raw-space-40, 2.5rem);
    --brocade-space-48: var(--brocade-raw-space-48, 3rem);
    --brocade-space-64: var(--brocade-raw-space-64, 4rem);
    --brocade-space-5: var(--brocade-raw-space-5, 0.3125rem);
    --brocade-space-6: var(--brocade-raw-space-6, 0.375rem);
    --brocade-space-7: var(--brocade-raw-space-7, 0.4375rem);
    --brocade-space-9: var(--brocade-raw-space-9, 0.5625rem);
    --brocade-space-10: var(--brocade-raw-space-10, 0.625rem);
    --brocade-space-11: var(--brocade-raw-space-11, 0.6875rem);
    --brocade-space-14: var(--brocade-raw-space-14, 0.875rem);
    --brocade-space-15: var(--brocade-raw-space-15, 0.9375rem);
    --brocade-space-18: var(--brocade-raw-space-18, 1.125rem);
    --brocade-space-22: var(--brocade-raw-space-22, 1.375rem);
    --brocade-space-26: var(--brocade-raw-space-26, 1.625rem);
    --brocade-space-28: var(--brocade-raw-space-28, 1.75rem);
    --brocade-space-30: var(--brocade-raw-space-30, 1.875rem);
    --brocade-space-36: var(--brocade-raw-space-36, 2.25rem);
    --brocade-space-42: var(--brocade-raw-space-42, 2.625rem);
    --brocade-space-44: var(--brocade-raw-space-44, 2.75rem);
    --brocade-space-52: var(--brocade-raw-space-52, 3.25rem);
    --brocade-space-gutter: var(--brocade-raw-space-fluid-gutter, clamp(1.25rem, 4vw, 2.75rem));
    --brocade-space-hero-top: var(--brocade-raw-space-fluid-hero-top, clamp(3.5rem, 10vw, 6.875rem));
    --brocade-space-hero-bottom: var(--brocade-raw-space-fluid-hero-bottom, clamp(2.25rem, 6vw, 4rem));
    --brocade-space-hero-gap: var(--brocade-raw-space-fluid-hero-gap, clamp(1.875rem, 5vw, 4rem));
    --brocade-space-section: var(--brocade-raw-space-fluid-section, clamp(2.75rem, 6vw, 4.5rem));
    --brocade-space-section-gap: var(--brocade-raw-space-fluid-section-gap, clamp(1.25rem, 4vw, 3rem));
    --brocade-space-section-foot: var(--brocade-raw-space-fluid-section-foot, clamp(1.75rem, 4vw, 2.75rem));
    --brocade-space-rest: var(--brocade-raw-space-fluid-rest, clamp(1.625rem, 4vw, 2.375rem));
    --brocade-space-page: var(--brocade-raw-space-fluid-page, clamp(2.75rem, 7vw, 5.5rem));
    --brocade-space-article: var(--brocade-raw-space-fluid-article, clamp(2.25rem, 6vw, 4.75rem));
    --brocade-space-card: var(--brocade-raw-space-fluid-card, clamp(1.25rem, 2.6vw, 1.625rem));
    --brocade-space-history-gap: var(--brocade-raw-space-fluid-history-gap, clamp(2.125rem, 5vw, 3.75rem));
    --brocade-width-site: var(--brocade-raw-width-site, 68.75rem);
    --brocade-width-reading: var(--brocade-raw-width-reading, 33rem);
    --brocade-width-lede: var(--brocade-raw-width-lede, 22ch);
    --brocade-width-blurb: var(--brocade-raw-width-blurb, 40rem);
    --brocade-width-contact: var(--brocade-raw-width-contact, 44rem);
    --brocade-width-rest: var(--brocade-raw-width-rest, 54rem);
    --brocade-width-grid-hero: var(--brocade-raw-width-grid-300, min(100%, 18.75rem));
    --brocade-width-grid-interest: var(--brocade-raw-width-grid-255, min(100%, 15.9375rem));
    --brocade-width-grid-intro: var(--brocade-raw-width-grid-220, min(100%, 13.75rem));
    --brocade-width-grid-history: var(--brocade-raw-width-grid-320, min(100%, 20rem));
    --brocade-width-grid-footer: var(--brocade-raw-width-grid-210, min(100%, 13.125rem));
    --brocade-size-dot: var(--brocade-raw-size-dot-7, 0.4375rem);
    --brocade-border-width-hairline: var(--brocade-raw-border-width-1, 1px);
    --brocade-border-width-mark: var(--brocade-raw-border-width-1-5, 1.5px);
    --brocade-border-width-rule: var(--brocade-raw-border-width-2, 2px);
    --brocade-border-width-edge: var(--brocade-raw-border-width-3, 3px);
    --brocade-border-width-underline: var(--brocade-raw-border-width-0-5, 0.5px);
    --brocade-radius-button: var(--brocade-raw-radius-2, 0.125rem);
    --brocade-radius-dot: var(--brocade-raw-radius-full, 9999px);
    --brocade-offset-underline: var(--brocade-raw-offset-underline-3, 3px);
    --brocade-offset-underline-wide: var(--brocade-raw-offset-underline-4, 4px);
    --brocade-offset-dot: var(--brocade-raw-offset-dot-4, -4px);
    --brocade-offset-dot-top: var(--brocade-raw-offset-dot-9, 0.5625rem);
    --brocade-shadow-lifted: var(--brocade-raw-shadow-lifted, 0 20px 44px -34px rgb(60 44 28 / 0.6));
    --brocade-blur-header: var(--brocade-raw-blur-10, 10px);
    --brocade-opacity-header: var(--brocade-raw-opacity-88, 88%);
    --brocade-z-index-header: var(--brocade-raw-z-index-sticky, 1100);
    --brocade-duration-bloom: var(--brocade-raw-duration-500, 500ms);
    --brocade-duration-hover: var(--brocade-raw-duration-150, 150ms);
    --brocade-duration-notice: var(--brocade-raw-duration-2400, 2400ms);
    --brocade-easing-bloom: var(--brocade-raw-easing-bloom, cubic-bezier(0.2, 0.7, 0.3, 1));
    --brocade-scale-bloom: var(--brocade-raw-scale-99, 0.99);
  }
}


/**
 * Brocade Modes Index
 * 
 * Imports all mode files with proper CSS layer ordering.
 * Layer precedence (highest to lowest):
 * 1. contrast (accessibility takes priority)
 * 2. motion (accessibility)
 * 3. transparency (accessibility)
 * 4. color-scheme (aesthetic)
 */

/* Define layer order */
@layer brocade.modes.color-scheme,
       brocade.modes.transparency,
       brocade.modes.motion,
       brocade.modes.contrast;

/* Import modes - they will be placed in their declared layers */
/**
 * Brocade Light Mode
 * 
 * Light mode semantic token overrides.
 * This is primarily for explicit class activation when you want to force light mode
 * within a dark mode context, or for systems that default to dark.
 * Uses CSS layers for deterministic precedence.
 */

@layer brocade.modes.color-scheme {
  /* ========================================================================
     Light Mode - Media Query Activation
     ======================================================================== */
  
  @media (prefers-color-scheme: light) {
    :root {
      /* These match the default semantic values, included for completeness */
      
      /* Background colors */
      --brocade-color-background-base: var(--brocade-raw-color-neutral-100, #faf7f1);
      --brocade-color-background-muted: var(--brocade-raw-color-neutral-200, #f2ece1);
      --brocade-color-background-elevated: var(--brocade-raw-color-neutral-50, #fffefb);
      --brocade-color-background-hover: var(--brocade-raw-color-neutral-200, #f2ece1);
      --brocade-color-background-active: var(--brocade-raw-color-neutral-300, #e0d7c8);
      
      /* Foreground colors */
      --brocade-color-foreground-base: var(--brocade-raw-color-neutral-950, #1b1815);
      --brocade-color-foreground-muted: var(--brocade-raw-color-neutral-600, #6b6155);
      --brocade-color-foreground-subtle: var(--brocade-raw-color-neutral-500, #9c9081);
      --brocade-color-foreground-disabled: var(--brocade-raw-color-neutral-400, #cfc3b0);
      
      /* Border colors */
      --brocade-color-border-base: var(--brocade-raw-color-neutral-300, #e0d7c8);
      --brocade-color-border-strong: var(--brocade-raw-color-neutral-400, #cfc3b0);
      --brocade-color-border-muted: var(--brocade-raw-color-neutral-200, #f2ece1);
      --brocade-color-border-hover: var(--brocade-raw-color-neutral-600, #6b6155);
      
      /* Muted colors */
      --brocade-color-muted-base: var(--brocade-raw-color-neutral-200, #f2ece1);
      --brocade-color-muted-foreground: var(--brocade-raw-color-neutral-600, #6b6155);
      
      /* Icon colors */
      --brocade-icon-color-base: var(--brocade-color-foreground-base, #171717);
      --brocade-icon-color-muted: var(--brocade-color-foreground-muted, #525252);
      --brocade-icon-color-subtle: var(--brocade-color-foreground-subtle, #737373);
    }
  }
  
  /* ========================================================================
     Light Mode - Class Activation (for forcing light in dark contexts)
     ======================================================================== */
  
  .mode-light {
    /* Background colors */
    --brocade-color-background-base: var(--brocade-raw-color-neutral-100, #faf7f1);
    --brocade-color-background-muted: var(--brocade-raw-color-neutral-200, #f2ece1);
    --brocade-color-background-elevated: var(--brocade-raw-color-neutral-50, #fffefb);
    --brocade-color-background-hover: var(--brocade-raw-color-neutral-200, #f2ece1);
    --brocade-color-background-active: var(--brocade-raw-color-neutral-300, #e0d7c8);
    
    /* Foreground colors */
    --brocade-color-foreground-base: var(--brocade-raw-color-neutral-950, #1b1815);
    --brocade-color-foreground-muted: var(--brocade-raw-color-neutral-600, #6b6155);
    --brocade-color-foreground-subtle: var(--brocade-raw-color-neutral-500, #9c9081);
    --brocade-color-foreground-disabled: var(--brocade-raw-color-neutral-400, #cfc3b0);
    
    /* Border colors */
    --brocade-color-border-base: var(--brocade-raw-color-neutral-300, #e0d7c8);
    --brocade-color-border-strong: var(--brocade-raw-color-neutral-400, #cfc3b0);
    --brocade-color-border-muted: var(--brocade-raw-color-neutral-200, #f2ece1);
    --brocade-color-border-hover: var(--brocade-raw-color-neutral-600, #6b6155);
    
    /* Muted colors */
    --brocade-color-muted-base: var(--brocade-raw-color-neutral-200, #f2ece1);
    --brocade-color-muted-foreground: var(--brocade-raw-color-neutral-600, #6b6155);
    
    /* Icon colors */
    --brocade-icon-color-base: var(--brocade-color-foreground-base, #171717);
    --brocade-icon-color-muted: var(--brocade-color-foreground-muted, #525252);
    --brocade-icon-color-subtle: var(--brocade-color-foreground-subtle, #737373);
  }
}

/**
 * Brocade Dark Mode
 * 
 * Dark mode semantic token overrides.
 * Activates via @media (prefers-color-scheme: dark) or .mode-dark class.
 * Uses CSS layers for deterministic precedence.
 */

@layer brocade.modes.color-scheme {
  /* ========================================================================
     Dark Mode - Media Query Activation
     ======================================================================== */
  
  @media (prefers-color-scheme: dark) {
    :root {
      /* Background colors */
      --brocade-color-background-base: var(--brocade-raw-color-neutral-950, #1b1815);
      --brocade-color-background-muted: var(--brocade-raw-color-neutral-900, #292420);
      --brocade-color-background-elevated: var(--brocade-raw-color-neutral-900, #292420);
      --brocade-color-background-hover: var(--brocade-raw-color-neutral-800, #463f37);
      --brocade-color-background-active: var(--brocade-raw-color-neutral-700, #585046);
      
      /* Foreground colors */
      --brocade-color-foreground-base: var(--brocade-raw-color-neutral-100, #faf7f1);
      --brocade-color-foreground-muted: var(--brocade-raw-color-neutral-400, #cfc3b0);
      --brocade-color-foreground-subtle: var(--brocade-raw-color-neutral-500, #9c9081);
      --brocade-color-foreground-disabled: var(--brocade-raw-color-neutral-600, #6b6155);
      
      /* Border colors */
      --brocade-color-border-base: var(--brocade-raw-color-neutral-800, #463f37);
      --brocade-color-border-strong: var(--brocade-raw-color-neutral-600, #6b6155);
      --brocade-color-border-muted: var(--brocade-raw-color-neutral-900, #292420);
      --brocade-color-border-hover: var(--brocade-raw-color-neutral-400, #cfc3b0);
      
      /* Muted colors */
      --brocade-color-muted-base: var(--brocade-raw-color-neutral-900, #292420);
      --brocade-color-muted-foreground: var(--brocade-raw-color-neutral-400, #cfc3b0);
      
      /* Icon colors */
      --brocade-icon-color-base: var(--brocade-color-foreground-base, #fafafa);
      --brocade-icon-color-muted: var(--brocade-color-foreground-muted, #a3a3a3);
      --brocade-icon-color-subtle: var(--brocade-color-foreground-subtle, #737373);
    }
  }
  
  /* ========================================================================
     Dark Mode - Class Activation
     ======================================================================== */
  
  .mode-dark {
    /* Background colors */
    --brocade-color-background-base: var(--brocade-raw-color-neutral-950, #1b1815);
    --brocade-color-background-muted: var(--brocade-raw-color-neutral-900, #292420);
    --brocade-color-background-elevated: var(--brocade-raw-color-neutral-900, #292420);
    --brocade-color-background-hover: var(--brocade-raw-color-neutral-800, #463f37);
    --brocade-color-background-active: var(--brocade-raw-color-neutral-700, #585046);
    
    /* Foreground colors */
    --brocade-color-foreground-base: var(--brocade-raw-color-neutral-100, #faf7f1);
    --brocade-color-foreground-muted: var(--brocade-raw-color-neutral-400, #cfc3b0);
    --brocade-color-foreground-subtle: var(--brocade-raw-color-neutral-500, #9c9081);
    --brocade-color-foreground-disabled: var(--brocade-raw-color-neutral-600, #6b6155);
    
    /* Border colors */
    --brocade-color-border-base: var(--brocade-raw-color-neutral-800, #463f37);
    --brocade-color-border-strong: var(--brocade-raw-color-neutral-600, #6b6155);
    --brocade-color-border-muted: var(--brocade-raw-color-neutral-900, #292420);
    --brocade-color-border-hover: var(--brocade-raw-color-neutral-400, #cfc3b0);
    
    /* Muted colors */
    --brocade-color-muted-base: var(--brocade-raw-color-neutral-900, #292420);
    --brocade-color-muted-foreground: var(--brocade-raw-color-neutral-400, #cfc3b0);
    
    /* Icon colors */
    --brocade-icon-color-base: var(--brocade-color-foreground-base, #fafafa);
    --brocade-icon-color-muted: var(--brocade-color-foreground-muted, #a3a3a3);
    --brocade-icon-color-subtle: var(--brocade-color-foreground-subtle, #737373);
  }
}

/**
 * sirrobert.net — dark-scheme values for the site's own colour roles, and for brocade roles
 * the reference dark mode does not override.
 */

@layer brocade.modes.color-scheme {
  @media (prefers-color-scheme: dark) {
    :root {
      --brocade-color-primary-base: var(--brocade-raw-color-red-300, #cb978e);
      --brocade-color-primary-hover: var(--brocade-raw-color-red-200, #deb7af);
      --brocade-color-primary-active: var(--brocade-raw-color-red-100, #f0d7d2);
      --brocade-color-primary-foreground: var(--brocade-raw-color-neutral-950, #1b1815);
      --brocade-color-secondary-base: var(--brocade-raw-color-violet-300, #a59ec4);
      --brocade-color-secondary-foreground: var(--brocade-raw-color-neutral-950, #1b1815);
      --brocade-color-border-focus: var(--brocade-raw-color-red-300, #cb978e);
      --brocade-color-link-base: var(--brocade-raw-color-red-300, #cb978e);
      --brocade-color-link-hover: var(--brocade-raw-color-red-200, #deb7af);
      --brocade-color-link-visited: var(--brocade-raw-color-red-200, #deb7af);
      --brocade-color-accent-claret: var(--brocade-raw-color-red-300, #cb978e);
      --brocade-color-accent-violet: var(--brocade-raw-color-violet-300, #a59ec4);
      --brocade-color-accent-moss: var(--brocade-raw-color-green-300, #90aba0);
      --brocade-color-accent-amber: var(--brocade-raw-color-orange-300, #bda787);
      --brocade-color-foreground-soft: var(--brocade-raw-color-neutral-300, #e0d7c8);
      --brocade-color-wash-warm: var(--brocade-raw-color-wash-warm-dark, #241f1a);
      --brocade-color-wash-cool: var(--brocade-raw-color-wash-cool-dark, #221d26);
    }
  }

  .mode-dark {
    --brocade-color-primary-base: var(--brocade-raw-color-red-300, #cb978e);
    --brocade-color-primary-hover: var(--brocade-raw-color-red-200, #deb7af);
    --brocade-color-primary-active: var(--brocade-raw-color-red-100, #f0d7d2);
    --brocade-color-primary-foreground: var(--brocade-raw-color-neutral-950, #1b1815);
    --brocade-color-secondary-base: var(--brocade-raw-color-violet-300, #a59ec4);
    --brocade-color-secondary-foreground: var(--brocade-raw-color-neutral-950, #1b1815);
    --brocade-color-border-focus: var(--brocade-raw-color-red-300, #cb978e);
    --brocade-color-link-base: var(--brocade-raw-color-red-300, #cb978e);
    --brocade-color-link-hover: var(--brocade-raw-color-red-200, #deb7af);
    --brocade-color-link-visited: var(--brocade-raw-color-red-200, #deb7af);
    --brocade-color-accent-claret: var(--brocade-raw-color-red-300, #cb978e);
    --brocade-color-accent-violet: var(--brocade-raw-color-violet-300, #a59ec4);
    --brocade-color-accent-moss: var(--brocade-raw-color-green-300, #90aba0);
    --brocade-color-accent-amber: var(--brocade-raw-color-orange-300, #bda787);
    --brocade-color-foreground-soft: var(--brocade-raw-color-neutral-300, #e0d7c8);
    --brocade-color-wash-warm: var(--brocade-raw-color-wash-warm-dark, #241f1a);
    --brocade-color-wash-cool: var(--brocade-raw-color-wash-cool-dark, #221d26);
  }
}

/**
 * Brocade Reduced Transparency Mode
 * 
 * Reduced transparency mode for accessibility.
 * Reduces or eliminates transparency effects.
 * Activates via @media (prefers-reduced-transparency: reduce) or .mode-reduced-transparency class.
 * Uses CSS layers for deterministic precedence.
 */

@layer brocade.modes.transparency {
  /* ========================================================================
     Reduced Transparency Mode - Media Query Activation
     ======================================================================== */
  
  @media (prefers-reduced-transparency: reduce) {
    :root {
      /* Set opacity tokens to fully opaque or nearly opaque */
      --brocade-raw-opacity-5: 1;
      --brocade-raw-opacity-10: 1;
      --brocade-raw-opacity-25: 1;
      --brocade-raw-opacity-50: 1;
      --brocade-raw-opacity-75: 1;
      --brocade-raw-opacity-100: 1;

      /* Scrim must not depend on transparency the user asked to reduce */
      --brocade-color-overlay-base: var(--brocade-raw-color-black, #000000);
    }
  }
  
  /* ========================================================================
     Reduced Transparency Mode - Class Activation
     ======================================================================== */
  
  .mode-reduced-transparency {
    /* Set opacity tokens to fully opaque or nearly opaque */
    --brocade-raw-opacity-5: 1;
    --brocade-raw-opacity-10: 1;
    --brocade-raw-opacity-25: 1;
    --brocade-raw-opacity-50: 1;
    --brocade-raw-opacity-75: 1;
    --brocade-raw-opacity-100: 1;

    /* Scrim must not depend on transparency the user asked to reduce */
    --brocade-color-overlay-base: var(--brocade-raw-color-black, #000000);
  }
}

/**
 * Brocade Reduced Motion Mode
 * 
 * Reduced motion mode for accessibility.
 * Disables or minimizes animations and transitions.
 * Activates via @media (prefers-reduced-motion: reduce) or .mode-reduced-motion class.
 * Uses CSS layers for deterministic precedence.
 */

@layer brocade.modes.motion {
  /* ========================================================================
     Reduced Motion Mode - Media Query Activation
     ======================================================================== */
  
  @media (prefers-reduced-motion: reduce) {
    :root {
      /* Disable durations */
      --brocade-raw-duration-instant: 0ms;
      --brocade-raw-duration-fast: 0ms;
      --brocade-raw-duration-normal: 0ms;
      --brocade-raw-duration-slow: 0ms;
      
      --brocade-raw-duration-0: 0ms;
      --brocade-raw-duration-50: 0ms;
      --brocade-raw-duration-100: 0ms;
      --brocade-raw-duration-150: 0ms;
      --brocade-raw-duration-200: 0ms;
      --brocade-raw-duration-250: 0ms;
      --brocade-raw-duration-300: 0ms;
      --brocade-raw-duration-400: 0ms;
      --brocade-raw-duration-500: 0ms;
      
      /* Semantic durations */
      --brocade-transition-duration-base: 0ms;
      --brocade-transition-duration-fast: 0ms;
      --brocade-transition-duration-slow: 0ms;
    }
    
    /* Disable animations entirely */
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  
  /* ========================================================================
     Reduced Motion Mode - Class Activation
     ======================================================================== */
  
  .mode-reduced-motion {
    /* Disable durations */
    --brocade-raw-duration-instant: 0ms;
    --brocade-raw-duration-fast: 0ms;
    --brocade-raw-duration-normal: 0ms;
    --brocade-raw-duration-slow: 0ms;
    
    --brocade-raw-duration-0: 0ms;
    --brocade-raw-duration-50: 0ms;
    --brocade-raw-duration-100: 0ms;
    --brocade-raw-duration-150: 0ms;
    --brocade-raw-duration-200: 0ms;
    --brocade-raw-duration-250: 0ms;
    --brocade-raw-duration-300: 0ms;
    --brocade-raw-duration-400: 0ms;
    --brocade-raw-duration-500: 0ms;
    
    /* Semantic durations */
    --brocade-transition-duration-base: 0ms;
    --brocade-transition-duration-fast: 0ms;
    --brocade-transition-duration-slow: 0ms;
  }
  
  .mode-reduced-motion *,
  .mode-reduced-motion *::before,
  .mode-reduced-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/**
 * Brocade High Contrast Mode
 * 
 * High contrast mode for accessibility.
 * Increases contrast ratios and border visibility.
 * Activates via @media (prefers-contrast: more) or .mode-high-contrast class.
 * Uses CSS layers for deterministic precedence.
 */

@layer brocade.modes.contrast {
  /* ========================================================================
     High Contrast Mode - Media Query Activation
     ======================================================================== */
  
  @media (prefers-contrast: more) {
    :root {
      /* Maximum contrast backgrounds */
      --brocade-color-background-base: var(--brocade-raw-color-white, #ffffff);
      --brocade-color-background-muted: var(--brocade-raw-color-neutral-100, #faf7f1);
      
      /* Maximum contrast foreground */
      --brocade-color-foreground-base: var(--brocade-raw-color-black, #000000);
      --brocade-color-foreground-muted: var(--brocade-raw-color-neutral-900, #292420);
      --brocade-color-foreground-subtle: var(--brocade-raw-color-neutral-800, #463f37);
      
      /* High contrast borders */
      --brocade-color-border-base: var(--brocade-raw-color-black, #000000);
      --brocade-color-border-strong: var(--brocade-raw-color-black, #000000);
      --brocade-border-width-base: var(--brocade-raw-border-width-2, 2px);
      --brocade-border-width-thin: var(--brocade-raw-border-width-2, 2px);
      
      /* Enhanced focus rings */
      --brocade-focus-ring-width: var(--brocade-raw-focus-ring-width-4, 4px);
      --brocade-focus-ring-color: var(--brocade-raw-color-black, #000000);
      
      /* Simplified shadows (remove or reduce) */
      --brocade-shadow-base: var(--brocade-raw-shadow-none, none);
      --brocade-shadow-card: var(--brocade-raw-shadow-none, none);
    }
  }
  
  /* ========================================================================
     High Contrast Mode - Class Activation
     ======================================================================== */
  
  .mode-high-contrast {
    /* Maximum contrast backgrounds */
    --brocade-color-background-base: var(--brocade-raw-color-white, #ffffff);
    --brocade-color-background-muted: var(--brocade-raw-color-neutral-100, #faf7f1);
    
    /* Maximum contrast foreground */
    --brocade-color-foreground-base: var(--brocade-raw-color-black, #000000);
    --brocade-color-foreground-muted: var(--brocade-raw-color-neutral-900, #292420);
    --brocade-color-foreground-subtle: var(--brocade-raw-color-neutral-800, #463f37);
    
    /* High contrast borders */
    --brocade-color-border-base: var(--brocade-raw-color-black, #000000);
    --brocade-color-border-strong: var(--brocade-raw-color-black, #000000);
    --brocade-border-width-base: var(--brocade-raw-border-width-2, 2px);
    --brocade-border-width-thin: var(--brocade-raw-border-width-2, 2px);
    
    /* Enhanced focus rings */
    --brocade-focus-ring-width: var(--brocade-raw-focus-ring-width-4, 4px);
    --brocade-focus-ring-color: var(--brocade-raw-color-black, #000000);
    
    /* Simplified shadows (remove or reduce) */
    --brocade-shadow-base: var(--brocade-raw-shadow-none, none);
    --brocade-shadow-card: var(--brocade-raw-shadow-none, none);
  }
  
  /* ========================================================================
     High Contrast Dark Mode (Composed Modes)
     ======================================================================== */
  
  .mode-dark.mode-high-contrast {
    /* Dark background with maximum contrast */
    --brocade-color-background-base: var(--brocade-raw-color-black, #000000);
    --brocade-color-background-muted: var(--brocade-raw-color-neutral-950, #1b1815);
    
    /* Light foreground with maximum contrast */
    --brocade-color-foreground-base: var(--brocade-raw-color-white, #ffffff);
    --brocade-color-foreground-muted: var(--brocade-raw-color-neutral-100, #faf7f1);
    --brocade-color-foreground-subtle: var(--brocade-raw-color-neutral-200, #f2ece1);
    
    /* Light borders on dark background */
    --brocade-color-border-base: var(--brocade-raw-color-white, #ffffff);
    --brocade-color-border-strong: var(--brocade-raw-color-white, #ffffff);
    
    /* Light focus rings on dark background */
    --brocade-focus-ring-color: var(--brocade-raw-color-white, #ffffff);
  }
  
  @media (prefers-color-scheme: dark) and (prefers-contrast: more) {
    :root {
      /* Dark background with maximum contrast */
      --brocade-color-background-base: var(--brocade-raw-color-black, #000000);
      --brocade-color-background-muted: var(--brocade-raw-color-neutral-950, #1b1815);
      
      /* Light foreground with maximum contrast */
      --brocade-color-foreground-base: var(--brocade-raw-color-white, #ffffff);
      --brocade-color-foreground-muted: var(--brocade-raw-color-neutral-100, #faf7f1);
      --brocade-color-foreground-subtle: var(--brocade-raw-color-neutral-200, #f2ece1);
      
      /* Light borders on dark background */
      --brocade-color-border-base: var(--brocade-raw-color-white, #ffffff);
      --brocade-color-border-strong: var(--brocade-raw-color-white, #ffffff);
      
      /* Light focus rings on dark background */
      --brocade-focus-ring-color: var(--brocade-raw-color-white, #ffffff);
    }
  }
}



:root {
  --brocade-version: "2.2.0";
}