/* ── Berkeley Professional Education — Webfonts ──
   EB Garamond → titles & headings (the elevated display voice)
   DM Sans     → body, UI, buttons, captions (the workhorse)
   Source Code Pro → code & data labels (rare)
   All Google Fonts; loaded from the Google Fonts CDN. Swap for self-hosted
   @font-face rules if you need offline/embedded delivery. */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Source+Code+Pro:wght@400;500&display=swap');
/* ── Berkeley Professional Education — Color Tokens ──
   Source of truth: ExedEd.fig "visual guideline → Color".
   Primary = brand. Secondary = UC Berkeley parent theme (use sparingly).
   Supporting = neutrals for surfaces & body text. Avoid pure black. */

:root {
  /* ---- Primary (the brand) ---- */
  --bpe-blue-dark: #010133;     /* "Blue Dark"  · Pantone 2766 C — primary ink + dark surfaces */
  --bpe-gold: #FDB515;          /* "California Gold" · Pantone 137 C — the signal color */
  --bpe-white: #FFFFFF;

  /* ---- Secondary (UC Berkeley parent brand — don't apply extensively) ---- */
  --bpe-berkeley-blue: #002676; /* "Berkeley Blue" · Pantone 661 C */
  --bpe-engineering-blue: #1B84F9; /* "Engineering Blue" · Pantone 258 U */
  --bpe-blue-light: #9FD1FF;    /* "Blue Light" · Pantone 278 C */

  /* ---- Supporting (neutrals) ---- */
  --bpe-gray-medium: #808080;   /* "Gray Medium" · Pantone 2331 C */
  --bpe-gray-light: #F2F2F2;    /* "Gray Light"  · Pantone 434 C — section/surface tint */
  --bpe-black: #000000;         /* footer / full-bleed dark fields only */

  /* ---- Extended neutrals (sampled from the .fig) ---- */
  --bpe-border: #D9D9D9;        /* the 1px card / input stroke */
  --bpe-border-strong: #141414; /* dark hairline on stroke buttons */
  --bpe-ink: #1A1A1A;           /* body text — softer than pure black */
  --bpe-ink-muted: #666666;     /* captions, secondary text */
  --bpe-accent-link: #034AAE;   /* bright link/badge blue */

  /* ---- Gold field (header & marketing tints) ---- */
  --bpe-gold-bright: #FFC21C;
  --bpe-gold-soft: #FFE78D;
  --bpe-blue-pale: #DEF0FF;

  /* ---- Semantic aliases (build with these) ---- */
  --color-bg: var(--bpe-white);
  --color-bg-dark: var(--bpe-blue-dark);
  --color-bg-subtle: var(--bpe-gray-light);
  --color-surface-card: var(--bpe-white);

  --color-border: var(--bpe-border);
  --color-border-input: var(--bpe-border);

  --color-text-heading: var(--bpe-blue-dark);
  --color-text-body: var(--bpe-ink);
  --color-text-muted: var(--bpe-ink-muted);
  --color-text-inverse: var(--bpe-white);

  --color-primary: var(--bpe-blue-dark);
  --color-accent: var(--bpe-gold);
  /* Accent TEXT must meet WCAG AA contrast. California Gold fails on light
     surfaces (~1.7:1 on white), so on light it is a NON-TEXT accent only
     (rules, ticks, icon fills, borders). For accent text / eyebrows /
     numerals pick by surface: */
  --color-accent-text: var(--bpe-berkeley-blue);    /* accent text on light surfaces — AA (≈13:1) */
  --color-accent-text-on-dark: var(--bpe-gold);     /* accent text only on Blue Dark / black fields */
  --color-link: var(--bpe-berkeley-blue);
  --color-badge: var(--bpe-accent-link);

  --color-focus-ring: var(--bpe-engineering-blue);
}
/* ── Berkeley Professional Education — Typography Tokens ──
   EB Garamond  → titles & headings (the elevated display voice)
   DM Sans      → body, UI, buttons, captions (the workhorse)
   Source Code Pro → code & data labels (rare)
   Scale lifted from the .fig type specimen; families per brand direction. */

:root {
  /* ---- Families ---- */
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "EB Garamond", ui-serif, Georgia, "Times New Roman", serif;
  --font-display: "EB Garamond", ui-serif, Georgia, serif;
  --font-mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Weights ---- */
  --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 */

  /* ---- Type ramp (size / line-height) — sizes fluidly scale down on small viewports ---- */
  --text-h1-size: clamp(36px, 6vw, 64px);   --text-h1-lh: 1.02;  --text-h1-weight: var(--fw-regular);
  --text-h2-size: clamp(28px, 4.4vw, 48px);   --text-h2-lh: 1.06;  --text-h2-weight: var(--fw-regular);
  --text-h3-size: clamp(20px, 2.4vw, 24px);   --text-h3-lh: 1.3;   --text-h3-weight: var(--fw-medium);
  --text-headline-size: clamp(24px, 3.2vw, 32px); --text-headline-lh: 1.2; --text-headline-weight: var(--fw-medium); /* card headlines */
  --text-subtitle-size: clamp(17px, 2vw, 20px); --text-subtitle-lh: 1.5; --text-subtitle-weight: var(--fw-medium);   /* serif lead */
  --text-body-size: 16px; --text-body-lh: 1.55; --text-body-weight: var(--fw-regular); --text-body-tracking: 0.01em;
  --text-label-size: 18px; --text-label-lh: 1.5; --text-label-weight: var(--fw-medium);  /* nav / buttons */
  --text-caption-size: 12px; --text-caption-lh: 1.5; --text-caption-weight: var(--fw-regular); --text-caption-tracking: 0.03em;

  --tracking-tight: 0;
  --tracking-normal: 0;
}

