/* ============================================================
   SENIC Design System — Colors & Type
   Sustainable Entrepreneurship and Innovation Center
   Source: senic.org
   ============================================================ */

/* ---------- Webfonts (Google Fonts substitutions) ---------- */
/* Note: SENIC's site uses a bold rounded sans (looks like Lufga/Mulish-ish)
   for headlines + a tall display sans for posters. We substitute with
   Plus Jakarta Sans (rounded geometric) + Oswald (tall display). */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand colors ---------- */
  --senic-teal:        #1AAFB3;   /* Primary brand teal/cyan */
  --senic-teal-deep:   #0F8A8E;   /* Deeper teal — buttons hover */
  --senic-teal-soft:   #66CACE;   /* Hero gradient lower */
  --senic-teal-tint:   #E6F6F6;   /* Section wash */

  --senic-navy:        #0C3556;   /* Deep navy — poster bg, headlines */
  --senic-navy-deep:   #082238;   /* Footer / overlays */
  --senic-navy-soft:   #1F4D74;   /* Mid blue */

  /* Accent palette — pulled from logo + posters */
  --senic-yellow:      #F5C518;   /* Logo yellow / "Curious!" */
  --senic-purple:      #6B4CE6;   /* Iso cube purple */
  --senic-purple-soft: #8E73F0;
  --senic-magenta:     #E74A5C;   /* Logo coral/red */
  --senic-green:       #2E9E47;   /* Logo green */
  --senic-blue:        #2E8FE0;   /* Logo blue */
  --senic-orange:      #F08A2E;

  /* ---------- Neutrals ---------- */
  --senic-ink:         #0E1A24;   /* Body text on white */
  --senic-ink-2:       #3A4A57;
  --senic-ink-3:       #6B7886;
  --senic-line:        #E2E8EC;
  --senic-line-2:      #C9D3DA;
  --senic-bg:          #FFFFFF;
  --senic-bg-alt:      #F5F8FA;
  --senic-bg-warm:     #FAFAF7;

  /* ---------- Semantic foreground/background ---------- */
  --fg1: var(--senic-ink);
  --fg2: var(--senic-ink-2);
  --fg3: var(--senic-ink-3);
  --fg-on-dark: #FFFFFF;
  --fg-on-teal: #FFFFFF;

  --bg1: var(--senic-bg);
  --bg2: var(--senic-bg-alt);
  --bg-dark: var(--senic-navy);
  --bg-brand: var(--senic-teal);

  /* ---------- Typography stacks ---------- */
  --font-sans: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;     /* rounded bold */
  --font-poster:  'Oswald', 'Bebas Neue', 'Inter', sans-serif;             /* tall caps display */
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --fs-display: clamp(48px, 7vw, 84px);
  --fs-h1: clamp(36px, 4.5vw, 56px);
  --fs-h2: clamp(28px, 3.2vw, 40px);
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 12px;
  --fs-eyebrow: 13px;

  --lh-tight: 1.05;
  --lh-headline: 1.15;
  --lh-body: 1.55;
  --lh-loose: 1.7;

  --tracking-eyebrow: 0.18em;   /* Eyebrows are aggressively spaced */
  --tracking-poster: 0.04em;
  --tracking-tight: -0.01em;

  /* ---------- Radii / elevation / spacing ---------- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;
  --r-circle: 50%;

  --shadow-sm: 0 1px 2px rgba(12,53,86,.06), 0 1px 3px rgba(12,53,86,.04);
  --shadow-md: 0 6px 18px rgba(12,53,86,.08), 0 2px 6px rgba(12,53,86,.04);
  --shadow-lg: 0 20px 48px rgba(12,53,86,.12), 0 6px 16px rgba(12,53,86,.06);
  --shadow-teal: 0 14px 30px rgba(26,175,179,.28);

  --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;

  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,.84,.32,1);
  --dur-fast: 150ms;
  --dur-med: 280ms;
  --dur-slow: 480ms;
}

/* ---------- Semantic element styles ---------- */
.senic-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--senic-teal);
}

.senic-h1, h1.senic {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: var(--lh-headline);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  margin: 0 0 .5em;
}

.senic-h2, h2.senic {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-headline);
  color: var(--fg1);
  margin: 0 0 .5em;
}

.senic-h3, h3.senic {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.25;
  color: var(--fg1);
  margin: 0 0 .4em;
}

.senic-poster-h1 {
  font-family: var(--font-poster);
  font-weight: 700;
  font-size: clamp(56px, 8vw, 110px);
  line-height: 0.95;
  letter-spacing: var(--tracking-poster);
  text-transform: uppercase;
  color: #fff;
}

.senic-body, p.senic {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg2);
}

.senic-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--fg2);
  font-weight: 500;
}

.senic-small {
  font-size: var(--fs-small);
  color: var(--fg3);
  line-height: 1.45;
}

.senic-stat {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 80px);
  color: var(--senic-teal);
  line-height: 1;
  letter-spacing: -0.02em;
}

code, .senic-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--senic-bg-alt);
  padding: 0.1em 0.4em;
  border-radius: var(--r-sm);
}