/* ===================================================================
   クローズドテスト攻略組 — Design System
   Global entry point. @import lines only — no rules here.
   =================================================================== */
/* ===================================================================
   Fonts — friendly rounded gothic for a warm, modern startup feel.
   Loaded from Google Fonts (Japanese + Latin). Consumers linking
   styles.css pick these up automatically.
   - M PLUS Rounded 1c : display / headings (rounded, approachable)
   - Noto Sans JP       : body copy (clean, highly legible)
   - Outfit             : Latin display + big numbers (geometric, techy)
   =================================================================== */
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800;900&family=Noto+Sans+JP:wght@400;500;700&family=Outfit:wght@400;500;600;700;800&display=swap");

/* ===================================================================
   Colors — brand palette from the community logo.
   黄緑 (lime-green) = energy / growth   水色 (cyan) = trust / openness
   =================================================================== */
:root {
  /* ---- Brand: Lime-green (黄緑) — primary ---------------------------- */
  --green-50:  #f4faea;
  --green-100: #e6f4cd;
  --green-200: #cfe9a1;
  --green-300: #b2da6e;
  --green-400: #95cb45;
  --green-500: #7bb52b;   /* primary brand green */
  --green-600: #61961f;
  --green-700: #4a751c;
  --green-800: #3c5c1d;
  --green-900: #324d1c;

  /* ---- Brand: Cyan (水色) — secondary -------------------------------- */
  --cyan-50:  #e7fbff;
  --cyan-100: #c4f4ff;
  --cyan-200: #8eeaff;
  --cyan-300: #4ed9f8;
  --cyan-400: #1fc4ec;
  --cyan-500: #06a6cf;   /* secondary brand cyan */
  --cyan-600: #0886ad;
  --cyan-700: #0d6b8c;
  --cyan-800: #135872;
  --cyan-900: #15495f;

  /* ---- Neutrals: cool-tinted slate ---------------------------------- */
  --slate-0:   #ffffff;
  --slate-25:  #f9fbfc;
  --slate-50:  #f3f6f9;
  --slate-100: #e8edf2;
  --slate-200: #d6dee6;
  --slate-300: #b6c2cd;
  --slate-400: #8a98a6;
  --slate-500: #647281;
  --slate-600: #4a5663;
  --slate-700: #38424d;
  --slate-800: #232c35;
  --slate-900: #131a21;

  /* ---- Semantic ----------------------------------------------------- */
  --success: var(--green-500);
  --info:    var(--cyan-500);
  --warning: #f6a609;
  --danger:  #ef4d5a;

  /* ---- Aliases: surfaces -------------------------------------------- */
  --surface-page:    var(--slate-25);
  --surface-card:    var(--slate-0);
  --surface-sunken:  var(--slate-50);
  --surface-inverse: var(--slate-900);
  --surface-brand-soft: var(--green-50);
  --surface-cyan-soft:  var(--cyan-50);

  /* ---- Aliases: text ------------------------------------------------ */
  --text-strong:  var(--slate-900);
  --text-body:    var(--slate-700);
  --text-muted:   var(--slate-500);
  --text-faint:   var(--slate-400);
  --text-on-brand: #ffffff;
  --text-link:    var(--cyan-700);

  /* ---- Aliases: borders --------------------------------------------- */
  --border-soft:   var(--slate-100);
  --border-default:var(--slate-200);
  --border-strong: var(--slate-300);

  /* ---- Brand gradients (the green→cyan signature) ------------------- */
  --grad-brand:   linear-gradient(100deg, var(--green-400) 0%, var(--cyan-400) 100%);      /* @kind color */
  --grad-brand-deep: linear-gradient(120deg, var(--green-600) 0%, var(--cyan-600) 100%);   /* @kind color */
  --grad-sky:     linear-gradient(180deg, var(--cyan-50) 0%, var(--slate-0) 70%);          /* @kind color */
  --grad-aurora:  linear-gradient(110deg, #95cb45 0%, #2fcdd6 45%, #1fc4ec 100%);          /* @kind color */
}

/* ===================================================================
   Typography — rounded gothic display, clean gothic body.
   =================================================================== */
:root {
  /* Families */
  --font-display: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  --font-body:    "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-latin:   "Outfit", "M PLUS Rounded 1c", sans-serif;  /* Latin display + numbers */

  /* Weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-black:   800; /* @kind font */
  --fw-heavy:   900; /* @kind font */

  /* Type scale (rem, 16px base) */
  --fs-display: 4.25rem;   /* 68 — hero */
  --fs-h1:      3rem;      /* 48 */
  --fs-h2:      2.25rem;   /* 36 */
  --fs-h3:      1.625rem;  /* 26 */
  --fs-h4:      1.25rem;   /* 20 */
  --fs-lg:      1.125rem;  /* 18 */
  --fs-base:    1rem;      /* 16 */
  --fs-sm:      0.875rem;  /* 14 */
  --fs-xs:      0.75rem;   /* 12 */

  /* Line heights */
  --lh-tight:   1.1;  /* @kind font */
  --lh-snug:    1.3;  /* @kind font */
  --lh-normal:  1.6;  /* @kind font */
  --lh-relaxed: 1.85; /* @kind font */

  /* Letter spacing */
  --ls-tight:  -0.02em; /* @kind font */
  --ls-normal: 0;       /* @kind font */
  --ls-wide:   0.04em;  /* @kind font */
  --ls-wider:  0.12em;  /* @kind font */
}

/* ===================================================================
   Spacing & layout — 4px base rhythm.
   =================================================================== */
:root {
  --sp-1:  0.25rem;   /*  4 */
  --sp-2:  0.5rem;    /*  8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2rem;      /* 32 */
  --sp-7:  3rem;      /* 48 */
  --sp-8:  4rem;      /* 64 */
  --sp-9:  6rem;      /* 96 */
  --sp-10: 8rem;      /* 128 */

  /* Container widths */
  --container:     1200px;     /* @kind spacing */
  --container-narrow: 760px;   /* @kind spacing */
  --container-wide:   1360px;  /* @kind spacing */

  /* Section vertical rhythm */
  --section-y: clamp(4rem, 9vw, 8rem);  /* @kind spacing */

  /* Radii — soft, rounded to match the brand's friendly mark */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-2xl: 44px;
  --r-pill: 999px;
}

/* ===================================================================
   Effects — shadows, rings, blur. Soft, airy, lifted cards.
   Shadows carry a faint cyan/slate tint rather than pure black.
   =================================================================== */
:root {
  --shadow-xs:  0 1px 2px rgba(19, 26, 33, 0.06);
  --shadow-sm:  0 2px 8px rgba(19, 26, 33, 0.06);
  --shadow-md:  0 8px 24px rgba(19, 26, 33, 0.08);
  --shadow-lg:  0 18px 48px rgba(19, 26, 33, 0.10);
  --shadow-xl:  0 30px 70px rgba(19, 26, 33, 0.14);

  /* Brand-tinted glow for hero / highlighted cards */
  --glow-green: 0 16px 40px rgba(123, 181, 43, 0.28);
  --glow-cyan:  0 16px 40px rgba(6, 166, 207, 0.26);

  /* Focus ring */
  --ring-cyan:  0 0 0 4px rgba(31, 196, 236, 0.35);
  --ring-green: 0 0 0 4px rgba(149, 203, 69, 0.35);

  /* Glass surfaces */
  --glass-bg:     rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-blur:   blur(14px) saturate(140%); /* @kind other */

  /* Hairline gradient borders */
  --border-grad: linear-gradient(140deg, rgba(149,203,69,0.5), rgba(31,196,236,0.5)); /* @kind color */
}

/* ===================================================================
   Motion — scroll-reveal "ふわっと" fades, easing curves, durations.
   Light, gentle, never bouncy-cheap. Respects reduced-motion.
   =================================================================== */
:root {
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* @kind other */

  --dur-fast:  140ms;    /* @kind other */
  --dur-base:  240ms;    /* @kind other */
  --dur-slow:  520ms;    /* @kind other */
  --dur-reveal: 720ms;   /* @kind other */

  --reveal-shift: 28px;  /* @kind spacing */
}

/* Reusable scroll-reveal utility: start hidden, .is-visible reveals.
   Consumers/JS add .is-visible via IntersectionObserver. */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}