/* ============================================================
   Kataren Design System — Colors & Type tokens
   v0.1
   Brand: カタレン (Kataren) / Pathfinder Inc.
   "片道レンタカー — 乗り捨て無料"
   ============================================================ */

/* ----- Webfont loading (Google Fonts substitutes — see README) ----- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* =====================================================
     COLORS — Core brand palette
     ===================================================== */

  /* Greens — brand / safety / mobility */
  --k-green-900: #0F3F25;      /* deep green — strong contrast bg */
  --k-green-700: #17613A;      /* primary green — logo, header, brand surfaces */
  --k-green-500: #2C8A57;      /* hover / interactive green */
  --k-green-300: #7FCBA1;      /* lighter accent */
  --k-green-100: #BFE8D1;      /* mint — bg labels, soft fills */
  --k-green-050: #ECF7F0;      /* whisper green — subtle bg */

  /* Orange — CTA */
  --k-orange-600: #D96B0F;     /* hover / press */
  --k-orange-500: #F58220;     /* primary CTA */
  --k-orange-300: #FBB97A;     /* CTA bg light */
  --k-orange-100: #FDE6D1;     /* CTA tint */

  /* Yellow — notices, campaign banners */
  --k-yellow-600: #B89400;
  --k-yellow-500: #D8B300;
  --k-yellow-100: #FBF1B8;

  /* Red — error / unavailable */
  --k-red-500: #C8392F;
  --k-red-100: #FBE1DE;

  /* Neutrals */
  --k-ink-900: #1A1A1A;
  --k-ink-800: #222222;        /* body */
  --k-ink-600: #4A4A4A;        /* secondary text */
  --k-ink-500: #666666;        /* sub text */
  --k-ink-400: #8C8C8C;        /* placeholder, captions */
  --k-ink-300: #C8C8C5;        /* dividers (warm) */
  --k-ink-200: #E4E3DE;        /* card borders */
  --k-ink-100: #F0EFEA;        /* subtle surface */
  --k-bg:      #F8F8F5;        /* off-white page bg */
  --k-surface: #FFFFFF;        /* card / form surface */

  /* =====================================================
     SEMANTIC COLOR TOKENS
     ===================================================== */
  --color-brand:           var(--k-green-700);
  --color-brand-strong:    var(--k-green-900);
  --color-brand-soft:      var(--k-green-100);
  --color-brand-whisper:   var(--k-green-050);

  --color-cta:             var(--k-orange-500);
  --color-cta-hover:       var(--k-orange-600);
  --color-cta-soft:        var(--k-orange-100);

  --color-notice:          var(--k-yellow-500);
  --color-notice-soft:     var(--k-yellow-100);

  --color-danger:          var(--k-red-500);
  --color-danger-soft:     var(--k-red-100);

  --color-bg:              var(--k-bg);
  --color-surface:         var(--k-surface);
  --color-surface-alt:     var(--k-ink-100);

  --color-fg:              var(--k-ink-800);
  --color-fg-strong:       var(--k-ink-900);
  --color-fg-muted:        var(--k-ink-500);
  --color-fg-subtle:       var(--k-ink-400);
  --color-fg-on-brand:     #FFFFFF;
  --color-fg-on-cta:       #FFFFFF;

  --color-border:          var(--k-ink-200);
  --color-border-strong:   var(--k-ink-300);
  --color-divider:         var(--k-ink-200);

  /* =====================================================
     TYPOGRAPHY — families
     ===================================================== */
  --font-jp:       "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --font-jp-alt:   "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --font-en:       "Inter", "Noto Sans", system-ui, -apple-system, sans-serif;
  --font-display:  "Zen Kaku Gothic New", "Noto Sans JP", system-ui, sans-serif; /* hero copy */
  --font-mono:     ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (px) */
  --fs-hero:    48px;  /* hero coyp lockup */
  --fs-h1:      32px;
  --fs-h2:      24px;
  --fs-h3:      20px;
  --fs-h4:      18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-caption: 12px;
  --fs-cta:     17px;

  --lh-tight:   1.15;
  --lh-snug:    1.30;
  --lh-normal:  1.55;
  --lh-relaxed: 1.75;

  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;

  /* =====================================================
     RADII, SHADOWS, SPACING, ELEVATION
     ===================================================== */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-pill: 999px;

  --shadow-xs:  0 1px 2px rgba(15, 63, 37, 0.06);
  --shadow-sm:  0 2px 6px rgba(15, 63, 37, 0.08);
  --shadow-md:  0 6px 16px rgba(15, 63, 37, 0.10);
  --shadow-lg:  0 14px 32px rgba(15, 63, 37, 0.14);
  --shadow-cta: 0 6px 14px rgba(245, 130, 32, 0.30);

  --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;

  --container-max: 1200px;
  --container-pad:  16px;

  /* =====================================================
     MOTION
     ===================================================== */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0.1, 0.3, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;
}

/* ============================================================
   Base / element semantics
   ============================================================ */
body, .k-body {
  font-family: var(--font-jp);
  color: var(--color-fg);
  background: var(--color-bg);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.k-hero {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-strong);
}

.k-h1, h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg-strong);
  margin: 0;
}

.k-h2, h2 {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--color-fg-strong);
  margin: 0;
}

.k-h3, h3 {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--color-fg-strong);
  margin: 0;
}

.k-h4, h4 {
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}

.k-p, p {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-fg);
  margin: 0;
}

.k-small, small {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--color-fg-muted);
}

.k-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--color-fg-muted);
  letter-spacing: var(--tracking-wide);
}

.k-num {
  /* Tabular numerics for pricing */
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* Price emphasis */
.k-price {
  font-family: var(--font-en);
  font-weight: 800;
  color: var(--color-cta);
  letter-spacing: var(--tracking-tight);
}