src/css/brand-variables.css

/**
 * Apache Ignite Brand Colors
 * Extracted from legacy site.css
 *
 * These variables define the core brand identity including colors,
 * spacing, and visual design tokens. All values are extracted from
 * the existing site to maintain visual consistency.
 */

:root {
  /* === Primary Brand Colors === */
  /* Apache Ignite red - primary brand color */
  --ai-primary: #ed1c24;
  --ai-primary-dark: #ce2034;
  --ai-primary-light: #f4898d;
  --ai-primary-lighter: #ffcfd1;
  --ai-primary-lightest: #feeff0;

  /* Red color aliases for compatibility */
  --ai-red: #ed1c24;
  --ai-red-dark: #ce2034;

  /* Legacy color aliases for compatibility */
  --red: #ed1c24;
  --red2: #ce2034;
  --red3: #f4898d;
  --red4: #ffcfd1;
  --red5: #feeff0;

  /* === Blue Accent Colors === */
  /* Used for buttons, links, and UI elements */
  --ai-blue: #0070cc;
  --ai-blue-dark: #0061b0;
  --ai-blue-light: #91c2ea;
  --ai-blue-lighter: #e8f2fa;

  /* Legacy color aliases for compatibility */
  --blue: #0070cc;
  --blue2: #0061b0;
  --blue3: #91c2ea;
  --blue4: #e8f2fa;

  /* === Grayscale Palette === */
  /* Gray tones for backgrounds, borders, and text */
  --ai-gray-50: #f6f6f6;
  --ai-gray-100: #f0f0f0;
  --ai-gray-200: #e6e6e6;
  --ai-gray-300: #9c9c9c;
  --ai-gray-400: #6e6e6e;
  --ai-gray-500: #2d2d2d;

  /* Legacy grey aliases for compatibility */
  --grey: #f6f6f6;
  --grey2: #e6e6e6;
  --grey3: #f0f0f0;
  --grey4: #9c9c9c;
  --grey5: #6e6e6e;

  /* === Dark Theme Colors === */
  /* Used for dark sections and navigation */
  --ai-dark: #2d2d2d;
  --ai-dark-light: #6e6e6e;
  --ai-dark-lighter: #9c9c9c;

  /* Legacy dark aliases for compatibility */
  --dark: #2d2d2d;
  --dark2: #6e6e6e;
  --dark3: #9c9c9c;

  /* === Background Colors === */
  /* Page and section backgrounds */
  --ai-bg-primary: #ffffff;
  --ai-bg-secondary: #f6f6f6;
  --ai-bg-tertiary: #f0f0f0;
  --ai-bg-blue: #0070cc;
  --ai-bg-dark: #2d2d2d;
  --ai-bg-gray: #f1f1f1;

  /* === Border Colors === */
  /* Used for component borders and dividers */
  --ai-border-light: #f0f0f0;
  --ai-border-medium: #e6e6e6;

  /* === Text Colors === */
  /* Text color hierarchy */
  --ai-text-primary: #000000;
  --ai-text-secondary: #6e6e6e;
  --ai-text-tertiary: #9c9c9c;
  --ai-text-inverse: #ffffff;

  /* === Link Colors === */
  /* Default link styling */
  --ai-link: var(--ai-blue);
  --ai-link-hover: var(--ai-blue-dark);

  /* === Fluid Spacing Scale === */
  /* Scales smoothly between mobile and desktop viewports */
  /* Format: clamp(mobile, formula, desktop) */
  /* Eliminates need for responsive spacing media queries */
  --ai-spacing-xs: clamp(0.5rem, 0.4rem + 0.3vw, 1rem);      /* 5-10px */
  --ai-spacing-sm: clamp(1rem, 0.8rem + 0.5vw, 1.5rem);      /* 10-15px */
  --ai-spacing-md: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);      /* 15-20px */
  --ai-spacing-lg: clamp(2rem, 1.5rem + 1.5vw, 3rem);        /* 20-30px */
  --ai-spacing-xl: clamp(3rem, 2.5rem + 1.5vw, 4rem);        /* 30-40px */
  --ai-spacing-2xl: clamp(4rem, 3rem + 2vw, 5rem);           /* 40-50px */
  --ai-spacing-3xl: clamp(5rem, 4rem + 2.5vw, 6rem);         /* 50-60px */
  --ai-spacing-4xl: clamp(6rem, 5rem + 3vw, 8rem);           /* 60-80px */
  --ai-spacing-5xl: clamp(8rem, 6rem + 4vw, 10rem);          /* 80-100px */
  --ai-spacing-6xl: clamp(10rem, 8rem + 5vw, 13rem);         /* 100-130px */

  /* === Section Spacing === */
  /* Larger gaps for page sections with fluid scaling */
  --section-spacing-xxs: clamp(2rem, 1.5rem + 1.5vw, 3rem);  /* 20-30px */
  --section-spacing-xs: clamp(3rem, 2.5rem + 2vw, 5rem);     /* 30-50px */
  --section-spacing-sm: clamp(5rem, 4rem + 3vw, 7rem);       /* 50-70px */
  --section-spacing-md: clamp(7rem, 6rem + 4vw, 10rem);      /* 70-100px */
  --section-spacing-lg: clamp(10rem, 8rem + 5vw, 13rem);     /* 100-130px */
  --section-spacing-xl: clamp(13rem, 11rem + 6vw, 18rem);    /* 130-180px */

  /* === Border Radius === */
  /* Rounded corners for UI elements */
  --ai-radius-xs: 0.3rem;   /* 3px equivalent */
  --ai-radius-sm: 0.8rem;   /* 8px equivalent */
  --ai-radius-md: 1rem;     /* 10px equivalent */
  --ai-radius-lg: 1.6rem;   /* 16px equivalent */
  --ai-radius-xl: 2rem;     /* 20px equivalent */
  --ai-radius-2xl: 3rem;    /* 30px equivalent */
  --ai-radius-circle: 50%;  /* Perfect circle */
  --ai-radius-full: 9999px; /* Pill shape */

  /* === Shadows === */
  /* Elevation and depth */
  --ai-shadow-sm: 0 0 10px rgba(0, 0, 0, 0.05);
  --ai-shadow-md: 0 0 10px rgba(0, 0, 0, 0.1);
  --ai-shadow-lg: 8px 8px 10px rgba(0, 0, 0, 0.1);
  --ai-shadow-scroll-top: 0 0 20px rgba(0, 0, 0, 0.2);

  /* === Transitions === */
  /* Standard transition timing */
  --ai-transition-fast: 0.1s ease-in-out;
  --ai-transition-normal: 0.2s ease;
  --ai-transition-slow: 0.3s ease;
  --ai-transition-slower: 0.4s ease;

  /* === Z-Index Layers === */
  /* Stacking order for layered elements */
  --ai-z-dropdown: 100;
  --ai-z-dropdown-back: 98;
  --ai-z-header: 120;
  --ai-z-sticky: 100;
  --ai-z-fixed: 200;
  --ai-z-modal-shadow: 3500;
  --ai-z-modal: 4000;

  /* === Special Colors === */
  /* Promotion bar and special elements */
  --ai-promotion-bg: #1b2d93;

  /* === Additional Semantic Colors === */
  /* Added in Phase 1 for better color consistency */
  --ai-text-on-dark: #ffffff;
  --ai-text-on-light: #000000;
  --ai-bg-card: #ffffff;
  --ai-bg-overlay: rgba(0, 0, 0, 0.5);

  /* === Sizing Scale === */
  /* Systematic sizing based on powers of 2 for harmonious proportions */
  --size-0: 0;
  --size-1: 0.4rem;   /*  4px */
  --size-2: 0.8rem;   /*  8px */
  --size-3: 1.2rem;   /* 12px */
  --size-4: 1.6rem;   /* 16px */
  --size-5: 2rem;     /* 20px */
  --size-6: 2.4rem;   /* 24px */
  --size-7: 2.8rem;   /* 28px */
  --size-8: 3.2rem;   /* 32px */
  --size-10: 4rem;    /* 40px */
  --size-12: 4.8rem;  /* 48px */
  --size-14: 5.6rem;  /* 56px */
  --size-16: 6.4rem;  /* 64px */
  --size-20: 8rem;    /* 80px */
  --size-24: 9.6rem;  /* 96px */
  --size-32: 12.8rem; /* 128px */

  /* === Icon Sizes === */
  /* Consistent icon sizing across the site */
  --icon-xs: 1.2rem;  /* 12px */
  --icon-sm: 1.6rem;  /* 16px */
  --icon-md: 2.4rem;  /* 24px */
  --icon-lg: 3.2rem;  /* 32px */
  --icon-xl: 4.8rem;  /* 48px */
  --icon-2xl: 6.4rem; /* 64px */

  /* === Container Widths === */
  /* Maximum widths for responsive containers */
  --container-xs: 540px;
  --container-sm: 720px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1300px;

  /* === Common Layout Values === */
  /* Frequently used layout dimensions */
  --header-height: 9.6rem;  /* 96px - navbar height */
  --footer-height: auto;
  --sidebar-width: 25rem;   /* 250px */
}