/* =============================================================
   망원정X 페미니스트 정치학교 — Foundation tokens
   Import this once at the top of any HTML file:
     <link rel="stylesheet" href="colors_and_type.css">

   Pretendard + Archivo are pulled from CDN. If you have local
   font files, drop them in /fonts and replace the @font-face
   block at the bottom.
   ============================================================= */

/* --- Web fonts (CDN) ----------------------------------------- */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&display=swap");

/* --- Tokens --------------------------------------------------- */
:root {
  /* ---------- Color: pastel primaries (from brand sheet) ----- */
  --lavender: #EBBDF1;       /* 응원봉 tile */
  --lavender-soft: #F4DAF7;
  --lavender-deep: #D993E2;

  --mint: #C6F8FF;           /* 의사봉 tile */
  --mint-soft: #E0FBFF;
  --mint-deep: #8FE9F7;

  --butter: #FAF49B;         /* 연필 tile */
  --butter-soft: #FCF8C2;
  --butter-deep: #F1E76A;

  /* ---------- Color: secondary pastels (from gradient) -------- */
  --sky: #BCE3FA;
  --peach: #FFD8B8;
  --rose: #FFC4D8;

  /* ---------- Color: ink + paper ---------------------------- */
  --ink: #1B1817;            /* primary type & icon fill */
  --ink-2: #4A4541;          /* secondary type */
  --ink-3: #8A847E;          /* tertiary / muted */
  --hairline: #E6E2DA;
  --hairline-on-ink: #2A2522;   /* subtle separator on the dark footer surface */

  --paper: #FAFAF7;          /* page background */
  --paper-warm: #F2EEE6;     /* section background */
  --paper-cool: #F4F4EF;

  --white: #FFFFFF;
  --black: #000000;          /* pattern background only */

  /* ---------- Semantic color ------------------------------- */
  --bg: var(--paper);
  --bg-elevated: var(--white);
  --bg-section: var(--paper-warm);
  --fg: var(--ink);
  --fg-muted: var(--ink-2);
  --fg-subtle: var(--ink-3);
  --border: var(--hairline);
  --border-strong: var(--ink);
  --accent: var(--lavender-deep);

  /* ---------- The signature gradient ------------------------ */
  --brand-gradient: linear-gradient(
    100deg,
    var(--butter-soft) 0%,
    var(--butter) 18%,
    var(--lavender-soft) 45%,
    var(--lavender) 65%,
    var(--mint-soft) 85%,
    var(--mint) 100%
  );

  /* ---------- Type families ---------------------------------- */
  --font-sans: "Pretendard Variable", "Pretendard",
               -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
               "Noto Sans KR", system-ui, sans-serif;
  --font-display: "Archivo", "Pretendard Variable", "Pretendard", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (desktop) -------------------------- */
  /* Headlines lean BIG and chunky to match the logo lockup */
  --fs-display: 96px;        /* hero / cover */
  --fs-h1: 64px;
  --fs-h2: 44px;
  --fs-h3: 28px;
  --fs-h4: 20px;
  --fs-eyebrow: 13px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-micro: 11px;

  --lh-tight: 1.05;          /* display + h1 */
  --lh-snug: 1.2;            /* h2-h4 */
  --lh-normal: 1.55;         /* body */
  --lh-loose: 1.75;          /* long form */

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.14em;  /* eyebrows */

  /* ---------- Weights ---------------------------------------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;       /* logo-matching weight */

  /* ---------- Spacing (8px base) ----------------------------- */
  --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-0: 0;             /* default — sharp corners */
  --radius-1: 4px;            /* small inputs */
  --radius-2: 8px;            /* buttons, tiles */
  --radius-3: 16px;           /* (rare) feature cards */

  /* ---------- Shadow (the brand "hard offset") -------------- */
  --shadow-pop: 4px 4px 0 var(--ink);
  --shadow-pop-lg: 8px 8px 0 var(--ink);
  --shadow-pop-color: 4px 4px 0 var(--lavender-deep);

  /* ---------- Borders --------------------------------------- */
  --border-w: 1.5px;
  --border-w-strong: 2.5px;
  --border-style: solid;

  /* ---------- Motion ---------------------------------------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
}

/* --- Mobile: shrink display sizes --------------------------- */
@media (max-width: 768px) {
  :root {
    --fs-display: 56px;
    --fs-h1: 40px;
    --fs-h2: 30px;
    --fs-h3: 22px;
    --fs-h4: 18px;
    --fs-body: 16px;
    --space-9: 56px;
    --space-10: 80px;
  }
}

/* =============================================================
   Semantic element styles — drop a class to get the look
   ============================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-feature-settings: "ss06", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Headlines */
.t-display, h1.display {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.t-h1, h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.t-h2, h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.t-h3, h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0;
}
.t-h4, h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.t-body, p {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  margin: 0;
  text-wrap: pretty;
}
.t-body-sm { font-size: var(--fs-body-sm); }
.t-caption { font-size: var(--fs-caption); color: var(--fg-muted); }

/* English / numeric display variant — use the wide grotesque */
.t-display-en {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  text-transform: lowercase;
}

/* Brand X mark used in the lockup name */
.brand-x {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  display: inline-block;
  transform: translateY(-0.04em);
}

/* Keyboard focus — visible outline matching brand hard-offset feel */
a:focus-visible,
button:focus-visible {
  outline: 2.5px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Brand lockup — full name desktop, short on mobile to prevent CTA overlap */
.brand-text-short { display: none; }
@media (max-width: 768px) {
  .brand-text-full { display: none; }
  .brand-text-short { display: inline-block; }
}

/* Mobile hamburger — visible only when desktop nav is hidden */
@media (max-width: 900px) {
  .mobile-menu-toggle { display: inline-flex !important; }
}

/* Apply timeline arrows: rotate to point down on mobile (cards stack vertically) */
@media (max-width: 768px) {
  .apply-arrow { transform: rotate(90deg); }
}

/* === Hover states ===
   Inline styles already define `transition`. These rules use !important to
   override the inline `boxShadow` / `transform` / `background` only on hover. */

/* Press-into-shadow: dark CTA with lavender hard offset */
.btn-pop-lavender:hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--lavender-deep) !important;
}

/* Press-into-shadow: card with ink hard offset (contact cards) */
.card-pop-ink:hover {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
}

/* Ghost / outline button: tint background on hover */
.btn-ghost:hover {
  background: var(--paper-warm) !important;
}

/* Solid ink button without static shadow (Apply primary): subtle tint */
.btn-solid-ink:hover {
  background: var(--ink-2) !important;
}

/* Header text links: deepen color on hover (default surface = paper) */
.nav-link:hover {
  color: var(--ink) !important;
}
/* Footer links live on dark ink surface — dim toward ink-3 instead */
footer .nav-link:hover {
  color: var(--ink-3) !important;
}
/* Drawer nav items already use ink color — give them a subtle paper-warm tint */
[role="dialog"] .nav-link:hover {
  background: var(--paper-warm) !important;
}

/* Phase tab (Curriculum) — tint inactive tab on hover */
.tab-btn:not(.tab-btn-active):hover {
  background: var(--paper-warm) !important;
}