@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-400.ttf") format("truetype");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fraunces-600.ttf") format("truetype");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fraunces-700.ttf") format("truetype");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-400.ttf") format("truetype");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-500.ttf") format("truetype");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-600.ttf") format("truetype");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-400-italic.ttf") format("truetype");
}

:root {
  /* NAVY - The Foundation (logo hands) */
  --navy-50: #E9EEF3;
  --navy-100: #BDCBE0;
  --navy-200: #5E7896;
  --navy-primary: #163553;
  --navy-deep: #102A43;
  --navy-abyss: #0A1E31;

  /* TEAL - The Human (logo figure) */
  --teal-surface: #E9EEF4;
  --teal-100: #CDD9E7;
  --teal-light: #92A9C1;
  --teal-primary: #677F99;
  --teal-deep: #4F6781;

  /* GOLD - The Soul (logo sun) */
  --gold-surface: #FFF1D8;
  --gold-100: #FFC66E;
  --gold-primary: #F5A623;
  --gold-hover: #E48F00;
  --gold-deep: #8F5A00;

  /* NEUTRAL - The Canvas */
  --page-bg: #F4F6F9;
  --surface: #FFFFFF;
  --border: #D9E2EC;
  --border-subtle: #E8EEF4;

  /* TEXT - From logo wordmark */
  --text-primary: #1A2F47;
  --text-muted: #586D83;
  --text-faint: #8A9BAE;
  --text-inverse: #F5F7FA;
  --text-inverse-muted: rgba(245, 247, 250, 0.65);

  /* SEMANTIC */
  --color-navbar-bg: #142235;
  --color-navbar-bg-scrolled: #101d2e;
  --color-navbar-link: rgba(245, 247, 250, 0.8);
  --color-navbar-link-hover: var(--gold-primary);
  --color-navbar-cta-bg: var(--gold-primary);
  --color-navbar-cta-text: var(--navy-abyss);
  --color-navbar-active: var(--gold-primary);

  --color-hero-bg: var(--navy-primary);
  --color-hero-headline: var(--text-inverse);
  --color-hero-accent-word: var(--gold-primary);
  --color-hero-sub: var(--text-inverse-muted);

  --color-dark-section-bg: var(--navy-primary);
  --color-deeper-section-bg: var(--navy-abyss);
  --color-light-section-bg: var(--page-bg);
  --color-tint-section-bg: var(--teal-surface);
  --color-white-section-bg: var(--surface);

  --color-btn-primary-bg: var(--gold-primary);
  --color-btn-primary-text: var(--navy-abyss);
  --color-btn-primary-hover: var(--gold-hover);
  --color-btn-secondary-border: var(--navy-primary);
  --color-btn-secondary-text: var(--navy-primary);
  --color-btn-secondary-hover-bg: var(--navy-primary);
  --color-btn-ghost-border: rgba(245, 247, 250, 0.35);
  --color-btn-ghost-text: var(--text-inverse);
  --color-btn-whatsapp-bg: #25D366;
  --color-btn-whatsapp-text: #FFFFFF;

  --color-stat-number: var(--gold-primary);
  --color-stat-label-dark: var(--text-inverse-muted);
  --color-stat-label-light: var(--text-muted);

  --color-link: var(--teal-primary);
  --color-link-hover: var(--navy-primary);
  --color-link-underline: var(--teal-light);

  --color-card-bg: var(--surface);
  --color-card-border: var(--border);
  --color-card-hover-shadow: 0 8px 32px rgba(27, 61, 92, 0.1);
  --color-card-active-border: var(--gold-primary);
  --color-card-teal-border: var(--teal-light);

  --color-icon-bg: var(--gold-surface);
  --color-icon-fill: var(--gold-primary);
  --color-icon-fill-hover: var(--gold-hover);

  --color-tag-scholarship-bg: var(--gold-surface);
  --color-tag-scholarship-text: var(--gold-deep);
  --color-tag-training-bg: var(--teal-surface);
  --color-tag-training-text: var(--teal-deep);
  --color-tag-online-bg: var(--navy-50);
  --color-tag-online-text: var(--navy-primary);
  --color-tag-active-bg: #E6EEF6;
  --color-tag-active-text: #2A4B6A;
  --color-tag-soon-bg: #F6EEE0;
  --color-tag-soon-text: #6D532A;

  --color-input-bg: var(--surface);
  --color-input-border: var(--border);
  --color-input-focus: var(--teal-primary);
  --color-input-focus-ring: rgba(58, 174, 168, 0.2);

  --color-footer-bg: #0f1b2a;
  --color-footer-bg-top: #162739;
  --color-footer-heading: var(--gold-primary);
  --color-footer-link: rgba(245, 247, 250, 0.86);
  --color-footer-link-hover: var(--text-inverse);
  --color-footer-divider: rgba(245, 247, 250, 0.16);
  --color-footer-copy: rgba(245, 247, 250, 0.7);

  --color-focus-ring: var(--gold-primary);

  /* Typography */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-quote: "Cormorant Garamond", Georgia, serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.5rem;
  --text-5xl: 5rem;
  --text-hero: clamp(3rem, 6vw, 6rem);

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --leading-loose: 1.85;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-24: 12rem;

  --container-max: 1200px;
  --container-padding: clamp(1rem, 4vw, 2rem);
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 24px;
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(27, 61, 92, 0.06);
  --shadow-md: 0 4px 20px rgba(27, 61, 92, 0.1);
  --shadow-lg: 0 8px 40px rgba(27, 61, 92, 0.14);
  --shadow-xl: 0 16px 64px rgba(27, 61, 92, 0.18);

  /* Compatibility aliases */
  --color-primary-50: var(--navy-50);
  --color-primary-100: var(--navy-100);
  --color-primary-200: var(--navy-200);
  --color-primary-400: var(--navy-200);
  --color-primary-600: var(--navy-primary);
  --color-primary-800: var(--navy-deep);
  --color-primary-900: var(--navy-abyss);

  --color-teal-50: var(--teal-surface);
  --color-teal-100: var(--teal-100);
  --color-teal-200: var(--teal-light);
  --color-teal-400: var(--teal-primary);
  --color-teal-600: var(--teal-deep);

  --color-gold-50: var(--gold-surface);
  --color-gold-100: var(--gold-100);
  --color-gold-200: var(--gold-100);
  --color-gold-400: var(--gold-primary);
  --color-gold-600: var(--gold-hover);
  --color-gold-800: var(--gold-deep);

  --color-neutral-bg: var(--page-bg);
  --color-neutral-50: var(--text-inverse);
  --color-neutral-100: #D2DCE8;
  --color-neutral-300: var(--text-faint);
  --color-neutral-500: var(--text-muted);
  --color-neutral-700: var(--text-primary);
  --color-neutral-900: var(--navy-abyss);

  --color-bg: var(--page-bg);
  --color-bg-tint: var(--teal-surface);
  --color-bg-dark: var(--navy-primary);
  --color-bg-darker: var(--navy-abyss);
  --color-surface: var(--surface);
  --color-teal-surface: var(--teal-surface);
  --color-text-primary: var(--text-primary);
  --color-text-muted: var(--text-muted);
  --color-text-light: var(--text-faint);
  --color-text-inverse: var(--text-inverse);
  --color-cta: var(--gold-primary);
  --color-cta-hover: var(--gold-hover);
  --color-cta-text: var(--navy-abyss);
  --color-border: var(--border);
  --color-border-light: var(--border-subtle);
  --color-border-dark: var(--color-footer-divider);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: var(--page-bg);
}

::selection {
  background: var(--teal-light);
  color: var(--navy-abyss);
}