/* EEZY Brand CSS Variables
 * Source of truth: branding/eezy.json v2.1
 * Generated: 2026-02-07
 *
 * Hierarchy: CDN Global > Network > Group > Site > Page
 * Each level only overrides what it needs to change
 */

:root {
  /* Primary Palette */
  --eezy-primary: #00A7E1;
  --eezy-primary-light: #33B8E7;
  --eezy-primary-dark: #0086B4;
  --eezy-secondary: #1B365D;
  --eezy-secondary-light: #2A4A7A;
  --eezy-secondary-dark: #0F1F36;
  --eezy-accent: #5B9BD5;
  --eezy-accent-dark: #4A7BA7;
  --eezy-accent-light: #6AAAE0;
  --eezy-white: #FFFFFF;
  --eezy-light: #F5F5F5;
  --eezy-dark: #212121;
  --eezy-muted: #757575;
  --eezy-border: #E0E0E0;
  --eezy-disabled: #BDBDBD;

  /* Status Colors */
  --eezy-success: #4CAF50;
  --eezy-warning: #FFC107;
  --eezy-error: #F44336;
  --eezy-info: #2196F3;

  /* Semantic Aliases - Backgrounds */
  --eezy-bg-dark: var(--eezy-secondary);
  --eezy-bg-medium: var(--eezy-secondary-light);
  --eezy-bg-light: var(--eezy-light);
  --eezy-bg-white: var(--eezy-white);
  --eezy-bg-surface: #F5F5F5;

  /* Semantic Aliases - Text */
  --eezy-text-light: var(--eezy-white);
  --eezy-text-dark: var(--eezy-dark);
  --eezy-text-muted: var(--eezy-muted);

  /* Semantic Aliases - Buttons */
  --eezy-btn-primary-bg: var(--eezy-primary);
  --eezy-btn-primary-text: var(--eezy-white);
  --eezy-btn-secondary-bg: var(--eezy-white);
  --eezy-btn-secondary-text: var(--eezy-primary);

  /* Semantic Aliases - Links */
  --eezy-link: var(--eezy-primary);
  --eezy-link-hover: var(--eezy-primary-dark);

  /* Typography */
  --eezy-font-heading: 'Eagle-Bold', sans-serif;
  --eezy-font-heading-heavy: 'Eagle-Black', sans-serif;
  --eezy-font-heading-light: 'Eagle-Book', sans-serif;
  --eezy-font-body: 'Futura Book BT', sans-serif;

  /* Spacing */
  --eezy-section-padding: 80px;
  --eezy-container-max: 1200px;
  --eezy-gap: 30px;
  --eezy-radius: 10px;

  /* Gradients */
  --eezy-gradient-dark: linear-gradient(180deg, var(--eezy-secondary-light) 0%, var(--eezy-secondary) 100%);
  --eezy-gradient-light: linear-gradient(180deg, var(--eezy-white) 0%, var(--eezy-light) 100%);
  --eezy-gradient-hero: linear-gradient(135deg, var(--eezy-secondary) 0%, var(--eezy-secondary-light) 100%);

  /* Dark Mode */
  --eezy-dark-bg: #1E1E1E;
  --eezy-dark-surface: #2D2D2D;
  --eezy-dark-text: #E0E0E0;
}

/* ===== Typography Rules ===== */

/* Headings use Eagle-Bold */
h1, h2, h3,
.breakdance h1, .breakdance h2, .breakdance h3 {
  font-family: var(--eezy-font-heading) !important;
}

/* Sub-headings and body use Futura Book BT */
h4, h5, h6,
.breakdance h4, .breakdance h5, .breakdance h6 {
  font-family: var(--eezy-font-body) !important;
  font-weight: 600;
}

body, p, li, td, th, label, input, textarea, select, button,
.breakdance p, .breakdance li {
  font-family: var(--eezy-font-body) !important;
}

/* Typography scale from eezy.json */
h1, .breakdance h1 { font-size: 48px; font-weight: 700; line-height: 1.2; }
h2, .breakdance h2 { font-size: 36px; font-weight: 700; line-height: 1.25; }
h3, .breakdance h3 { font-size: 28px; font-weight: 700; line-height: 1.3; }
h4, .breakdance h4 { font-size: 22px; font-weight: 600; line-height: 1.35; }
h5, .breakdance h5 { font-size: 18px; font-weight: 600; line-height: 1.4; }
h6, .breakdance h6 { font-size: 16px; font-weight: 600; line-height: 1.4; }

body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--eezy-text-dark);
}

small, .text-small {
  font-size: 14px;
  line-height: 1.5;
}

/* ===== Link Styles ===== */
a {
  color: var(--eezy-link);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--eezy-link-hover);
}

/* ===== Section Utilities ===== */

/* Dark section utility */
.eezy-dark {
  background-color: var(--eezy-bg-dark);
  color: var(--eezy-text-light);
}
.eezy-dark a { color: var(--eezy-accent-light); }
.eezy-dark a:hover { color: var(--eezy-accent); }

/* Light section utility */
.eezy-light {
  background-color: var(--eezy-bg-light);
  color: var(--eezy-text-dark);
}

/* Accent section utility */
.eezy-accent {
  background-color: var(--eezy-primary);
  color: var(--eezy-text-light);
}
.eezy-accent a { color: var(--eezy-white); }

/* Surface section utility */
.eezy-surface {
  background-color: var(--eezy-bg-surface);
  color: var(--eezy-text-dark);
}

/* ===== Button Utilities ===== */
.eezy-btn-primary {
  background-color: var(--eezy-btn-primary-bg);
  color: var(--eezy-btn-primary-text);
  border: none;
  padding: 12px 24px;
  border-radius: var(--eezy-radius);
  font-family: var(--eezy-font-body);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.eezy-btn-primary:hover {
  background-color: var(--eezy-primary-dark);
}

.eezy-btn-secondary {
  background-color: var(--eezy-btn-secondary-bg);
  color: var(--eezy-btn-secondary-text);
  border: 2px solid var(--eezy-primary);
  padding: 10px 22px;
  border-radius: var(--eezy-radius);
  font-family: var(--eezy-font-body);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.eezy-btn-secondary:hover {
  background-color: var(--eezy-primary);
  color: var(--eezy-white);
}

/* ===== Contrast Rules ===== */
/* Dark backgrounds require light text (from contrastRules in eezy.json) */
[style*="background-color: #1B365D"],
[style*="background-color: #0F1F36"],
[style*="background-color: #1E1E1E"],
[style*="background-color: #2D2D2D"],
[style*="background-color: #212121"] {
  color: #FFFFFF;
}