/* brand.css — Aisle FLO centralized design tokens */
/* Pixel-accurate values from AF_icon_F2.png */
:root {
  /* === LOGO COLORS === */
  --af-blue: #00A5FF;
  --af-blue-hover: #0088E6;
  --af-blue-light: #E6F5FF;
  --af-gold: #FFAA01;
  --af-gold-hover: #E89900;
  --af-gold-light: #FFF3D6;
  --af-white: #FFFFFF;

  /* === BACKGROUNDS === */
  --af-hero: #0B2545;          /* Deep navy — hero sections only */
  --af-dark: #0B2545;          /* Replaces #0d1117 on dark pages */
  --af-dark-card: #112D4E;     /* Card surfaces on dark pages */
  --af-light: #F8FAFC;         /* Body on light pages */
  --af-cream: #F8F9FB;         /* Existing index.html cream, kept */

  /* === TEXT === */
  --af-ink: #1C2B3A;           /* Body text on light pages */
  --af-soft: #4A6070;          /* Secondary text on light */
  --af-muted: #7A8C9A;         /* Tertiary/captions on light */
  --af-text-dark: rgba(255,255,255,0.85);   /* Body text on dark pages */
  --af-muted-dark: rgba(255,255,255,0.50);  /* Secondary on dark pages */

  /* === BORDERS === */
  --af-border-light: #E2EAF0;
  --af-border-dark: rgba(255,255,255,0.09);

  /* === SHAPE === */
  --af-radius: 12px;
  --af-radius-lg: 18px;

  /* === TYPOGRAPHY === */
  --af-font-display: 'Outfit', 'Montserrat', sans-serif;
  --af-font-body: 'Inter', 'Instrument Sans', sans-serif;
}

/* Centralized fix for footer platform emoji buttons:
   Overrides .footer-col a specificity to restore center flex layout, sizing, and hover animations. */
.footer-col .footer-plat-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  text-decoration: none !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s !important;
}
.footer-col .footer-plat-btn:hover {
  transform: scale(1.2) translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
}