/* =============================================================================
   BOOTSTRAP COMPATIBILITY LAYER
   =============================================================================
   Maps Restoke design tokens to Bootstrap CSS variable names for compatibility
   with Bootstrap components. Load after colors.primitives.css and colors.semantic.css.

   These aliases allow Bootstrap components to use our design system colors.
   Prefer using --rs-* tokens directly in new code.
   ============================================================================= */

@layer base {
    :root {

      /* ==========================================
         GRAY ALIASES
         ========================================== */
      --bs-gray-100: var(--rs-gray-100);
      --bs-gray-200: var(--rs-gray-200);
      --bs-gray-300: var(--rs-gray-300);
      --bs-gray-400: var(--rs-gray-400);
      --bs-gray-500: var(--rs-gray-500);
      --bs-gray-600: var(--rs-gray-600);
      --bs-gray-700: var(--rs-gray-700);
      --bs-gray-800: var(--rs-gray-800);
      --bs-gray-900: var(--rs-gray-900);

      /* ==========================================
         PRIMARY / BRAND ALIASES
         ========================================== */
      --bs-primary: var(--rs-primary);
      --bs-primary-rgb: var(--rs-brand-500-rgb);
      --bs-primary-numbers: var(--rs-brand-500-rgb);
      --bs-primary-text: var(--rs-utility-brand-500);  /* Higher contrast for text usage */
      --bs-secondary-alt: var(--rs-brand-200);
      --bs-secondary-alt-numbers: var(--rs-brand-200);

      /* ==========================================
         STATUS COLOR ALIASES
         ========================================== */
      /* Danger / Error */
      --bs-danger: var(--rs-error-500);
      --bs-danger-numbers: var(--rs-error-500-rgb);

      /* Warning */
      --bs-warning: var(--rs-warning-500);
      --bs-warning-numbers: var(--rs-warning-500-rgb);

      /* Success */
      --bs-success: var(--rs-success-500);
      --bs-success-numbers: var(--rs-success-500-rgb);

      /* Info */
      --bs-info: var(--rs-blue-500);
      --bs-info-numbers: var(--rs-blue-500-rgb);

      /* Teal */
      --bs-teal: var(--rs-aqua-500);
      --bs-teal-numbers: var(--rs-aqua-500-rgb);

      /* Pink */
      --bs-pink: var(--rs-rose-500);
      --bs-pink-numbers: var(--rs-rose-500-rgb);

      /* ==========================================
         EXTENDED COLORS
         ========================================== */
      --bs-purple: var(--rs-purple-500);
      --bs-purple-numbers: var(--rs-purple-500);
      --bs-orange: var(--rs-orange-500);
      --bs-orange-numbers: var(--rs-orange-500);
      --bs-indigo: var(--rs-indigo-500);
      --bs-indigo-numbers: var(--rs-indigo-500);

      /* Secondary Bootstrap Color */
      --bs-secondary: var(--rs-gray-500);
      --bs-secondary-numbers: var(--rs-gray-500);
      --bs-light: var(--rs-gray-100);
      --bs-light-numbers: var(--rs-gray-100-rgb);
      --bs-dark: var(--rs-gray-950);
      --bs-dark-numbers: var(--rs-gray-950);

      /* ==========================================
         BODY / PAGE COLORS
         ========================================== */
      --bs-body-background-color: var(--rs-gray-50);
      --bs-body-background-numbers: var(--rs-gray-50);
      --bs-body-bg: var(--rs-white);
      --bs-body-color: var(--rs-form-text);

      /* ==========================================
         TEXT COLORS
         ========================================== */
      --bs-text-tertiary: var(--rs-gray-dark-400);
      --bs-text-tertiary-numbers: var(--rs-gray-dark-400);
      --bs-text-dark-theme-secondary: var(--rs-gray-dark-200);
      --bs-text-dark-theme-secondary-numbers: var(--rs-gray-dark-200);

      /* ==========================================
         BORDER COLORS
         ========================================== */
      --bs-border-color: var(--rs-gray-200);
      --bs-border-color-light: var(--rs-gray-100);
      --bs-border-secondary: var(--rs-gray-800);
      --bs-border-secondary-numbers: var(--rs-gray-800);

      /* ==========================================
         LIGHT BACKGROUNDS (Badges/Containers)
         ========================================== */

      /* Light/Neutral */
      --bs-light-bg: var(--rs-gray-50);
      --bs-light-bg-subtle: var(--rs-gray-25);
      --bs-light-border: var(--rs-gray-200);
      --bs-light-border-subtle: var(--rs-gray-100);

      /* Danger - for error states */
      --bs-danger-light-bg: var(--rs-error-50);
      --bs-danger-light-bg-subtle: var(--rs-error-25);
      --bs-danger-light-border: var(--rs-error-100);
      --bs-danger-light-border-subtle: var(--rs-error-50);

      /* Pink - for promotional/premium content */
      --bs-pink-light-bg: var(--rs-rose-50);
      --bs-pink-light-bg-subtle: var(--rs-rose-25);
      --bs-pink-light-border: var(--rs-rose-100);
      --bs-pink-light-border-subtle: var(--rs-rose-50);

      /* Warning - for caution states */
      --bs-warning-light-bg: var(--rs-warning-50);
      --bs-warning-light-bg-subtle: var(--rs-warning-25);
      --bs-warning-light-border: var(--rs-warning-100);
      --bs-warning-light-border-subtle: var(--rs-warning-50);

      /* Success - for positive states */
      --bs-success-light-bg: var(--rs-success-50);
      --bs-success-light-bg-subtle: var(--rs-success-25);
      --bs-success-light-border: var(--rs-success-100);
      --bs-success-light-border-subtle: var(--rs-success-50);

      /* Teal/Aqua - for informational accents */
      --bs-teal-light-bg: var(--rs-aqua-50);
      --bs-teal-light-bg-subtle: var(--rs-aqua-25);
      --bs-teal-light-border: var(--rs-aqua-100);
      --bs-teal-light-border-subtle: var(--rs-aqua-50);

      /* Info/Blue - for informational states */
      --bs-info-light-bg: var(--rs-blue-50);
      --bs-info-light-bg-subtle: var(--rs-blue-25);
      --bs-info-light-border: var(--rs-blue-100);
      --bs-info-light-border-subtle: var(--rs-blue-50);

      /* Blue - alias for info */
      --bs-blue-light-bg: var(--rs-blue-50);
      --bs-blue-light-bg-subtle: var(--rs-blue-25);
      --bs-blue-light-border: var(--rs-blue-100);
      --bs-blue-light-border-subtle: var(--rs-blue-50);

      /* Indigo - for alternative info states */
      --bs-indigo-light-bg: var(--rs-indigo-50);
      --bs-indigo-light-bg-subtle: var(--rs-indigo-25);
      --bs-indigo-light-border: var(--rs-indigo-100);
      --bs-indigo-light-border-subtle: var(--rs-indigo-50);

      /* Purple - for premium/special features */
      --bs-purple-light-bg: var(--rs-purple-50);
      --bs-purple-light-bg-subtle: var(--rs-purple-25);
      --bs-purple-light-border: var(--rs-purple-100);
      --bs-purple-light-border-subtle: var(--rs-purple-50);

      /* Magenta - for promotional content */
      --bs-magenta-light-bg: var(--rs-magenta-50);
      --bs-magenta-light-bg-subtle: var(--rs-magenta-25);
      --bs-magenta-light-border: var(--rs-magenta-100);
      --bs-magenta-light-border-subtle: var(--rs-magenta-50);

      /* Orange - for brand-tinted backgrounds */
      --bs-orange-light-bg: var(--rs-brand-50);
      --bs-orange-light-bg-subtle: var(--rs-brand-25);
      --bs-orange-light-border: var(--rs-brand-100);
      --bs-orange-light-border-subtle: var(--rs-brand-50);

      /* Yellow - for highlights and attention */
      --bs-yellow-light-bg: var(--rs-yellow-50);
      --bs-yellow-light-bg-subtle: var(--rs-yellow-25);
      --bs-yellow-light-border: var(--rs-yellow-100);
      --bs-yellow-light-border-subtle: var(--rs-yellow-50);

      /* ==========================================
         DARK THEME COLORS
         ========================================== */

      /* Dark Backgrounds */
      --bs-dark-bg-primary: var(--rs-gray-dark-800);
      --bs-dark-bg-secondary: var(--rs-gray-dark-700);
      --bs-dark-bg-tertiary: var(--rs-gray-800);
      --bs-dark-bg-elevated: var(--rs-gray-700);
      --bs-dark-bg-hover: var(--rs-gray-600);

      /* Dark Theme Text */
      --bs-dark-text-primary: var(--rs-gray-dark-25);
      --bs-dark-text-secondary: var(--rs-gray-dark-100);
      --bs-dark-text-tertiary: var(--rs-gray-dark-300);
      --bs-dark-text-muted: var(--rs-gray-dark-400);
      --bs-dark-theme-primary: var(--rs-gray-dark-25);
      --bs-dark-theme-primary-numbers: var(--rs-gray-dark-25);
      --bs-dark-theme-secondary: var(--rs-gray-dark-100);
      --bs-dark-theme-secondary-numbers: var(--rs-gray-dark-100);
      --bs-dark-theme-icon-color: var(--rs-gray-dark-300);
      --bs-dark-theme-hover-color: var(--rs-gray-dark-300);
      --bs-dark-theme-hover-color-numbers: var(--rs-gray-dark-300);

      /* Dark Theme Borders */
      --bs-dark-border-primary: var(--rs-gray-700);
      --bs-dark-border-secondary: var(--rs-gray-600);
      --bs-dark-border-focus: var(--rs-indigo-500);

      /* Dark Theme Brand Colors */
      --bs-dark-primary: var(--rs-brand-400);
      --bs-dark-primary-hover: var(--rs-brand-500);
      --bs-dark-primary-active: var(--rs-brand-600);
      --bs-dark-secondary-alt: var(--rs-brand-300);
      --bs-dark-secondary-alt-hover: var(--rs-brand-400);

      /* Dark Theme Status Colors */
      --bs-dark-success: var(--rs-success-400);
      --bs-dark-success-hover: var(--rs-success-500);
      --bs-dark-info: var(--rs-blue-400);
      --bs-dark-info-hover: var(--rs-blue-500);
      --bs-dark-warning: var(--rs-warning-400);
      --bs-dark-warning-hover: var(--rs-warning-500);
      --bs-dark-danger: var(--rs-error-400);
      --bs-dark-danger-hover: var(--rs-error-500);

      /* ==========================================
         TYPOGRAPHY ALIASES
         ========================================== */
      --bs-body-font-family: var(--rs-font-family-body);
      --bs-headings-font-family: var(--rs-font-family-display);
      --bs-body-font-size: var(--rs-body-font-size);
      --bs-body-line-height: var(--rs-body-line-height);

      /* ==========================================
         BORDER RADIUS ALIASES
         ========================================== */
      --bs-border-radius: var(--rs-radius-md);
      --bs-border-radius-sm: var(--rs-radius-sm);
      --bs-border-radius-lg: var(--rs-radius-lg);
      --bs-border-radius-xl: var(--rs-radius-xl);
      --bs-border-radius-2xl: var(--rs-radius-2xl);
      --bs-border-radius-pill: var(--rs-radius-full);

      /* ==========================================
         LEGACY RADIUS ALIASES
         ==========================================
         @deprecated Use --rs-radius-* tokens directly.
         These map old --radius-* variables to new tokens
         for backwards compatibility with existing code.
         ========================================== */
      --radius-none: var(--rs-radius-none);
      --radius-xxs: var(--rs-radius-xxs);
      --radius-xs: var(--rs-radius-xs);
      --radius-sm: var(--rs-radius-sm);
      --radius-md: var(--rs-radius-md);
      --radius-lg: var(--rs-radius-lg);
      --radius-xl: var(--rs-radius-xl);
      --radius-2xl: var(--rs-radius-2xl);
      --radius-3xl: var(--rs-radius-3xl);
      --radius-4xl: var(--rs-radius-4xl);
      --radius-full: var(--rs-radius-full);

      /* ==========================================
         SHADOW ALIASES
         ========================================== */
      --bs-shadow: var(--rs-shadow-button);
      --bs-shadow-xs: var(--rs-shadow-xs);
      --bs-dark-shadow: var(--rs-shadow-md);
      --bs-dark-shadow-lg: var(--rs-shadow-lg);

      /* ==========================================
         SPACING ALIASES
         ========================================== */
      --bs-spacer: var(--rs-spacing-xl);
    }

    /* ==========================================
       BOOTSTRAP 5 GAP UTILITIES
       ==========================================
       Bootstrap 4.5 doesn't include gap utilities.
       These classes provide Bootstrap 5-style gap
       support using --rs-* design tokens.
       ========================================== */

    /* Gap (both row and column) */
    .gap-0 { gap: 0 !important; }
    .gap-1 { gap: var(--rs-spacing-xs) !important; }
    .gap-2 { gap: var(--rs-spacing-sm) !important; }
    .gap-3 { gap: var(--rs-spacing-lg) !important; }
    .gap-4 { gap: var(--rs-spacing-2xl) !important; }
    .gap-5 { gap: var(--rs-spacing-4xl) !important; }

    /* Row gap */
    .row-gap-0 { row-gap: 0 !important; }
    .row-gap-1 { row-gap: var(--rs-spacing-xs) !important; }
    .row-gap-2 { row-gap: var(--rs-spacing-sm) !important; }
    .row-gap-3 { row-gap: var(--rs-spacing-lg) !important; }
    .row-gap-4 { row-gap: var(--rs-spacing-2xl) !important; }
    .row-gap-5 { row-gap: var(--rs-spacing-4xl) !important; }

    /* Column gap */
    .column-gap-0 { column-gap: 0 !important; }
    .column-gap-1 { column-gap: var(--rs-spacing-xs) !important; }
    .column-gap-2 { column-gap: var(--rs-spacing-sm) !important; }
    .column-gap-3 { column-gap: var(--rs-spacing-lg) !important; }
    .column-gap-4 { column-gap: var(--rs-spacing-2xl) !important; }
    .column-gap-5 { column-gap: var(--rs-spacing-4xl) !important; }

    /* ==========================================
       BOOTSTRAP 5 TYPOGRAPHY UTILITIES
       ==========================================
       Bootstrap 4.5 lacks fs-* and some fw-* classes.
       These provide Bootstrap 5-style typography
       support using --rs-* design tokens.
       ========================================== */

    /* Font weights */
    .fw-semibold { font-weight: var(--rs-font-weight-semibold) !important; }
    .fw-medium { font-weight: var(--rs-font-weight-medium) !important; }

    /* Font sizes */
    .fs-1 { font-size: var(--rs-font-size-display-lg) !important; }
    .fs-2 { font-size: var(--rs-font-size-display-sm) !important; }
    .fs-3 { font-size: var(--rs-font-size-display-xs) !important; }
    .fs-4 { font-size: var(--rs-font-size-text-xl) !important; }
    .fs-5 { font-size: var(--rs-font-size-text-lg) !important; }
    .fs-6 { font-size: var(--rs-font-size-text-sm) !important; }
}