/* ---- Ready-made text classes ---- */
/* Headings & titles → EB Garamond (serif) */
.bpe-h1 { font-family: var(--font-serif); font-weight: var(--text-h1-weight); font-size: var(--text-h1-size); line-height: var(--text-h1-lh); color: var(--color-text-heading); }
.bpe-h2 { font-family: var(--font-serif); font-weight: var(--text-h2-weight); font-size: var(--text-h2-size); line-height: var(--text-h2-lh); color: var(--color-text-heading); }
.bpe-h3 { font-family: var(--font-serif); font-weight: var(--text-h3-weight); font-size: var(--text-h3-size); line-height: var(--text-h3-lh); color: var(--color-text-heading); }
.bpe-headline { font-family: var(--font-serif); font-weight: var(--text-headline-weight); font-size: var(--text-headline-size); line-height: var(--text-headline-lh); color: var(--color-text-heading); }
/* Serif lead paragraph (subtitle) — also EB Garamond */
.bpe-subtitle { font-family: var(--font-serif); font-weight: var(--text-subtitle-weight); font-size: var(--text-subtitle-size); line-height: var(--text-subtitle-lh); color: var(--color-text-body); }
/* Body, labels, captions → DM Sans */
.bpe-body { font-family: var(--font-sans); font-weight: var(--text-body-weight); font-size: var(--text-body-size); line-height: var(--text-body-lh); letter-spacing: var(--text-body-tracking); color: var(--color-text-body); }
.bpe-label { font-family: var(--font-sans); font-weight: var(--text-label-weight); font-size: var(--text-label-size); line-height: var(--text-label-lh); }
.bpe-caption { font-family: var(--font-sans); font-weight: var(--text-caption-weight); font-size: var(--text-caption-size); line-height: var(--text-caption-lh); letter-spacing: var(--text-caption-tracking); color: var(--color-text-muted); }
/* ── Berkeley Professional Education — Spacing, Radius, Shadow ──
   The brand reads "elevated" through generous whitespace, restrained
   corner radius, and 1px strokes instead of heavy shadows. */

:root {
  /* ---- Spacing scale (px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 30px;
  --space-7: 40px;
  --space-8: 50px;
  --space-9: 60px;
  --space-10: 80px;
  --space-12: 120px;

  /* Common layout rhythms seen in the .fig */
  --gutter-page: 50px;     /* header / footer horizontal padding */
  --gutter-card: 40px;     /* card interior padding */
  --section-gap: 80px;     /* vertical gap between page sections */
  --max-content: 1440px;   /* design canvas width */

  /* ---- Corner radius (restrained) ---- */
  --radius-xs: 2px;
  --radius-sm: 2px;        /* cards, inputs, nav field */
  --radius-md: 4px;        /* badges, detail tiles, avatars-detail */
  --radius-lg: 9px;        /* spec swatches */
  --radius-pill: 30px;     /* buttons & status pills */
  --radius-round: 50%;     /* avatars */

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--color-border);
  --border-dark: 1px solid var(--bpe-border-strong);

  /* ---- Shadows (used sparingly) ---- */
  --shadow-none: none;
  --shadow-card: 0 2px 8px rgba(1, 1, 51, 0.06);   /* gentle lift for elevated cards */
  --shadow-pop: 0 5px 16px rgba(1, 1, 51, 0.12);   /* dialogs / hover lift */
  --ring-stroke: inset 0 0 0 1px var(--color-border); /* the canonical 1px card stroke */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 180ms; /* @kind other */
  --dur-base: 300ms; /* @kind other */
}
/* ── Berkeley Professional Education — Motion & Interaction ──
   Quiet, functional, elegant. Short durations, a single standard easing
   for most things, a gentle "emphasized" curve for entrances. No bounces,
   no decorative loops. Everything respects prefers-reduced-motion. */

