/* =========================================================================
   めぐる君 — Fonts (Google Fonts, editable later)
   Zen Maru Gothic     : rounded, friendly display + prices (町の修理屋さんの温かさ)
   Zen Kaku Gothic New : clean, highly readable Japanese body
   M PLUS Rounded 1c   : punchy rounded numerals for prices / 最短◯分
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=M+PLUS+Rounded+1c:wght@500;700;800&display=swap');

/* =========================================================================
   めぐる君 — Color tokens
   Warm, friendly, trustworthy. Green = 安心・めぐる(循環)・エコ.
   Amber = 元気・お得・スピード (CTA / prices). Sky = テック・情報.
   Warm neutrals for the cozy "町の修理屋さん" feel (never sterile gray).
   ========================================================================= */
:root {
  /* ---- Brand: めぐる Green (primary) ---- */
  --green-50:  #E9F6EE;
  --green-100: #D2EEDD;
  --green-200: #A6DCBB;
  --green-300: #6FC694;
  --green-400: #43B375;
  --green-500: #2FA86A;   /* brand primary */
  --green-600: #22905A;
  --green-700: #1B7449;
  --green-800: #155A39;
  --green-900: #103F29;

  /* ---- Accent: Amber (お得・元気・CTA・価格) ---- */
  --amber-50:  #FFF4E2;
  --amber-100: #FFE7C2;
  --amber-200: #FFD189;
  --amber-300: #FFB74D;
  --amber-400: #FF9E2C;   /* accent primary */
  --amber-500: #F5851A;
  --amber-600: #E06C00;
  --amber-700: #B85400;

  /* ---- Sky (テック・情報リンク) ---- */
  --sky-50:  #E7F2FB;
  --sky-100: #C9E2F6;
  --sky-400: #3B9BE0;
  --sky-500: #2483CD;
  --sky-600: #1A6BAA;

  /* ---- Coral (通常価格の取り消し・注意) ---- */
  --coral-100: #FCE3DF;
  --coral-400: #EF5E4F;
  --coral-500: #E1483A;
  --coral-600: #C23A2E;

  /* ---- Warm neutrals ---- */
  --cream:     #FBF7F0;   /* page background */
  --cream-2:   #F4EEE2;   /* alt section bg */
  --paper:     #FFFFFF;   /* cards */
  --ink-900:   #2A2620;   /* headings (warm near-black) */
  --ink-700:   #4A443B;   /* strong body */
  --ink-500:   #6E675C;   /* muted body */
  --ink-300:   #A79E90;   /* placeholder / captions */
  --line:      #EAE2D5;   /* hairline border */
  --line-2:    #DCD2C1;   /* stronger border */

  /* ================= Semantic aliases ================= */
  --color-primary:        var(--green-500);
  --color-primary-hover:  var(--green-600);
  --color-primary-press:  var(--green-700);
  --color-primary-tint:   var(--green-50);
  --color-on-primary:     #FFFFFF;

  --color-accent:         var(--amber-400);
  --color-accent-hover:   var(--amber-500);
  --color-accent-press:   var(--amber-600);
  --color-accent-tint:    var(--amber-50);
  --color-on-accent:      #3A2200;

  --color-info:           var(--sky-500);
  --color-info-tint:      var(--sky-50);
  --color-sale:           var(--coral-500);   /* discount / strike emphasis */
  --color-sale-tint:      var(--coral-100);

  --surface-page:         var(--cream);
  --surface-alt:          var(--cream-2);
  --surface-card:         var(--paper);
  --surface-sunken:       var(--green-50);

  --text-heading:         var(--ink-900);
  --text-body:            var(--ink-700);
  --text-muted:           var(--ink-500);
  --text-caption:         var(--ink-300);
  --text-on-dark:         #FFFFFF;
  --text-link:            var(--green-600);
  --text-link-hover:      var(--green-700);

  --border-subtle:        var(--line);
  --border-strong:        var(--line-2);

  /* Dark footer / hero contrast surface */
  --surface-forest:       #16362A;
  --surface-forest-2:     #1E4A38;
}

/* =========================================================================
   めぐる君 — Typography tokens
   日本語の読みやすさ最優先: ゆったりした行間(1.8前後)と字間。
   ========================================================================= */
:root {
  --font-display: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif;
  --font-body:    'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --font-round:   'M PLUS Rounded 1c', 'Zen Maru Gothic', sans-serif; /* prices, 最短◯分 */

  /* Weights */
  --fw-normal: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-bold:   700; /* @kind other */
  --fw-black:  900; /* @kind other */

  /* Type scale (px) — generous for mass-market readability */
  --fs-caption:  13px;
  --fs-small:    14px;
  --fs-body:     16px;
  --fs-body-lg:  18px;
  --fs-lead:     20px;
  --fs-h4:       22px;
  --fs-h3:       28px;
  --fs-h2:       36px;
  --fs-h1:       46px;
  --fs-display:  60px;

  /* Line-heights — 日本語本文はゆったり */
  --lh-tight:   1.3; /* @kind other */
  --lh-heading: 1.4; /* @kind other */
  --lh-body:    1.85; /* @kind other */
  --lh-relaxed: 2.0; /* @kind other */

  /* Letter-spacing */
  --ls-body:   0.02em;   /* @kind other 日本語本文はわずかに開ける */
  --ls-heading: 0.01em;  /* @kind other */
  --ls-label:  0.22em;   /* @kind other spaced Latin eyebrow */
}

/* Base document defaults */
:root {
  color-scheme: light;
}

/* =========================================================================
   めぐる君 — Spacing tokens (4px base grid)
   ========================================================================= */
:root {
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Layout */
  --container:      1120px;
  --container-wide: 1280px;
  --gutter:         24px;
  --section-y:      88px;   /* vertical rhythm between page sections */
}

/* =========================================================================
   めぐる君 — Effects (radius, shadow, motion)
   丸くやわらかく。影は軽く暖色寄り。バウンス少なめのやさしいモーション。
   ========================================================================= */
:root {
  /* Radius — friendly & rounded */
  --radius-xs:   8px;
  --radius-sm:   12px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-xl:   28px;
  --radius-2xl:  36px;
  --radius-pill: 999px;

  /* Shadows — soft, warm-tinted (not cold gray) */
  --shadow-xs:  0 1px 2px rgba(60, 45, 20, 0.06);
  --shadow-sm:  0 2px 6px rgba(60, 45, 20, 0.08);
  --shadow-md:  0 6px 18px rgba(60, 45, 20, 0.10);
  --shadow-lg:  0 14px 34px rgba(60, 45, 20, 0.12);
  --shadow-pop: 0 10px 24px rgba(47, 168, 106, 0.28);   /* green CTA glow */
  --shadow-amber: 0 10px 24px rgba(255, 158, 44, 0.32); /* amber CTA glow */

  /* Focus ring */
  --ring: 0 0 0 3px rgba(47, 168, 106, 0.35);

  /* Motion — gentle */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-soft:  cubic-bezier(0.34, 1.4, 0.64, 1);  /* @kind other subtle pop for press */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
}

/* =========================================================================
   めぐる君 Design System — global entry point.
   Consumers link THIS file. Keep it to @import lines only.
   ========================================================================= */