/* =========================================================
   Gateway Academy — Design Tokens
   Colors, typography, spacing, radii, elevation, motion.
   Import this on every Gateway artifact.
   ========================================================= */

/* ---- Proxima Nova — self-hosted brand font (the real family).
   Files live in /fonts; URLs are resolved relative to THIS stylesheet
   at the project root, so every page that links colors_and_type.css
   gets them. One typeface only — no webfont CDN dependency. ---- */

@font-face { font-family:"Proxima Nova"; font-weight:300; font-style:normal; font-display:swap; src:url("fonts/ProximaNova-Light.ttf") format("truetype"); }
@font-face { font-family:"Proxima Nova"; font-weight:300; font-style:italic; font-display:swap; src:url("fonts/ProximaNova-LightItalic.ttf") format("truetype"); }
@font-face { font-family:"Proxima Nova"; font-weight:400; font-style:normal; font-display:swap; src:url("fonts/ProximaNova-Regular.ttf") format("truetype"); }
@font-face { font-family:"Proxima Nova"; font-weight:400; font-style:italic; font-display:swap; src:url("fonts/ProximaNova-Italic.ttf") format("truetype"); }
@font-face { font-family:"Proxima Nova"; font-weight:500; font-style:normal; font-display:swap; src:url("fonts/ProximaNova-Medium.ttf") format("truetype"); }
@font-face { font-family:"Proxima Nova"; font-weight:500; font-style:italic; font-display:swap; src:url("fonts/ProximaNova-MediumItalic.ttf") format("truetype"); }
@font-face { font-family:"Proxima Nova"; font-weight:600; font-style:normal; font-display:swap; src:url("fonts/ProximaNova-Semibold.ttf") format("truetype"); }
@font-face { font-family:"Proxima Nova"; font-weight:600; font-style:italic; font-display:swap; src:url("fonts/ProximaNova-SemiboldItalic.ttf") format("truetype"); }
@font-face { font-family:"Proxima Nova"; font-weight:700; font-style:normal; font-display:swap; src:url("fonts/ProximaNova-Bold.ttf") format("truetype"); }
@font-face { font-family:"Proxima Nova"; font-weight:700; font-style:italic; font-display:swap; src:url("fonts/ProximaNova-BoldItalic.ttf") format("truetype"); }
@font-face { font-family:"Proxima Nova"; font-weight:800; font-style:normal; font-display:swap; src:url("fonts/ProximaNova-Extrabold.ttf") format("truetype"); }
@font-face { font-family:"Proxima Nova"; font-weight:800; font-style:italic; font-display:swap; src:url("fonts/ProximaNova-ExtraboldItalic.ttf") format("truetype"); }
@font-face { font-family:"Proxima Nova"; font-weight:900; font-style:normal; font-display:swap; src:url("fonts/Proxima_Nova_Black.ttf") format("truetype"); }
/* Note: an Extra Condensed Black ("ExCn") cut exists in /fonts but is intentionally NOT loaded —
   that file is oblique/slanted. Headlines use the upright Black 900 weight above via --font-display-condensed. */

