/* ============================================================
   UMA — Universidade das Milhas Americanas
   Design foundations: color + type tokens
   Brand: premium navy + gold, luxury travel education
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "Nohemi";
  src: url("../fonts/Nohemi-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src: url("../fonts/Nohemi-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src: url("../fonts/Nohemi-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nohemi";
  src: url("../fonts/Nohemi-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* Very Vogue Display — high-contrast didone for large headlines */
@font-face {
  font-family: "Very Vogue Display";
  src: url("../fonts/VeryVogueDisplay.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Very Vogue Display";
  src: url("../fonts/VeryVogueDisplayItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* Very Vogue Text — optical size for running serif / smaller headers */
@font-face {
  font-family: "Very Vogue Text";
  src: url("../fonts/VeryVogueText.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Very Vogue Text";
  src: url("../fonts/VeryVogueTextItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- CORE PALETTE ---------- */
  /* Navy — the brand foundation. Nearly everything sits on deep navy. */
  --navy-950: #05162F;   /* page background, the darkest navy            */
  --navy-900: #0C264C;   /* raised surfaces: cards, sections, chips      */
  --navy-800: #143158;   /* hover / lighter raised surface (derived)     */

  /* Gold — the single accent. Two registers: a deep "logo" gold and a
     brighter "CTA" gold used in gradients. */
  --gold-700: #A5811D;   /* deepest gold, gradient shadow stop           */
  --gold-600: #C19828;   /* PRIMARY brand gold (logo, eyebrows, accents) */
  --gold-500: #E8B938;   /* mid gold                                     */
  --gold-400: #F4C013;   /* bright CTA gold, top/bottom gradient stop    */
  --gold-300: #E7C65C;   /* light gold, gradient mid-stop / highlights   */
  --gold-200: #ECC045;   /* band gradient end                            */

  /* Neutrals */
  --white:     #FFFFFF;
  --gray-300:  #E0E0E0;  /* muted light text on navy                     */
  --gray-400:  #D9D9D9;  /* placeholder / image fallbacks                */
  --ink:       #05162F;  /* text ON gold surfaces = the navy             */

  /* ---------- SEMANTIC COLOR ---------- */
  --bg:          var(--navy-950);
  --surface:     var(--navy-900);
  --surface-2:   var(--navy-800);
  --fg1:         var(--white);    /* primary text on navy                */
  --fg2:         var(--gray-300); /* secondary / supporting text         */
  --accent:      var(--gold-600); /* primary accent                      */
  --accent-cta:  var(--gold-400); /* bright CTA                          */
  --on-accent:   var(--navy-950); /* text on gold                        */
  --hairline:    rgba(255,255,255,0.85); /* thin white rules             */
  --hairline-soft: rgba(255,255,255,0.18);
  --border-gold: rgba(193,152,40,0.55);  /* subtle gold card outline     */

  /* ---------- SIGNATURE GRADIENTS ---------- */
  /* CTA button: vertical bright→light→bright gold, 1px white keyline.   */
  --grad-cta: linear-gradient(180deg, #F4C013 0%, #E7C65C 50%, #F4C013 100%);
  /* Full-width divider band between sections.                            */
  --grad-band: linear-gradient(90deg, #C19828 0%, #ECC045 100%);
  /* Gold metallic block (price card, highlight panels).                  */
  --grad-gold-block: linear-gradient(135deg, #C19828 0%, #F4C013 45%, #E7C65C 100%);
  /* Photo "protection" scrim — navy fade for text over imagery.          */
  --scrim-bottom: linear-gradient(180deg, rgba(5,22,47,0) 0%, rgba(5,22,47,0.88) 78%);
  --scrim-full:   linear-gradient(180deg, rgba(5,22,47,0.55) 0%, rgba(5,22,47,0.80) 100%);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Very Vogue Display", "Times New Roman", serif;
  --font-serif:   "Very Vogue Text", "Times New Roman", serif;
  --font-sans:    "Nohemi", "Helvetica Neue", Arial, sans-serif;

  /* ---------- RADIUS / ELEVATION / SPACING ---------- */
  --r-sm: 5px;     /* buttons, chips                                     */
  --r-md: 10px;    /* cards, date pills                                  */
  --r-lg: 20px;    /* large panels, image cards                         */
  --r-xl: 28px;    /* hero / bento blocks                               */

  --shadow-card: 0 2px 24px rgba(0,0,0,0.25);
  --shadow-pop:  0 18px 60px rgba(0,0,0,0.45);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Display = Very Vogue (serif). Everything functional = Nohemi.
   ============================================================ */

.uma-display {            /* hero serif headline */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 120px);
  line-height: 0.94;
  color: var(--fg1);
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.uma-display--gold { color: var(--gold-400); }

.uma-h1 {                 /* serif section title, sentence/upper */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 65px);
  line-height: 1.0;
  color: var(--fg1);
  text-wrap: balance;
}

.uma-h2 {                 /* sans bold statement (carousel body headers) */
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1.18;
  color: var(--fg1);
}

.uma-eyebrow {            /* gold/navy uppercase label above titles */
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.uma-lead {               /* supporting paragraph, light sans */
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.42;
  color: var(--fg1);
}

.uma-body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg2);
}

.uma-cta-label {          /* text inside gold buttons */
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--on-accent);
}

/* ---------- COMPONENT PRIMITIVES ---------- */
.uma-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 40px;
  border-radius: var(--r-sm);
  background: var(--grad-cta);
  border: 1px solid var(--white);
  color: var(--on-accent);
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: filter .18s ease, transform .12s ease;
}
.uma-cta:hover  { filter: brightness(1.06); }
.uma-cta:active { transform: translateY(1px) scale(0.995); }

.uma-band {                /* full-width gold divider band */
  background: var(--grad-band);
  color: var(--ink);
}

.uma-card {                /* navy raised card */
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.uma-card--gold {
  background: var(--grad-gold-block);
  color: var(--ink);
}