/* ============================================================
   Kaguraku Design System — Tokens
   colors_and_type.css
   Import once at the top of any HTML document:
     <link rel="stylesheet" href="../colors_and_type.css">
   ============================================================ */

/* ---------- Fonts ---------- */
/* Google Fonts substitution for the LP's intended type system.
   - Noto Serif JP  → display / headings (mincho)
   - Noto Sans JP   → body & UI         (gothic)
   - Cormorant Garamond → Latin eyebrows / English display
   Update fonts/ if you receive the official faces. */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600&display=swap");

:root {
  /* ============= Palette ============= */
  --kg-ink:       #1A0A1F;   /* Primary text & wordmark — deep aubergine-black */
  --kg-ink-soft:  #332631;   /* Secondary text */
  --kg-stone:    #8C7E72;   /* Meta, captions, dividers in copy */
  --kg-cream:    #F6F1E8;   /* Page substrate */
  --kg-paper:    #FCFAF5;   /* Lifted card surface */
  --kg-linen:    #E8DFD0;   /* Soft borders, badges, rules */
  --kg-linen-deep: #D9CDB8; /* Pressed/hovered linen */
  --kg-tan:      #B8967A;   /* Single warm accent (wood/leather) */
  --kg-tan-soft: #D9C2AC;   /* Tan tint backplates */
  --kg-white:    #FFFFFF;   /* True white — used only for inversion situations */

  /* LINE brand (used because the primary CTA points at LINE) */
  --kg-line:        #06C755;
  --kg-line-hover:  #05B14C;
  --kg-line-press:  #04A046;

  /* Semantic — provided as a convention, not from the LP */
  --kg-success: #7A8C5D;
  --kg-warning: #C49A3E;
  --kg-danger:  #C46A4C;
  --kg-info:    #6E8AA3;

  /* Selection & focus */
  --kg-selection-bg: #1A0A1F;
  --kg-selection-fg: #F6F1E8;
  --kg-focus-ring:  #1A0A1F;

  /* ============= Semantic foreground / background ============= */
  --fg-1: var(--kg-ink);
  --fg-2: var(--kg-ink-soft);
  --fg-3: var(--kg-stone);
  --fg-on-ink:   var(--kg-cream);
  --fg-on-tan:   var(--kg-ink);

  --bg-page:    var(--kg-cream);
  --bg-section: var(--kg-cream);
  --bg-card:    var(--kg-paper);
  --bg-inset:   #EFE8DA;        /* Mildly inset / quoted */
  --bg-ink:     var(--kg-ink);  /* Inverted blocks */

  --border-quiet: var(--kg-linen);
  --border-soft:  rgba(26, 10, 31, 0.08);
  --border-ink:   var(--kg-ink);

  /* ============= Type ============= */
  --font-jp-serif: "Noto Serif JP", "游明朝", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --font-jp-sans:  "Noto Sans JP",  "游ゴシック", "Yu Gothic", "YuGothic", "Hiragino Sans", "Meiryo", sans-serif;
  --font-en-serif: "Cormorant Garamond", "Noto Serif JP", serif;

  /* Scale — base 16 px */
  --fs-display-1: 56px; --lh-display-1: 1.25;
  --fs-display-2: 40px; --lh-display-2: 1.30;
  --fs-h1:        32px; --lh-h1:        1.35;
  --fs-h2:        24px; --lh-h2:        1.40;
  --fs-h3:        20px; --lh-h3:        1.50;
  --fs-body:      16px; --lh-body:      1.80;  /* open leading for JP */
  --fs-small:     14px; --lh-small:     1.70;
  --fs-caption:   12px; --lh-caption:   1.60;
  --fs-eyebrow:   11px; --lh-eyebrow:   1.40;

  /* Letter spacing — JP wants tight; EN eyebrow wants wide */
  --tracking-jp-tight: -0.01em;
  --tracking-jp-body:   0.02em;
  --tracking-en-eyebrow: 0.25em;
  --tracking-en-meta:    0.08em;

  /* ============= Spacing scale (4-px base) ============= */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Layout */
  --layout-max:    1120px;
  --reading-max:    720px;
  --gutter-mobile:  24px;
  --gutter-tablet:  64px;
  --gutter-desktop: 96px;
  --header-h:        72px;

  /* ============= Radii ============= */
  --r-0: 0;
  --r-sm: 4px;     /* buttons */
  --r-md: 8px;
  --r-lg: 12px;    /* cards */
  --r-xl: 20px;
  --r-pill: 999px; /* LINE pill, badges */

  /* ============= Elevation (used sparingly) ============= */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(26, 10, 31, 0.04);
  --shadow-2: 0 8px 20px -12px rgba(26, 10, 31, 0.18);
  --shadow-3: 0 12px 32px -16px rgba(26, 10, 31, 0.18);
  --shadow-pill: 0 8px 18px -10px rgba(6, 199, 85, 0.45);

  /* ============= Motion ============= */
  --ease-brand: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 420ms;
}

/* ---------- Base reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  font-family: var(--font-jp-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;            /* proportional kana metrics */
  letter-spacing: var(--tracking-jp-body);
  text-wrap: pretty;
}

::selection { background: var(--kg-selection-bg); color: var(--kg-selection-fg); }

/* ---------- Semantic type classes ----------
   Apply directly on elements when you don't want to rely on h1/h2/etc.   */