:root {
  /* ------- Brand color ------- */
  --gateway-navy:      #1E3C7A;   /* primary */
  --gateway-gold:      #F9D502;   /* accent */
  --white:             #FFFFFF;
  --ink:               #0F1F3F;   /* body text on white */
  --paper:             #FBF7EC;   /* warm off-white */
  --rule-gold:         #E6C200;   /* darker gold for hairlines */

  /* ------- Navy scale ------- */
  --navy-900: #0F1F3F;
  --navy-800: #152B5A;
  --navy-700: #1E3C7A;   /* = --gateway-navy */
  --navy-600: #2F53A0;
  --navy-500: #4A6FBF;
  --navy-400: #6E8DCB;
  --navy-300: #97AAD9;
  --navy-200: #C7D2E8;
  --navy-100: #E4EAF4;
  --navy-050: #F2F5FB;

  /* ------- Gold scale ------- */
  /* The 700 deep-gold step is RETIRED — it read off-brand and failed contrast on white.
     It is remapped to navy so any legacy `var(--gold-700)` reference renders a brand color;
     for labels/eyebrows on light, use navy or the navy "Gateway Difference" pill. 600 is
     kept for decorative gold gradients/borders only — never for text. */
  --gold-700: var(--gateway-navy);
  --gold-600: #D4B500;
  --gold-500: #F9D502;   /* = --gateway-gold */
  --gold-400: #FBDF3F;
  --gold-200: #FDEE90;
  --gold-100: #FEF7C7;

  /* ------- Semantic color ------- */
  --fg1: var(--ink);              /* primary text on light */
  --fg2: #4A5878;                 /* secondary text on light */
  --fg-on-navy: var(--white);     /* primary text on navy */
  --fg-on-navy-muted: #C7D2E8;    /* secondary text on navy */
  --accent: var(--gateway-gold);
  --link: var(--gateway-navy);
  --link-hover: var(--gold-700);

  --bg-page: var(--white);
  --bg-alt: var(--paper);
  --bg-hero: var(--gateway-navy);
  --bg-card: var(--white);

  --border-subtle: rgba(30, 60, 122, 0.12);
  --border-strong: rgba(30, 60, 122, 0.24);
  --border-on-navy: rgba(249, 213, 2, 0.4);

  /* ------- State / validation ------- */
  --state-success:  #22a05a;   /* confirmed, enrolled, form success */
  --state-warning:  #e6a817;   /* ESA deadline, incomplete info */
  --state-error:    #d93025;   /* form validation errors */
  --state-info:     #1a73e8;   /* neutral informational callouts */

  /* ------- Type ------- */
  --font-sans: "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans); /* Proxima Nova is the only family */
  --font-display-condensed: "Proxima Nova", "Helvetica Neue", sans-serif; /* headlines: upright Black 900 (the ExCn cut is oblique — avoided) */

  /* Weights */
  --fw-light: 300;      /* @kind font */
  --fw-regular: 400;    /* @kind font */
  --fw-medium: 500;     /* @kind font */
  --fw-semibold: 600;   /* @kind font */
  --fw-bold: 700;       /* @kind font */
  --fw-extrabold: 800;  /* @kind font */
  --fw-black: 900;      /* @kind font */

  /* Base type scale (rem-based, 1rem = 16px) */
  --text-xs:   0.75rem;   /* @kind font */
  --text-sm:   0.875rem;  /* @kind font */
  --text-base: 1rem;      /* @kind font */
  --text-md:   1.125rem;  /* @kind font */
  --text-lg:   1.375rem;  /* @kind font */
  --text-xl:   1.75rem;   /* @kind font */
  --text-2xl:  2.25rem;   /* @kind font */
  --text-3xl:  3rem;      /* @kind font */
  --text-4xl:  3.75rem;   /* @kind font */
  --text-5xl:  5rem;      /* @kind font */
  --text-display: 7.5rem; /* @kind font */

  --lh-tight: 1.08;    /* @kind font */
  --lh-snug: 1.2;      /* @kind font */
  --lh-normal: 1.55;   /* @kind font */
  --lh-relaxed: 1.7;   /* @kind font */

  --tracking-tight: -0.01em;  /* @kind font */
  --tracking-normal: 0;       /* @kind font */
  --tracking-wide: 0.08em;    /* @kind font */
  --tracking-wider: 0.14em;   /* @kind font */

  /* ------- Spacing (4px grid) ------- */
  --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;
  --space-10: 128px;

  /* ------- Radii ------- */
  --radius-xs: 4px;    /* inputs */
  --radius-sm: 8px;    /* cards */
  --radius-md: 12px;   /* feature panels */
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ------- Elevation ------- */
  --shadow-none: none;
  --shadow-card: 0 2px 8px rgba(15, 31, 63, 0.08);
  --shadow-lift: 0 6px 20px rgba(15, 31, 63, 0.12);

  /* ------- Motion ------- */
  --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);  /* @kind other */
  /* Strong ease-out for interactive hover/press — Emil Kowalski design-eng */
  --ease-snap: cubic-bezier(0.23, 1, 0.32, 1);  /* @kind other */
  --dur-fast: 180ms;   /* @kind other */
  --dur-base: 220ms;   /* @kind other */
  --dur-slow: 320ms;   /* @kind other */
  --dur-exit: 150ms;   /* @kind other */
  /* ------- Protection gradient (over hero photos) ------- */
  --protect-nav: linear-gradient(180deg, rgba(30,60,122,0) 0%, rgba(30,60,122,0.85) 100%);  /* @kind color */
}

/* =========================================================
   Semantic element styles — use these directly on tags, or
   as @apply-style references for component CSS.
   ========================================================= */

html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  color: var(--fg1);
  background: var(--bg-page);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — ALL CAPS, Bold/Black, tight */
.display,
h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--text-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg1);
  text-wrap: balance;
  margin: 0 0 var(--space-5);
}

h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0 0 var(--space-5);
}

h3 {
  font-weight: var(--fw-bold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}

h4 {
  font-weight: var(--fw-semibold);
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
}

/* Eyebrow — ALL CAPS, Black weight, spaced */
.eyebrow {
  font-weight: var(--fw-black);
  font-size: var(--text-md);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gateway-gold);
}

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

.lead {
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  color: var(--fg2);
  text-wrap: pretty;
}

small { font-size: var(--text-sm); color: var(--fg2); }

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-calm);
}
a:hover { color: var(--link-hover); }

/* Attribution line — FIRST NAME · GATEWAY ACADEMY PARENT */
.attribution {
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--gateway-gold);
}

/* Testimonial quote (display scale) */
.quote-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--white);
  line-height: 1.14;
  text-align: center;
  text-wrap: balance;
}

/* Utility */
.on-navy { background: var(--gateway-navy); color: var(--white); }
.on-paper { background: var(--paper); color: var(--fg1); }