@charset "UTF-8";
/* ==========================================================================
   tokens.css — デザイントークン（Figma Variables と 1:1）
   対応表の正本: ../tokens.md
   変換規則: 小文字化 + "/" と半角スペース → "-" + 先頭 "--"
   ========================================================================== */

:root {
  /* ---------- Primitive: 共有ライブラリ由来の色---------- */
  --color-text-main: #383941;
  --color-text-sub: #60637a;
  --color-text-link: #5f30f7;
  --color-text-on-label: #ffffff;
  --color-text-placeholder: #a7aab9;

  --color-surface-base: #ffffff;
  --color-surface-alt: #f4f5f7;
  --color-surface-alt-strong: #3f3f4b;
  --color-surface-label: #eb0004;
  --color-surface-icon-circle: #f4f5f7;
  --color-surface-search: #e4e5e9;

  --color-parts-primary: #5f30f7;

  --color-button-action-primary: #6c4dff;
  --color-button-action-other: #ffffff;
  --color-button-border-base: #cbcdd6;
  --color-button-state-disabled-strong: #cbcdd6;

  --color-border-default: #cbcdd6;

  --color-icon-on-light: #3f3f4b;
  --color-icon-on-dark: #ffffff;
  --color-icon-in-textlink: #5f30f7;

  /* 共有ライブラリ側の略称変数（リネームせず1:1で写す） */
  --wh: #ffffff;
  --llllgy: #fef7ff;
  --dddgy: #242325;
  --mz: #fc46c5;

  /* ---------- Primitive: LP 固有色（Variable 未登録・Figma 実測） ---------- */
  --lp-ocher: #e6ba5c;      /* PC のページ背景（SP には出ない） */
  --lp-beige: #f2ebda;      /* about-buffmee / campaign / faq のセクション背景 */
  --lp-gold: #916b17;       /* バッジ・見出し下の点線装飾のアクセント */
  --lp-shadow-ink: #3a3833; /* オフセット影（2px 2px 0 / 4px 4px 0）と開催期間テキスト */
  --lp-card-border: #30313b;/* アプリ画面カードの枠線 */
  --lp-muted: #807d74;      /* campaign-phase-two/three の Coming soon プレースホルダ文字色（Figma実測） */

  /* ---------- Semantic: 用途名（LP 固有色の役割割り当て） ---------- */
  --background-base: var(--color-surface-base);  /* ページ地（SP） */
  --background-outer: var(--lp-ocher);           /* PC で 450px カラムの外側に出る地 */
  --surface-section: var(--color-surface-base);  /* 白セクション */
  --surface-section-alt: var(--lp-beige);        /* ベージュセクション */
  --content-base: var(--color-text-main);
  --content-sub: var(--color-text-sub);
  --content-muted: var(--lp-muted);
  --content-link: var(--color-text-link);
  --border-divider: var(--color-surface-alt-strong); /* セクション区切り線 1px #3f3f4b */
  --content-accent: var(--lp-gold);
  --surface-accent: var(--lp-gold);
  --extend-shadow-ink: var(--lp-shadow-ink);

  /* ---------- スペーシング（8px ベース） ---------- */
  --spacing-none: 0;
  --spacing-xs: 4px;
  --spacing-s: 8px;
  --spacing-m: 12px;
  --spacing-l: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 40px;
  --spacing-4xl: 56px;

  /* ---------- サイズ ---------- */
  --size-3xs: 20px;
  --size-2xs: 24px;
  --size-xs: 32px;
  --size-s: 40px;
  --size-m: 44px;
  --size-xl: 56px;
  --size-3xl: 72px;
  --height-control-xs: 32px;
  --height-control-3xl: 72px;

  /* ---------- 角丸 ---------- */
  --radius-none: 0;
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-full: 999px;

  /* ---------- 枠線 ---------- */
  --border-base: 1px;

  /* ---------- 影 ---------- */
  --shadow-low: 0 0 12px rgba(56, 57, 65, 0.16);

  /* ---------- タイポ ---------- */
  --font-ja: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---------- レイアウト（Figma フレーム実測） ---------- */
  --sp-width: 412px;      /* SP 基準フレーム幅 */
  --content-max: 450px;   /* PC の MainContent 幅。PC でもコンテンツは 1 カラム */
  --gutter: 24px;         /* セクション内の左右ガター（Figma: spacing_xl）*/
  --gutter-header: 16px;  /* header だけ 16px（Figma: spacing_l）*/
  --bp-pc: 768px;         /* レイアウト切替 */
  --bp-decor: 1200px;     /* PC 専用装飾（QR・ブランドバッジ）の表示閾値 */

  /* ---------- オフセット影（Figma 実測・ぼかしなし） ---------- */
  --shadow-offset-s: 2px 2px 0 var(--lp-shadow-ink);
  --shadow-offset-m: 4px 4px 0 var(--lp-shadow-ink);
}