.kg-display-1, .kg-h-hero {
  font-family: var(--font-jp-serif);
  font-weight: 600;
  font-size: var(--fs-display-1);
  line-height: var(--lh-display-1);
  letter-spacing: var(--tracking-jp-tight);
  color: var(--fg-1);
}
.kg-display-2 {
  font-family: var(--font-jp-serif);
  font-weight: 500;
  font-size: var(--fs-display-2);
  line-height: var(--lh-display-2);
  letter-spacing: var(--tracking-jp-tight);
  color: var(--fg-1);
}
.kg-h1, h1 {
  font-family: var(--font-jp-serif);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tracking-jp-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-5);
}
.kg-h2, h2 {
  font-family: var(--font-jp-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}
.kg-h3, h3 {
  font-family: var(--font-jp-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}
.kg-body, p {
  font-family: var(--font-jp-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0 0 var(--sp-4);
}
.kg-small, small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-3);
}
.kg-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--fg-3);
}
.kg-meta {
  font-family: var(--font-jp-sans);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-en-meta);
  text-transform: uppercase;
  color: var(--fg-3);
}
.kg-eyebrow {
  display: inline-block;
  font-family: var(--font-en-serif);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tracking-en-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}
.kg-step-num {
  font-family: var(--font-jp-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  color: var(--fg-1);
  letter-spacing: 0.04em;
}

/* ---------- Layout helpers ---------- */
.kg-container {
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}
@media (min-width: 768px)  { .kg-container { padding-inline: var(--gutter-tablet); } }
@media (min-width: 1200px) { .kg-container { padding-inline: var(--gutter-desktop); } }

.kg-section { padding-block: var(--sp-10); }
.kg-section--tight { padding-block: var(--sp-8); }
.kg-section--paper { background: var(--bg-card); }
.kg-section--ink   { background: var(--bg-ink); color: var(--fg-on-ink); }

.kg-reading { max-width: var(--reading-max); margin-inline: auto; }

/* ---------- Divider ---------- */
.kg-rule { border: 0; border-top: 1px solid var(--border-quiet); margin-block: var(--sp-7); }
.kg-rule--ink { border-top-color: var(--kg-ink); width: 32px; }

/* ---------- Buttons ---------- */
.kg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-jp-sans);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1;
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-brand),
              color      var(--dur-fast) var(--ease-brand),
              border-color var(--dur-fast) var(--ease-brand),
              transform  var(--dur-fast) var(--ease-brand),
              box-shadow var(--dur-fast) var(--ease-brand);
  text-decoration: none;
}
.kg-btn:active { transform: scale(0.98); opacity: 0.92; }

.kg-btn--primary {
  background: var(--kg-ink);
  color: var(--fg-on-ink);
}
.kg-btn--primary:hover { background: #2a1830; transform: translateY(-1px); }

.kg-btn--ghost {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--kg-ink);
}
.kg-btn--ghost:hover { background: var(--kg-ink); color: var(--fg-on-ink); }

.kg-btn--tan {
  background: var(--kg-tan);
  color: var(--kg-ink);
}
.kg-btn--tan:hover { background: #a98369; }

/* LINE pill — the brand's hero CTA, always pill-shaped, always LINE green. */
.kg-btn--line {
  background: var(--kg-line);
  color: var(--kg-white);
  border-radius: var(--r-pill);
  padding: 18px 36px;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-pill);
}
.kg-btn--line:hover { background: var(--kg-line-hover); transform: translateY(-1px); }
.kg-btn--line:active { background: var(--kg-line-press); }

/* ---------- Tags / Badges ---------- */
.kg-badge {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  background: var(--kg-linen);
  color: var(--fg-1);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-en-meta);
}
.kg-badge--ink { background: var(--kg-ink); color: var(--fg-on-ink); }
.kg-badge--tan { background: var(--kg-tan-soft); }

/* ---------- Cards ---------- */
.kg-card {
  background: var(--bg-card);
  border: 1px solid var(--border-quiet);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.kg-card--quiet { background: transparent; border-color: transparent; }
.kg-card--photo { padding: 0; overflow: hidden; }
.kg-card--photo img { display: block; width: 100%; height: auto; }

/* ---------- Form inputs ---------- */
.kg-input, .kg-textarea {
  width: 100%;
  font-family: var(--font-jp-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg-1);
  background: var(--bg-card);
  border: 1px solid var(--border-quiet);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  transition: border-color var(--dur-fast) var(--ease-brand),
              box-shadow   var(--dur-fast) var(--ease-brand);
}
.kg-input:focus, .kg-textarea:focus {
  outline: none;
  border-color: var(--kg-ink);
  box-shadow: 0 0 0 3px rgba(26, 10, 31, 0.08);
}
.kg-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 500;
  margin-bottom: var(--sp-2);
  color: var(--fg-2);
}

/* ---------- Eyebrow + heading combo ---------- */
.kg-section-head { text-align: center; margin-bottom: var(--sp-8); }
.kg-section-head .kg-eyebrow { margin-bottom: var(--sp-2); }
.kg-section-head .kg-h2 { margin-bottom: var(--sp-3); }
.kg-section-head .kg-body { color: var(--fg-2); }

/* ---------- Utility ---------- */
.kg-text-center { text-align: center; }
.kg-text-balance { text-wrap: balance; }
.kg-text-pretty  { text-wrap: pretty; }
.kg-stack > * + * { margin-top: var(--sp-4); }
.kg-stack-lg > * + * { margin-top: var(--sp-6); }