/* ===========================================================
   ECOM UNIVERSITY — BRAND FOUNDATION CSS
   The locked design system every deck inherits.
   Source of truth: foundation-and-branding/Visual Identity Guidelines.pdf
   =========================================================== */

/* ====== FONTS ======
   Awesome Serif: display, headlines, all hero type
   Helvetica Neue: UI, captions, body, eyebrows
   ============================================ */

/* Awesome Serif — variable, covers full weight range */
@font-face {
  font-family: "Awesome Serif";
  src: url("fonts/awesome-serif/Variable%20Fonts/Awesome%20Serif%20VAR-VF.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Awesome Serif";
  src: url("fonts/awesome-serif/Variable%20Fonts/Awesome%20Serif%20Italic%20VAR-VF.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Helvetica Neue — load only the weights we actually use to keep payload small */
@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/helvetica-neue/HelveticaNeueLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/helvetica-neue/HelveticaNeueLightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/helvetica-neue/HelveticaNeueRoman.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/helvetica-neue/HelveticaNeueItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/helvetica-neue/HelveticaNeueMedium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/helvetica-neue/HelveticaNeueMediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/helvetica-neue/HelveticaNeueBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/helvetica-neue/HelveticaNeueBoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Neue";
  src: url("fonts/helvetica-neue/HelveticaNeueBlack.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ====== DESIGN TOKENS ====== */
:root {
  /* --- Main palette (canonical names from Visual Identity Guidelines) --- */
  --color-stalactite: #F7F6F3;
  --color-bone-white: #D6D1C0;
  --color-airy-blue: #93B7D5;
  --color-gunpowder: #18181A;

  /* --- Secondary palette --- */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-titan: #243B51;
  --color-rich-gold: #C8B37C;

  /* --- Supporting surfaces (utility tokens, NOT flagship brand colors) ---
     Cards, panels, and other elevated UI surfaces that need to sit on top
     of the page without using a flagship brand color. Approved by Karlo
     on 20-05-2026. Use sparingly - this is a UI utility, not a brand color. */
  --surface-elevated: #F0F0F2;

  /* --- Semantic aliases (use these in slide types, not raw color vars) --- */
  --bg-default: var(--color-stalactite);
  --bg-emphasis: var(--color-gunpowder);
  --bg-panel-warm: var(--color-bone-white);
  --bg-panel-cool: var(--color-airy-blue);
  --bg-panel-gold: var(--color-rich-gold);
  --bg-panel-navy: var(--color-titan);

  --fg-default: var(--color-gunpowder);
  --fg-on-dark: var(--color-stalactite);
  --fg-muted: rgba(24, 24, 26, 0.55);
  --fg-muted-on-dark: rgba(247, 246, 243, 0.55);

  --border-subtle: rgba(24, 24, 26, 0.12);
  --border-subtle-on-dark: rgba(247, 246, 243, 0.16);

  /* --- Type families --- */
  --font-display: "Awesome Serif", "Times New Roman", Georgia, serif;
  --font-ui: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* --- Type scale (clamp-based: scales with viewport, never overflows) --- */
  --size-hero:    clamp(3rem,     8vw,    7rem);
  --size-h1:      clamp(2.25rem,  6vw,    5rem);
  --size-h2:      clamp(1.75rem,  4.5vw,  3.5rem);
  --size-h3:      clamp(1.375rem, 3vw,    2.25rem);
  --size-h4:      clamp(1.125rem, 2vw,    1.5rem);
  --size-body:    clamp(1rem,     1.4vw,  1.375rem);
  --size-caption: clamp(0.875rem, 1.1vw,  1.0625rem);
  --size-eyebrow: clamp(0.6875rem, 0.85vw, 0.875rem);

  /* --- Line heights --- */
  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-normal:  1.4;
  --leading-relaxed: 1.6;

  /* --- Letter spacing --- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-eyebrow: 0.14em;

  /* --- Spacing scale --- */
  --space-2xs: clamp(0.25rem, 0.4vw, 0.375rem);
  --space-xs:  clamp(0.5rem,  0.8vw, 0.75rem);
  --space-sm:  clamp(0.75rem, 1.2vw, 1.125rem);
  --space-md:  clamp(1.25rem, 2vw,   2rem);
  --space-lg:  clamp(2rem,    3.5vw, 3.5rem);
  --space-xl:  clamp(3rem,    5vw,   5rem);
  --space-2xl: clamp(4rem,    7vw,   7rem);

  /* --- Layout --- */
  --slide-padding: clamp(2rem, 5vw, 6rem);
  --content-max:   80vw;

  /* --- Motion --- */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast:   0.3s;
  --duration-normal: 0.6s;
  --duration-slow:   1.2s;
}

/* ====== BASE RESET ====== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-ui);
  font-size: var(--size-body);
  line-height: var(--leading-normal);
  color: var(--fg-default);
  background: var(--bg-default);
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

/* ====== SLIDE CONTAINER (viewport-fitting non-negotiables) ====== */
.slide {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding: var(--slide-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-default);
  color: var(--fg-default);
}

.slide--dark {
  background: var(--bg-emphasis);
  color: var(--fg-on-dark);
}

.slide--panel-warm { background: var(--bg-panel-warm); }
.slide--panel-cool { background: var(--bg-panel-cool); }
.slide--panel-gold { background: var(--bg-panel-gold); }
.slide--panel-navy { background: var(--bg-panel-navy); color: var(--fg-on-dark); }

/* ====== TYPOGRAPHY PRIMITIVES ====== */
.t-hero {
  font-family: var(--font-display);
  font-size: var(--size-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
}
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--size-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
}
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--size-h2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
}
.t-h3 {
  font-family: var(--font-display);
  font-size: var(--size-h3);
  line-height: var(--leading-snug);
  font-weight: 400;
}
.t-h4 {
  font-family: var(--font-ui);
  font-size: var(--size-h4);
  line-height: var(--leading-snug);
  font-weight: 500;
}
.t-body {
  font-family: var(--font-ui);
  font-size: var(--size-body);
  line-height: var(--leading-normal);
  font-weight: 400;
}
.t-caption {
  font-family: var(--font-ui);
  font-size: var(--size-caption);
  line-height: var(--leading-normal);
  font-weight: 400;
  color: var(--fg-muted);
}
.t-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--size-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.t-muted { color: var(--fg-muted); }
.slide--dark .t-muted,
.slide--panel-navy .t-muted { color: var(--fg-muted-on-dark); }

/* ====== ACCESSIBILITY ====== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 700px) {
  :root { --slide-padding: clamp(1rem, 6vw, 2rem); }
}