/* =============================================================
   PVAMU CED Tarrant County — Colors & Type
   Design system foundations for the B.I.D. Academy program
   and Community & Economic Development marketing materials.
   ============================================================= */

/* ---------- Typography: webfont imports ---------- */
/* Arial is the institutional body font (see brand notes); for digital use
   we pair it with Georgia for headlines. Both are system fonts and safe
   across Mailchimp, PowerPoint, and Canva. Where a display moment warrants
   a stronger serif online, we use Playfair Display — a serif with the
   warmth and authority Georgia implies. Flagged as a web substitute. */
/* Official PVAMU IIC 2025 fonts: Aileron (primary), Arial (secondary), Zuume (outdoor).
   Aileron and Zuume are not on Google Fonts; as web substitutes we use the closest
   matches (humanist geometric sans + condensed display). Flagged for brand team. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700;800&family=Playfair+Display:wght@700;800&display=swap');

:root {
  /* =========================================================
     COLORS — brand
     ========================================================= */
  --brand-purple-900: #1A0A2E;   /* primary dark / deep backgrounds */
  --brand-purple-700: #582C83;   /* PVAMU purple — primary brand color */
  --brand-purple-500: #7A47AE;   /* interactive / hover lift */
  --brand-purple-200: #D8C8E8;   /* soft purple tint */
  --brand-purple-100: #F9F6FB;   /* lavender section background */

  --brand-gold-600:   #D4A017;   /* warm secondary gold */
  --brand-gold-500:   #EAAA00;   /* primary gold / CTA */
  --brand-gold-200:   #FBE9B4;   /* soft gold tint */
  --brand-gold-100:   #FDF6E0;   /* gold wash background */

  /* =========================================================
     COLORS — neutrals
     ========================================================= */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFAFA;
  --neutral-100: #F2F2F2;
  --neutral-200: #E5E5E5;
  --neutral-300: #CCCCCC;
  --neutral-500: #7A7A7A;
  --neutral-700: #4A4A4A;
  --neutral-800: #333333;   /* body text */
  --neutral-900: #111111;

  /* =========================================================
     COLORS — semantic tokens
     ========================================================= */
  --bg-page:         var(--neutral-0);
  --bg-subtle:       var(--brand-purple-100);
  --bg-inverse:      var(--brand-purple-900);
  --bg-card:         var(--neutral-0);
  --bg-accent:       var(--brand-gold-500);
  --bg-accent-soft:  var(--brand-gold-100);

  --fg-1:            var(--neutral-800);         /* body */
  --fg-2:            var(--neutral-700);         /* secondary */
  --fg-3:            var(--neutral-500);         /* tertiary / captions */
  --fg-on-dark:      var(--neutral-0);
  --fg-on-gold:      var(--brand-purple-900);
  --fg-brand:        var(--brand-purple-700);
  --fg-accent:       var(--brand-gold-600);      /* gold readable on white */

  --border-subtle:   var(--neutral-200);
  --border-strong:   var(--brand-purple-700);
  --border-gold:     var(--brand-gold-500);

  --success: #2E7D32;
  --warning: #C77700;
  --danger:  #B3261E;

  /* =========================================================
     TYPOGRAPHY — families
     ========================================================= */
  /* Aileron (primary IIC) and Zuume (outdoor) are web-substituted; Arial is official secondary. */
  --font-primary:  'Aileron', 'Source Sans 3', Arial, 'Helvetica Neue', sans-serif;
  --font-body:     'Aileron', 'Source Sans 3', Arial, 'Helvetica Neue', sans-serif;
  --font-secondary: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-outdoor:  'Zuume', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --font-display:  'Aileron', 'Source Sans 3', Arial, sans-serif;
  --font-system-body:    Arial, sans-serif;

  /* =========================================================
     TYPOGRAPHY — scale (print-safe; ≥12pt / ≥16px body)
     ========================================================= */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  84px;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.65;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* =========================================================
     SPACING & RADIUS
     ========================================================= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* =========================================================
     ELEVATION
     ========================================================= */
  --shadow-sm: 0 1px 2px rgba(26, 10, 46, 0.08);
  --shadow-md: 0 4px 12px rgba(26, 10, 46, 0.10);
  --shadow-lg: 0 12px 32px rgba(26, 10, 46, 0.14);
  --shadow-gold: 0 6px 0 0 var(--brand-gold-600); /* block-shadow CTA */

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 360ms;
}

/* =============================================================
   Semantic element styles — opt-in, use inside .pvamu scope
   ============================================================= */
.pvamu, .pvamu * { box-sizing: border-box; }

.pvamu {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  background: var(--bg-page);
}

.pvamu h1, .pvamu .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--brand-purple-900);
  margin: 0 0 var(--space-4);
}

.pvamu h2, .pvamu .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--brand-purple-900);
  margin: 0 0 var(--space-3);
}

.pvamu h3, .pvamu .h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--brand-purple-700);
  margin: 0 0 var(--space-3);
}

.pvamu h4, .pvamu .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--brand-purple-700);
  margin: 0 0 var(--space-2);
}

.pvamu .eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.pvamu p, .pvamu .body {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.pvamu .lead {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}

.pvamu .caption {
  font-size: var(--text-sm);
  color: var(--fg-3);
  line-height: var(--leading-normal);
}

.pvamu .fine-print {
  font-size: var(--text-xs);
  color: var(--fg-3);
  line-height: var(--leading-normal);
}

/* Display moment — the "big statement" */
.pvamu .display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-5xl);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--brand-purple-900);
}

/* Accent rule — the gold divider that appears constantly */
.pvamu .rule-gold {
  height: 4px;
  width: 48px;
  background: var(--brand-gold-500);
  border: 0;
  margin: var(--space-4) 0;
}