:root {
  /* ---- Durations (slower & more noticeable) ---- */
  --dur-instant: 120ms;  /* @kind other */
  --dur-slow: 560ms;     /* @kind other */
  --dur-slower: 820ms;   /* @kind other */
  /* (--dur-fast 180ms, --dur-base 300ms live in spacing.css) */

  /* ---- Easings: standard=workhorse, emphasized=entrances, out=settle, in=exit, gentle=slow reveals ---- */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);          /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);           /* @kind other */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --ease-gentle: cubic-bezier(0.33, 0, 0.2, 1);    /* @kind other */
  /* (--ease-standard lives in spacing.css) */

  /* ---- Hover / press conventions (use these magnitudes everywhere) ---- */
  --lift-hover: -4px;        /* @kind other */
  --press-scale: 0.96;       /* @kind other */
  --grow-hover: 1.05;        /* @kind other */

  /* Stagger step for lists/grids (multiply by child index) */
  --stagger-step: 120ms;     /* @kind other */
}

/* ════════════ Keyframes ════════════ */
@keyframes bpe-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bpe-fade-up { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes bpe-fade-up-sm { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes bpe-fade-right { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@keyframes bpe-scale-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes bpe-rule-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bpe-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ════════════ Entrance utilities ════════════
   Apply on render for one-shot entrances. Add inline
   style="animation-delay: calc(var(--stagger-step) * N)" to stagger. */
.bpe-animate-fade-in   { animation: bpe-fade-in   var(--dur-slow)  var(--ease-out) both; }
.bpe-animate-fade-up   { animation: bpe-fade-up   var(--dur-slow)  var(--ease-emphasized) both; }
.bpe-animate-fade-up-sm{ animation: bpe-fade-up-sm var(--dur-base) var(--ease-emphasized) both; }
.bpe-animate-fade-right{ animation: bpe-fade-right var(--dur-slow) var(--ease-emphasized) both; }
.bpe-animate-scale-in  { animation: bpe-scale-in  var(--dur-slow)  var(--ease-emphasized) both; }

/* ════════════ Scroll reveal ════════════
   Base state hidden; add .is-visible (e.g. via IntersectionObserver) to play.
   Stagger children with --i (set inline: style="--i:2"). */
.bpe-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--dur-slower) var(--ease-emphasized),
              transform var(--dur-slower) var(--ease-emphasized);
  transition-delay: calc(var(--stagger-step) * var(--i, 0));
  will-change: opacity, transform;
}
.bpe-reveal.is-visible { opacity: 1; transform: none; }

/* ════════════ Hover / press interactions ════════════ */
.bpe-transition { transition: all var(--dur-base) var(--ease-standard); }

.bpe-hover-lift {
  transition: transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.bpe-hover-lift:hover { transform: translateY(var(--lift-hover)); box-shadow: var(--shadow-pop); }

.bpe-press { transition: transform var(--dur-fast) var(--ease-standard); }
.bpe-press:active { transform: scale(var(--press-scale)); }

/* Media zoom — pair a .bpe-media-zoom wrapper (overflow:hidden) with an inner img/div */
.bpe-media-zoom { overflow: hidden; }
.bpe-media-zoom > * { transition: transform var(--dur-slow) var(--ease-standard); }
.bpe-media-zoom:hover > * { transform: scale(var(--grow-hover)); }

/* Animated link underline (gold), grows from the left */
.bpe-underline {
  position: relative;
  text-decoration: none;
}
.bpe-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--bpe-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-standard);
}
.bpe-underline:hover::after { transform: scaleX(1); }

/* The recurring circular-arrow affordance: nudge on hover of the parent */
.bpe-arrow-nudge { transition: transform var(--dur-base) var(--ease-standard); }
.bpe-arrow-host:hover .bpe-arrow-nudge { transform: translate(2px, -2px); }

/* Video testimonial — grow the play button on card hover */
.bpe-video-testimonial { transition: box-shadow var(--dur-base) var(--ease-standard); }
.bpe-video-testimonial:hover { box-shadow: var(--shadow-pop); }
.bpe-video-testimonial:hover .bpe-play { transform: scale(var(--grow-hover)); }

/* Gold rule that draws in (use under headings) */
.bpe-rule-draw { transform-origin: left; animation: bpe-rule-grow var(--dur-slow) var(--ease-emphasized) both; }

/* ════════════ Focus & loading ════════════ */
.bpe-focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 45%, transparent);
}

.bpe-skeleton {
  background: linear-gradient(90deg,
    var(--bpe-gray-light) 25%,
    color-mix(in srgb, var(--bpe-gray-light) 60%, #fff) 37%,
    var(--bpe-gray-light) 63%);
  background-size: 400% 100%;
  animation: bpe-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

/* ════════════ Reduced motion ════════════
   Honor the OS setting: keep end-states, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .bpe-animate-fade-in, .bpe-animate-fade-up, .bpe-animate-fade-up-sm,
  .bpe-animate-fade-right, .bpe-animate-scale-in, .bpe-rule-draw,
  .bpe-skeleton {
    animation: none !important;
  }
  .bpe-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .bpe-hover-lift:hover, .bpe-press:active,
  .bpe-media-zoom:hover > *, .bpe-arrow-host:hover .bpe-arrow-nudge {
    transform: none !important;
  }
  * { scroll-behavior: auto !important; }
}