/* ============================================
   THE ELITE COMPETITOR — COLORS & TYPE
   ============================================ */

/* ---------- FONT FACES ---------- */
@font-face {
  font-family: "Algoria";
  src: url("fonts/Algoria-ExtraBoldCondensed.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilmer";
  src: url("fonts/Gilmer-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilmer";
  src: url("fonts/Gilmer-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilmer";
  src: url("fonts/Gilmer-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Seasalt";
  src: url("fonts/Seasalt-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Seasalt Doodles";
  src: url("fonts/Seasalt-Doodles.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- BRAND CORE COLORS ---------- */
  --ec-navy: #004056;          /* Primary background — deep blue/teal */
  --ec-mint: #B7D6C7;          /* Soft mint — secondary background */
  --ec-green: #008B52;         /* Field green — primary accent */
  --ec-yellow: #F2BA51;        /* Warm yellow — primary accent */
  --ec-lime: #B9FF66;          /* Lime — CONTRAST / CTA only */
  --ec-white: #FFFFFF;         /* Text + clean ground */
  --ec-black: #0A0A0A;         /* Rare; usually navy is dark anchor */

  /* Tints / soft shades for layering */
  --ec-navy-90: #1a5365;
  --ec-navy-80: #336577;
  --ec-mint-50: #dbe8e0;
  --ec-mint-20: #f1f6f3;
  --ec-yellow-soft: #f6cf83;
  --ec-green-soft: #4daa83;

  /* ---------- SEMANTIC COLOR ROLES ---------- */
  --bg: var(--ec-white);               /* Default page bg is WHITE — color lives in section blocks */
  --bg-alt: var(--ec-mint);
  --bg-yellow: var(--ec-yellow);
  --bg-green: var(--ec-green);
  --bg-navy: var(--ec-navy);

  --fg: var(--ec-navy);                /* Default text on white */
  --fg-on-dark: var(--ec-white);       /* Text on navy / green */
  --fg-on-light: var(--ec-navy);       /* Text on white / mint / yellow */
  --fg-muted: rgba(255,255,255,0.72);
  --fg-muted-on-light: rgba(0,64,86,0.7);

  --accent: var(--ec-lime);            /* Reserved: CTAs + empathy lines */
  --accent-warm: var(--ec-yellow);
  --accent-deep: var(--ec-green);

  --border: rgba(255,255,255,0.18);
  --border-on-light: rgba(0,64,86,0.18);

  /* ---------- SPACING ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- RADII — brand is angular. Default = 0. ---------- */
  --r-sm: 4px;            /* buttons (max) */
  --r-md: 4px;            /* inputs */
  --r-lg: 6px;            /* buttons, alt */
  --r-xl: 0;              /* cards / blocks — hard rectangles */
  /* No pill, no arch. Photo masks are rectangles. */

  /* ---------- SHADOWS (used sparingly — brand is flat) ---------- */
  --shadow-soft: 0 6px 24px rgba(0, 32, 44, 0.12);
  --shadow-card: 0 12px 32px rgba(0, 32, 44, 0.18);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Algoria", "League Spartan", Impact, sans-serif;
  --font-body: "Gilmer", "Kumbh Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Seasalt", "Permanent Marker", cursive;
  --font-doodle: "Seasalt Doodles", "Permanent Marker", cursive;

  /* ---------- TYPE SIZES (web px) — per brand style guide ---------- */
  /* Algoria tagline:  web 22 / line-height 1.2 / letter-spacing 0.1em / UPPERCASE */
  /* Gilmer Medium:    web 55 / line-height 1.1 / Title case */
  /* Gilmer Light:     web 20 / line-height 1.3 / Sentence case */
  /* Seasalt accent:   web 95 / line-height 0.8 / UPPERCASE */
  --t-tagline: 22px;
  --t-h1: 55px;            /* canonical headline size from guide */
  --t-h2: 40px;            /* derived subhead step */
  --t-h3: 28px;
  --t-h4: 22px;
  --t-display: clamp(72px, 9vw, 120px);  /* poster-scale Algoria for hero use */
  --t-body: 20px;          /* canonical body size from guide */
  --t-body-lg: 22px;
  --t-body-sm: 16px;
  --t-small: 14px;
  --t-tiny: 12px;
  --t-accent: 95px;        /* Seasalt at canonical web size */

  /* line-heights — guide-canonical */
  --lh-tagline: 1.2;
  --lh-headline: 1.1;
  --lh-body: 1.3;
  --lh-accent: 0.8;
}

/* ---------- BASE ELEMENT STYLES ---------- */
html, body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--fg);
  background: var(--bg);
  font-size: var(--t-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-body);
  font-weight: 500;            /* Gilmer Medium */
  font-size: var(--t-h1);
  line-height: var(--lh-headline);
  letter-spacing: 0;
  text-transform: none;        /* Title case only — never uppercase */
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: var(--lh-headline);
  letter-spacing: 0;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.15;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-h4);
  line-height: 1.2;
  margin: 0;
}

/* TAGLINE / OVERLINE — Algoria, ALL CAPS, tracked 0.1em (≡ 100 in guide) */
.tagline, .overline {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--t-tagline);
  line-height: var(--lh-tagline);
}

/* BIG DISPLAY HEADLINE — Algoria, all-caps, condensed */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--t-display);
  line-height: 0.95;
}

/* ACCENT — script for emotional emphasis */
.accent-script {
  font-family: var(--font-accent);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 0.85;
}
.accent-doodle {
  font-family: var(--font-doodle);
}

p {
  font-family: var(--font-body);
  font-weight: 300;            /* Gilmer Light */
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

small, .small {
  font-size: var(--t-small);
  letter-spacing: 0.01em;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

/* ---------- UTILITY: COLORED TEXT BACKGROUNDS ---------- */
.on-navy   { background: var(--ec-navy);  color: var(--ec-white); }
.on-mint   { background: var(--ec-mint);  color: var(--ec-navy); }
.on-white  { background: var(--ec-white); color: var(--ec-navy); }
.on-yellow { background: var(--ec-yellow);color: var(--ec-navy); }
.on-green  { background: var(--ec-green); color: var(--ec-white); }
.on-lime   { background: var(--ec-lime);  color: var(--ec-navy); }