/* ============================================================
   EQWEL Design System — Foundations
   Target: classroom detail page (mobile-first, 375px base)
   Audience: mothers of 0-2yr children, often viewing at night
   Tone: calm, reassuring — no urgency copy
   ============================================================ */

:root {
  /* ---------- Brand colors ---------- */
  --eq-teal:        #00AEA1;   /* Primary — buttons borders, labels, links, selected */
  --eq-teal-ink:    #008B80;   /* Darker teal for text on light tints / hover */
  --eq-teal-tint:   #E5F5F3;   /* Background tint for teal sections */
  --eq-teal-wash:   #F2FAF9;   /* Even lighter wash */

  --eq-pink:        #ED599F;   /* Baby / 胎教 course label & badge only */
  --eq-pink-tint:   #FCEAF2;
  --eq-lime:        #7BCC43;   /* English course label & badge only */
  --eq-lime-tint:   #ECF7E0;

  --eq-cta:         #E8373E;   /* Experience-lesson CTA only */
  --eq-cta-ink:     #C72B31;
  --eq-cta-tint:    #FDECEC;

  /* ---------- Text ---------- */
  --eq-fg1:         #3F3A39;   /* Body text */
  --eq-fg2:         #6B6563;   /* Secondary text, captions */
  --eq-fg3:         #938C89;   /* Tertiary / placeholder */
  --eq-fg-invert:   #FFFFFF;

  /* ---------- Surfaces ---------- */
  --eq-bg:          #FFFFFF;
  --eq-bg-tint:     #E5F5F3;   /* Teal-tinted background */
  --eq-bg-footer:   #F4F2EF;   /* Warm off-white footer */
  --eq-bg-muted:    #FAF9F7;

  /* ---------- Borders ---------- */
  --eq-border:      #E5E3E0;   /* Neutral hairline */
  --eq-border-soft: #EFEDEA;
  --eq-border-teal: #B8E3DF;   /* Teal-tinted border */

  /* ---------- Spacing (8px base) ---------- */
  --eq-s-1: 4px;
  --eq-s-2: 8px;
  --eq-s-3: 12px;
  --eq-s-4: 16px;
  --eq-s-6: 24px;
  --eq-s-8: 32px;
  --eq-s-12: 48px;

  /* Semantic spacing */
  --eq-section-gap: 48px;        /* between sections */
  --eq-heading-gap: 24px;        /* heading -> body */
  --eq-card-gap: 12px;           /* between cards */

  /* ---------- Radii ---------- */
  --eq-r-sm: 6px;
  --eq-r-md: 8px;
  --eq-r-lg: 10px;
  --eq-r-pill: 999px;

  /* ---------- Shadows (minimal) ---------- */
  --eq-shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --eq-shadow-focus: 0 0 0 3px rgba(0, 174, 161, .25);

  /* ---------- Type ---------- */
  --eq-font-sans:
    -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", Meiryo,
    "Segoe UI", Roboto, sans-serif;

  /* Mobile-first type scale */
  --eq-fs-caption: 11px;
  --eq-fs-small:   12px;
  --eq-fs-body:    14px;        /* primary reading size */
  --eq-fs-lead:    15px;
  --eq-fs-h3:      16px;
  --eq-fs-h2:      18px;
  --eq-fs-h1:      24px;        /* hero */
  --eq-fs-display: 28px;        /* used sparingly */

  --eq-lh-body:    1.7;
  --eq-lh-heading: 1.5;
  --eq-lh-tight:   1.35;

  --eq-ls-tight:   0.01em;
  --eq-ls-normal:  0.02em;      /* slight tracking on JP text */
  --eq-ls-wide:    0.06em;

  --eq-fw-reg:     400;
  --eq-fw-med:     500;
  --eq-fw-bold:    700;

  /* ---------- Layout ---------- */
  --eq-mobile-w: 375px;
  --eq-max-w:    420px;          /* desktop cap for mobile-first page */
  --eq-gutter:   16px;

  /* ---------- Motion ---------- */
  --eq-ease: cubic-bezier(.2,.6,.2,1);
  --eq-dur-fast: 120ms;
  --eq-dur:      200ms;
}

/* ============================================================
   Base / semantic elements
   ============================================================ */
html, body {
  background: var(--eq-bg);
  color: var(--eq-fg1);
  font-family: var(--eq-font-sans);
  font-size: var(--eq-fs-body);
  line-height: var(--eq-lh-body);
  letter-spacing: var(--eq-ls-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .eq-h1 {
  font-size: var(--eq-fs-h1);
  line-height: var(--eq-lh-heading);
  font-weight: var(--eq-fw-bold);
  letter-spacing: var(--eq-ls-tight);
  color: var(--eq-fg1);
}
h2, .eq-h2 {
  font-size: var(--eq-fs-h2);
  line-height: var(--eq-lh-heading);
  font-weight: var(--eq-fw-bold);
  color: var(--eq-fg1);
}
h3, .eq-h3 {
  font-size: var(--eq-fs-h3);
  line-height: var(--eq-lh-heading);
  font-weight: var(--eq-fw-bold);
  color: var(--eq-fg1);
}
p, .eq-body {
  font-size: var(--eq-fs-body);
  line-height: var(--eq-lh-body);
  color: var(--eq-fg1);
}
small, .eq-caption {
  font-size: var(--eq-fs-caption);
  line-height: 1.5;
  color: var(--eq-fg2);
}

a, .eq-link {
  color: var(--eq-teal-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--eq-dur) var(--eq-ease),
              border-color var(--eq-dur) var(--eq-ease);
}
a:hover, .eq-link:hover {
  color: var(--eq-teal);
  border-bottom-color: currentColor;
}

/* Section-label: the small teal heading label used throughout */
.eq-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--eq-teal-ink);
  font-size: var(--eq-fs-small);
  font-weight: var(--eq-fw-bold);
  letter-spacing: var(--eq-ls-wide);
}