/*
  Design tokens & reusable components — Masaba × FlyingMinds
  Single source for :root variables, base body, and shared UI classes.
*/

/* 1. Design tokens — exact as landing */
:root {
  --cream:    #fdf6e8;
  --cream-2:  #f5ead0;
  --magenta:  #e8195a;
  --magenta-l:#ff4d7e;
  --gold:     #fcc162;
  --gold-l:   #ffc444;
  --teal:     #1a7a6e;
  --teal-l:   #2aaa98;
  --ink:      #1a1208;
  --ink-2:    #3a2e1a;
  --body:     #4a3e28;
  --quiet:    #8a7a5a;
  --rule:     #d4c4a0;
  --white:    #ffffff;
}

/* 2. Base body */
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--body);
  cursor: default;
  -webkit-font-smoothing: antialiased;
}

/* 3. Reusable component classes */

/* Buttons */
.btn-ink {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--white);
  background: var(--ink);
  border: none;
  padding: 13px 26px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border-bottom: 4px solid #000;
  transition: all 0.18s;
}
.btn-ink:hover {
  background: var(--ink-2);
  transform: translateY(-2px);
}
.btn-ink:active {
  transform: translateY(1px);
  border-bottom-width: 1px;
}

.btn-outline {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--teal);
  background: transparent;
  border: 2px solid var(--teal);
  padding: 11px 24px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all 0.18s;
}
.btn-outline:hover {
  background: var(--teal);
  color: var(--white);
}

/* Card — 3px ink border, 4px 4px shadow */
.card {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  transform: translateY(-5px) rotate(-0.5deg);
  box-shadow: 8px 8px 0 var(--ink);
}

/* Colored top stripe bar — height 8px; use modifier for color */
.card-bar {
  height: 8px;
  min-height: 8px;
}
.card-bar.card-bar--ela {
  background: linear-gradient(90deg, var(--magenta), var(--gold));
}
.card-bar.card-bar--sat,
.card-bar.card-bar--teal {
  background: var(--teal);
}
.card-bar.card-bar--astro {
  background: linear-gradient(90deg, var(--ink), var(--magenta));
}
.card-bar.card-bar--games {
  background: linear-gradient(90deg, var(--gold), var(--teal));
}
.card-bar.card-bar--accent {
  background: linear-gradient(90deg, var(--teal), var(--magenta), var(--gold));
}

/* Tag pill */
.tag {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1.5px solid var(--rule);
  color: var(--quiet);
  background: var(--cream-2);
  transition: all 0.12s;
}
.card:hover .tag {
  border-color: var(--ink);
  color: var(--ink);
}

/* Grade pill */
.gp {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  border: 2px solid var(--ink);
  background: var(--cream-2);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.12s;
}
.gp:hover,
.gp.on {
  background: var(--ink);
  color: var(--white);
}

/* Section eyebrow & headline */
.sec-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 14px;
  display: block;
}
.sec-h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 52px;
}
.sec-h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
}

/* Animation — reusable "up" entrance */
@keyframes up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes landing-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}