/* =====================================================================
   NATIONAL REELS & SHORT FILM COMPETITION 2026 — UNIFIED THEME
   Single corporate palette: DEEP TEAL (primary) + GOLD (accent) + cool neutrals.
   Loaded LAST on every page. This file is the single source of truth:
   legacy tokens from design-system / bundle-home / footer are re-bound here
   so no section can introduce a stray colour or font again.
   Font: Outfit only (headings + body).
   ===================================================================== */

:root {
  /* ---- Brand ---- */
  --nr-teal:        #075E63;   /* primary */
  --nr-teal-deep:   #053F43;   /* dark sections, footer, FAQ */
  --nr-teal-raised: #07494E;   /* cards on dark */
  --nr-gold:        #F5C542;   /* accent / CTA */
  --nr-gold-hover:  #FFD66B;
  --nr-gold-tint:   #FFF4C7;
  --nr-gold-ink:    #7A5A00;   /* text on gold tint */

  /* ---- Neutrals (cool, teal-tinted) ---- */
  --nr-ink:      #0D2224;      /* headings / body on light */
  --nr-muted:    #4B6366;      /* secondary text on light */
  --nr-surface:  #F4F8F8;      /* alternate section background */
  --nr-tint:     #E6F2F2;      /* icon badges, chips, soft cards */
  --nr-border:   #D6E4E4;
  --nr-on-dark:  #D6E8E8;      /* body text on dark */
  --nr-on-dark-dim: #9DBDBE;

  /* ---- Type & shape ---- */
  --nr-font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nr-radius: 16px;
  --nr-shadow: 0 1px 2px rgba(5,63,67,.06), 0 8px 24px rgba(5,63,67,.08);
  --nr-shadow-hover: 0 2px 4px rgba(5,63,67,.08), 0 16px 36px rgba(5,63,67,.14);

  /* ---- Re-bind legacy tokens (design-system.css / bundle-home) ---- */
  --teal-deep: #075E63;  --teal-mid: #0A6E74;  --teal-bright: #0F8A90;
  --teal-light: #5FB3B6; --teal-xlight: #B7DEDF;
  --aqua-soft: #E6F2F2;  --aqua-pale: #F4F8F8; --aqua-medium: #D6E4E4;
  --yellow-warm: #F5C542; --yellow-hover: #FFD66B; --yellow-soft: #FFF4C7;
  --yellow-pale: #FFF9E3; --yellow-deep: #D4A017;  --yellow-ink: #7A5A00;
  --off-white: #F4F8F8;  --warm-white: #F4F8F8;
  --gray-50: #F4F8F8;  --gray-100: #E6F2F2; --gray-150: #D6E4E4; --gray-200: #C3D6D7;
  --gray-300: #9DBDBE; --gray-400: #7A9C9E; --gray-500: #5E7C7F; --gray-600: #4B6366;
  --gray-700: #34494B; --gray-800: #1D3234;
  --charcoal: #0D2224;  --dark-footer: #053F43;
  --font-display: var(--nr-font);
  --shadow-glow: 0 0 40px rgba(7,94,99,.18);

  /* footer tokens */
  --footer-bg-start: #075E63; --footer-bg-end: #053F43;
  --footer-gold: #F5C542; --footer-gold-dark: #D4A017;
  --footer-gold-tint: rgba(245,197,66,.14); --footer-teal-accent: #9DBDBE;
}

/* ---------------------------------------------------------------------
   Global typography: one family, consistent weights, no serif/italic mix
   --------------------------------------------------------------------- */
html, body, button, input, select, textarea { font-family: var(--nr-font); }
body { color: var(--nr-ink); background: #FFFFFF; }
:where(h1, h2, h3, h4, h5, h6) { font-family: var(--nr-font); letter-spacing: -0.02em; }
h1 em, h2 em, h3 em { font-style: normal; }

/* Focus ring — one colour everywhere */
:focus-visible { outline: 3px solid var(--nr-gold); outline-offset: 2px; border-radius: 6px; }

/* Selection */
::selection { background: var(--nr-gold); color: var(--nr-ink); }

/* ---------------------------------------------------------------------
   Section rhythm: white / surface / deep-teal. Nothing else.
   --------------------------------------------------------------------- */
.nr-section--white   { background: #FFFFFF; }
.nr-section--surface { background: var(--nr-surface); }
.nr-section--deep    { background: var(--nr-teal-deep); color: var(--nr-on-dark); }

/* ---------------------------------------------------------------------
   Buttons: ONE primary (gold) and ONE secondary (teal) style site-wide
   --------------------------------------------------------------------- */
.btn-primary, .nav-btn-register, .fee-card-btn, .cs-cta {
  background: var(--nr-gold) !important; color: var(--nr-ink) !important;
  border-color: var(--nr-gold) !important; font-family: var(--nr-font);
}
.btn-primary:hover, .nav-btn-register:hover, .fee-card-btn:hover, .cs-cta:hover {
  background: var(--nr-gold-hover) !important;
}

/* ---------------------------------------------------------------------
   Page heroes (inner pages): one deep-teal banner, same on every page
   --------------------------------------------------------------------- */
.about-hero, .team-hero, .bc-hero, .page-hero, .subpage-hero {
  background: linear-gradient(135deg, var(--nr-teal-deep) 0%, var(--nr-teal) 100%) !important;
}