@charset "UTF-8";

:root {
  /* Colors: Figma local color styles */
  --color-base-background: #f5f5f5;
  --color-base-surface: #ffffff;
  --color-base-hero: #f7f0ec;
  --color-base-border: #edeef0;

  --color-text-primary: #1a1a1c;
  --color-text-secondary: #6b6b72;

  --color-accent-pink: #d4a5b0;
  --color-accent-pink-light: #f5e8ec;
  --color-accent-blue-gray: #a8b5c2;
  --color-accent-blue-gray-light: #ebf0f4;

  /* Typography: Figma local text styles */
  --font-heading: "Zen Maru Gothic", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;

  --text-h1: 28px;
  --text-h2: 20px;
  --text-h3: 16px;
  --text-body: 14px;
  --text-small: 12px;
  --text-label: 12px;
  --text-tiny: 12px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;

  --line-height-h1: 1.4;
  --line-height-h2: 1.4;
  --line-height-h3: 1.5;
  --line-height-body: 1.8214;
  --line-height-small: 1.6;
  --line-height-label: 1.4;
  --line-height-tiny: 1.4;

  /* Spacing */
  --section-padding-sp: 56px 20px;
  --section-padding-pc: 88px 80px;
  --card-padding-v: 14px;
  --card-padding-h: 16px;
  --gap-card: 14px;
  --radius-card: 8px;
  --radius-btn: 6px;
  --radius-tag: 10px;

  /* Breakpoint and content width */
  --bp-pc: 768px;
  --max-width: 1080px;
}

@media (min-width: 768px) {
  :root {
    --text-h1: 36px;
    --text-h2: 26px;
    --text-h3: 17px;
    --text-body: 16px;
    --text-small: 13px;
    --text-label: 13px;
    --text-tiny: 11px;
  }
}