/* ============================================================
   Slimee Design System — Color & Type Tokens
   Use these CSS variables across LP, slides, and product.
   ============================================================ */

/* Fonts — Yu Gothic is the deck source font. For web/Google use
   Noto Sans JP as the close cross-platform match. Headlines and
   numerics in product/LP can use Plus Jakarta Sans for a softer
   rounded English voice. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ───────── Brand: primary teal ("slime jelly") ───────── */
  --slimee-50:  #F0FDFA;   /* surface tint, hover backgrounds   */
  --slimee-100: #CCFBF1;   /* badge backgrounds                 */
  --slimee-200: #99F6E4;
  --slimee-300: #5EEAD4;   /* light accent, dark-bg highlights  */
  --slimee-400: #2DD4BF;
  --slimee-500: #14B8A6;   /* PRIMARY — buttons, headlines      */
  --slimee-600: #0D9488;   /* hover, pressed                    */
  --slimee-700: #0F766E;   /* deep accent, body links on white  */
  --slimee-800: #115E59;
  --slimee-900: #134E4A;

  /* ───────── Neutrals (slate) — text + surfaces ───────── */
  --ink-50:  #F8FAFC;      /* page bg light                     */
  --ink-100: #F1F5F9;      /* card alt bg, divider              */
  --ink-200: #E2E8F0;      /* hairline border                   */
  --ink-300: #CBD5E1;      /* disabled outlines                 */
  --ink-400: #94A3B8;      /* placeholder, low-priority text    */
  --ink-500: #64748B;      /* secondary text / captions         */
  --ink-600: #475569;
  --ink-700: #334155;      /* body text on white                */
  --ink-800: #1E293B;      /* h2/h3 on white                    */
  --ink-900: #0F172A;      /* headlines on white                */
  --ink-950: #0B1220;      /* dark hero background              */

  /* ───────── Semantic accents (sparingly) ───────── */
  --warn-50:  #FEF3C7;
  --warn-500: #F59E0B;     /* amber — KPI highlight, attention  */
  --warn-700: #B45309;
  --warn-900: #78350F;

  --danger-50:  #FEF2F2;
  --danger-200: #FCA5A5;
  --danger-500: #DC2626;   /* red — BEFORE state, problem       */
  --danger-700: #991B1B;

  --success-500: #10B981;  /* green — checkmarks, confirmation  */
  --success-600: #059669;

  /* ───────── Semantic foreground / background ───────── */
  --fg-default:    var(--ink-900);
  --fg-muted:      var(--ink-500);
  --fg-subtle:     var(--ink-400);
  --fg-inverse:    #FFFFFF;
  --fg-brand:      var(--slimee-700);
  --fg-on-brand:   #FFFFFF;

  --bg-default:    #FFFFFF;
  --bg-subtle:     var(--ink-50);
  --bg-alt:        var(--ink-100);
  --bg-brand:      var(--slimee-500);
  --bg-brand-soft: var(--slimee-50);
  --bg-dark:       var(--ink-950);

  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-brand:   var(--slimee-500);

  /* ───────── Type — families ───────── */
  --font-jp:      "Yu Gothic", "游ゴシック", "Noto Sans JP", "Hiragino Sans",
                  "Hiragino Kaku Gothic ProN", "Meiryo", system-ui, sans-serif;
  --font-display: "Plus Jakarta Sans", var(--font-jp);
  --font-en:      "Plus Jakarta Sans", "Inter", system-ui, -apple-system,
                  "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ───────── Type — scale (1.25 modular) ───────── */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  60px;
  --text-6xl:  80px;
  --text-hero: 120px;     /* "30倍" style hero stat              */

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-eyebrow:0.18em;  /* section labels like PROBLEM     */

  /* ───────── Spacing (4 px base) ───────── */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* ───────── Radius — slime-soft, never sharp ───────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ───────── Elevation ───────── */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 24px 64px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06);
  --shadow-brand: 0 12px 32px rgba(20, 184, 166, 0.25);
  --shadow-inset: inset 0 0 0 1px var(--border-default);

  /* ───────── Motion ───────── */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-jelly:    cubic-bezier(0.34, 1.56, 0.64, 1);  /* slime bounce */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
}

/* ============================================================
   Semantic element styles
   Pair with class names h1/h2/h3 etc. or apply by tag.
   ============================================================ */

.h1, h1.slimee {
  font-family: var(--font-jp);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--fg-default);
  text-wrap: pretty;
}

.h2, h2.slimee {
  font-family: var(--font-jp);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--fg-default);
}

.h3, h3.slimee {
  font-family: var(--font-jp);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: 700;
  color: var(--fg-default);
}

.eyebrow {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--slimee-700);
}

.lead {
  font-family: var(--font-jp);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink-700);
}

.body, p.slimee {
  font-family: var(--font-jp);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-700);
}

.caption {
  font-family: var(--font-jp);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}

.stat-hero {
  font-family: var(--font-en);
  font-size: var(--text-hero);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 800;
  color: var(--slimee-500);
}

.code, code.slimee {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--ink-100);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--ink-800);
}