/*
 * Aileron Brand Tokens
 * CSS Custom Properties for consistent theming
 *
 * Usage: Import this file at the root of your app, then use
 * var(--color-sunset) etc. throughout your styles.
 */

:root {
  /* ========================
     COLOR TOKENS
     ======================== */

  /* Primary Blues */
  --color-deep:        #1A2744;
  --color-navy:        #1E3055;
  --color-mid-blue:    #2C6CB0;
  --color-sky:         #4A90D9;
  --color-sky-light:   #7BB3E8;

  /* Sunset Accents */
  --color-sunset:       #E8845C;
  --color-sunset-light: #F2A882;
  --color-sunset-glow:  #F5C4A1;
  --color-sunset-dark:  #D47A52;  /* hover state for sunset */

  /* Neutrals */
  --color-cream:      #FFF9F2;
  --color-warm-gray:  #F0E8DF;
  --color-warm-bg:    #F4F0EC;
  --color-soft-gray:  #8A96A8;
  --color-text:       #3D4F6F;
  --color-border:     #EBEDF2;

  /* ========================
     GRADIENTS
     ======================== */
  --gradient-hero:      linear-gradient(135deg, #1A2744 0%, #2C6CB0 50%, #E8845C 100%);
  --gradient-hero-deep: linear-gradient(160deg, #0F1B30 0%, #1A2744 20%, #2C6CB0 60%, #D47A52 100%);
  --gradient-sunset:    linear-gradient(140deg, #E8845C, #F2A882);
  --gradient-sky:       linear-gradient(150deg, #2C6CB0, #4A90D9);
  --gradient-dark-blue: linear-gradient(135deg, #1A2744, #2C6CB0);

  /* ========================
     PAGE BACKGROUNDS
     Default: gradient-wash for most functional pages
     See brand-guide.md for per-flow recommendations
     ======================== */
  --bg-gradient-wash:    linear-gradient(160deg, #EDF2F8 0%, #F5F0EC 50%, #F8F4F0 100%);
  --bg-cool-slate:       #F3F4F7;
  --bg-soft-blue:        #F0F4F9;
  --bg-pure-white:       #FFFFFF;
  --bg-navy-immersive:   #111D30;
  --bg-light-navy:       #E8ECF2;

  /* ========================
     TYPOGRAPHY
     ======================== */
  --font-display:  'Outfit', sans-serif;
  --font-body:     'DM Sans', sans-serif;
  --font-mono:     'Space Mono', monospace;

  /* Font sizes */
  --text-hero:     52px;
  --text-h1:       46px;
  --text-h2:       34px;
  --text-h3:       26px;
  --text-h4:       20px;
  --text-body:     15px;
  --text-small:    13px;
  --text-caption:  11px;
  --text-label:    10px;

  /* ========================
     SPACING
     ======================== */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  80px;

  /* ========================
     RADII
     ======================== */
  --radius-sm:     8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    20px;
  --radius-2xl:   24px;
  --radius-pill:  9999px;
  --radius-icon:  22%;   /* for app icons */

  /* ========================
     SHADOWS
     ======================== */
  --shadow-sm:   0 1px 4px rgba(26, 39, 68, 0.04);
  --shadow-md:   0 2px 20px rgba(26, 39, 68, 0.07);
  --shadow-lg:   0 8px 40px rgba(26, 39, 68, 0.10);
  --shadow-icon: 0 4px 20px rgba(26, 39, 68, 0.12);

  /* ========================
     TRANSITIONS
     ======================== */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* ========================
     HORIZON LINE
     ======================== */
  --horizon-light: rgba(26, 39, 68, 0.06);
  --horizon-dark:  rgba(255, 255, 255, 0.08);

  /* ========================
     OPACITY TOKENS
     ======================== */
  --opacity-aileron-upper:  0.92;  /* upper aileron surface */
  --opacity-aileron-lower-light: 0.14;  /* lower surface on light bg */
  --opacity-aileron-lower-dark:  0.22;  /* lower surface on dark bg */
  --opacity-spark-diagonal: 0.55;  /* spark diagonal lines */
}

/*
 * Utility classes
 */

.aileron-gradient-bg {
  background: var(--gradient-hero);
}

.aileron-gradient-bg-deep {
  background: var(--gradient-hero-deep);
}

.aileron-card {
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.aileron-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.aileron-btn-primary {
  background: var(--color-sunset);
  color: white;
  padding: 14px 32px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.aileron-btn-primary:hover {
  background: var(--color-sunset-dark);
}

.aileron-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: white;
  padding: 14px 32px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.aileron-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
}

.aileron-section-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-sunset);
}

.aileron-horizon {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--horizon-light), transparent);
}

/*
 * Spark animation (for loading states)
 */
@keyframes aileron-spark-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.aileron-spark-animated line {
  animation: aileron-spark-pulse 2.5s ease-in-out infinite;
}