/* ============================================================
   LP Design System — Colors & Type Foundations
   A reusable Japanese landing-page (LP) template system.
   Fonts: Noto Sans JP (JP + headings/body), Inter (latin/labels/numbers).
   Load fonts via Google Fonts (see fonts/fonts.css) before this file.
   ============================================================ */

:root {
  /* ---------------------------------------------------------
     PRIMITIVE COLOR SCALES  (from the Figma "Color shades" plugin)
     --------------------------------------------------------- */

  /* Blue — the brand hue. 40 is the core brand blue. */
  --blue-90: #E8F3FE;  /* lightest tint — borders, faint fills */
  --blue-80: #D0E6FC;  /* light blue — image placeholders, helper parts */
  --blue-70: #B9DAFB;
  --blue-60: #A1CEF9;
  --blue-50: #73B5F6;
  --blue-40: #449DF3;  /* ★ brand blue */
  --blue-30: #1584F0;
  --blue-20: #116AC0;
  --blue-10: #0D4F90;
  --blue-5:  #083560;

  /* Gray — neutrals (warm-neutral, true gray ramp) */
  --gray-100: #FFFFFF;
  --gray-90:  #E6E6E6;
  --gray-80:  #CCCCCC;
  --gray-70:  #B3B3B3;
  --gray-60:  #999999;
  --gray-50:  #808080;
  --gray-40:  #666666;  /* ★ muted text */
  --gray-30:  #4D4D4D;
  --gray-20:  #333333;  /* ★ body / heading text */
  --gray-10:  #1A1A1A;
  --gray-0:   #000000;

  /* Red / Coral — accent + emphasis */
  --red-80: #FFDBE1;
  --red-70: #FFBFC3;
  --red-60: #FF999F;
  --red-50: #FF737C;  /* ★ accent coral (CTA / price / emphasis) */
  --red-40: #FF4D58;
  --red-30: #FB1D35;
  --red-20: #C20B2A;
  --red-10: #99001D;
  --red-5:  #66000E;

  /* Green — success + LINE channel */
  --green-80: #D6F1D7;
  --green-70: #C2E9C4;
  --green-60: #ADE2B0;
  --green-50: #84D488;
  --green-40: #5BC561;
  --green-30: #32B739;  /* ★ success */
  --green-20: #28922E;
  --green-10: #1E6E22;
  --green-5:  #144917;
  --line-green: #06C755; /* ★ LINE brand green — used ONLY for LINE buttons */

  /* Instagram brand accents (event theme) — used for the primary CTA
     gradient + magenta emphasis. The structural brand hue stays blue. */
  --ig-purple:  #4C64D3;
  --ig-magenta: #CF2E92;  /* ★ solid accent (price, badges, emphasis) */
  --ig-magenta-tint: #F7DCEC; /* light magenta — secondary backgrounds / placeholders */
  --ig-magenta-pale: #FBEAF4; /* very pale magenta — alt section backgrounds */
  --ig-orange:  #F26939;
  --ig-yellow:  #FFDD83;
  --ig-gradient: linear-gradient(95deg, #FFDD83 0%, #F26939 38%, #CF2E92 72%, #4C64D3 100%);

  /* ---------------------------------------------------------
     SEMANTIC COLORS  (use these in components, not primitives)
     --------------------------------------------------------- */
  --color-primary:    var(--blue-40);   /* 見出し・装飾・重要ラベル  headings, accents, key labels */
  --color-secondary:  var(--ig-magenta-tint); /* 薄い背景・補助パーツ  light magenta tint of accent */
  --color-accent:     var(--ig-magenta); /* CTA・価格・強調  Instagram magenta */
  --color-accent-grad: var(--ig-gradient);/* primary CTA fill (Instagram gradient) */
  --color-background: #FFFFFF;          /* ページ全体の背景           page background */
  --color-surface:    #FFFFFF;          /* カード・FAQ・料金表の背景   cards / FAQ / pricing surfaces */
  --color-text:       var(--gray-20);   /* 見出し・本文               headings + body */
  --color-muted:      var(--gray-40);   /* 補足文・小さい文字         supplementary / small text */
  --color-border:     var(--blue-90);   /* 枠線・区切り線             borders, dividers */
  --color-success:    var(--green-30);
  --color-line:       var(--line-green);

  /* Image / main-visual placeholder fill (wireframe-style LP) */
  --color-placeholder: var(--blue-80);

  /* ---------------------------------------------------------
     TYPE — families
     --------------------------------------------------------- */
  --font-jp:    "Zen Maru Gothic", system-ui, sans-serif;  /* brand JP face: all JP copy + headings/body (rounded gothic) */
  --font-latin: "Inter", system-ui, sans-serif;            /* latin labels, numbers, eyebrow labels */

  /* Weights (Zen Maru Gothic ships 300 / 400 / 500 / 700 / 900) */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   900;

  /* ---------------------------------------------------------
     TYPE — scale (px). Headings render at line-height 1.4 in body
     contexts; the Figma stores tight 100% for single-line specimens.
     --------------------------------------------------------- */
  --fs-display:  40px;  /* Hero H1 */
  --fs-h2:       32px;  /* Section title */
  --fs-h3:       28px;  /* Sub-headline */
  --fs-h4:       20px;  /* Card title / price figure */
  --fs-body:     16px;  /* Body / FAQ question */
  --fs-body-sm:  15px;  /* Dense body, card body */
  --fs-caption:  14px;  /* Captions, links, answers */
  --fs-label:    13px;  /* Eyebrow label (uppercase) */

  --lh-tight:  1.4;   /* headings */
  --lh-body:   1.8;   /* JP body — generous for readability */
  --lh-snug:   1.6;

  --ls-label: 0.08em; /* eyebrow letter-spacing */

  /* ---------------------------------------------------------
     RADII / SPACING / ELEVATION
     --------------------------------------------------------- */
  --radius-card:   8px;   /* cards, surfaces, image blocks */
  --radius-pill:   999px; /* buttons (Figma used 26px on 52px-tall = full pill) */
  --radius-sm:     5px;   /* small chips / annotation frames */

  --space-section-y: 80px;  /* vertical padding of a section */
  --space-section-x: 64px;  /* horizontal padding (PC) */
  --space-card:      24px;  /* card inner padding */
  --gap-card:        16px;  /* gap between sibling cards */
  --gap-stack:       12px;  /* gap inside a card (title↔body) */
  --content-max:     1200px;/* LP content max width (PC) */

  /* Elevation: this is a FLAT, border-defined system.
     Cards use a 1px border in --color-border, NOT a drop shadow.
     A faint shadow is available only for floating/overlay UI. */
  --shadow-none: none;
  --shadow-float: 0 8px 24px rgba(68,157,243,0.12);
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS  (optional convenience layer)
   ============================================================ */
.lp-h1 {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  color: var(--color-text);
}
.lp-h2 {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: var(--color-text);
}
.lp-h3 {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--color-text);
}
.lp-h4 {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--color-text);
}
.lp-eyebrow {
  font-family: var(--font-latin);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  line-height: 1;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-primary);
}
.lp-body {
  font-family: var(--font-jp);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}
.lp-muted {
  font-family: var(--font-jp);
  font-weight: var(--fw-regular);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--color-muted);
}