/* ==========================================================
   Design Tokens — DESIGN-*.md § 7
   rem に依存しない px ベース。Tailwind CDN と共存可能。
   ========================================================== */

:root {
  /* ── カラー ─────────────────────────────────────── */
  --color-primary:        #5624D0;
  --color-primary-hover:  #401B9C;
  --color-primary-subtle: #F1ECFE;
  --color-brand-alt:      #A435F0;

  --color-text-base:      #1C1D1F;
  --color-text-secondary: #5C687C;
  --color-text-muted:     #6A6F73;

  --color-surface:        #FFFFFF;
  --color-surface-soft:   #F7F8FA;
  --color-surface-dark:   #1C1D1F;

  --color-border:         #D1D7DC;
  --color-divider:        #DBDEE2;
  --color-input-border:   #9B9EA3;

  --color-success:        #2E7D5B;
  --color-success-alt:    #68B631;
  --color-error:          #DA4335;
  --color-warning:        #D88425;
  --color-info:           #0070F5;
  --color-facebook:       #1877F2;

  /* ── タイポグラフィ ──────────────────────────────── */
  --font-stack-text:
    'Noto Sans JP', system-ui,
    -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* ── ボーダー / シャドウ ─────────────────────────── */
  --radius-button:  8px;
  --radius-input:   4px;
  --radius-card:    8px;
  --radius-card-lg: 16px;
  --radius-pill:    999px;

  --shadow-card:    0 2px 4px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.08);
  --shadow-dropdown:0 2px 8px rgba(0,0,0,.10), 0 4px 16px rgba(0,0,0,.10);
  --shadow-modal:   0 4px 16px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.12);

  --focus-ring: 0 0 0 3px #5624D0;
}

/* ── 日本語 light/medium オーバーライド ──────────────── */
:lang(ja) {
  --font-weight-light:  400;
  --font-weight-medium: 700;
}

/* ── ベース ──────────────────────────────────────────── */
body {
  font-family: var(--font-stack-text);
  color: var(--color-text-base);
  background: var(--color-surface);
}

/* ── 見出しユーティリティ (px ベース) ───────────────── */
.ud-heading-xs   { font-size: 12px; line-height: 1.2; font-weight: var(--font-weight-bold); }
.ud-heading-sm   { font-size: 14px; line-height: 1.2; font-weight: var(--font-weight-medium); }
.ud-heading-md   { font-size: 16px; line-height: 1.2; font-weight: var(--font-weight-medium); }
.ud-heading-lg   { font-size: clamp(17px, 2vw, 18px); line-height: 1.2; font-weight: var(--font-weight-medium); }
.ud-heading-xl   { font-size: clamp(20px, 3vw, 24px); line-height: 1.1; font-weight: var(--font-weight-medium); }
.ud-heading-xxl  { font-size: clamp(24px, 5vw, 32px); line-height: 1.1; font-weight: var(--font-weight-medium); }
.ud-heading-xxxl { font-size: clamp(32px, 6vw, 48px); line-height: 1.0; font-weight: var(--font-weight-medium); }

/* ── 本文ユーティリティ (px ベース) ─────────────────── */
.ud-text-xxs { font-size: 10px; line-height: 1.1; font-weight: var(--font-weight-regular); }
.ud-text-xs  { font-size: 12px; line-height: 1.4; font-weight: var(--font-weight-regular); }
.ud-text-sm  { font-size: 14px; line-height: 1.6; font-weight: var(--font-weight-light); }
.ud-text-md  { font-size: 16px; line-height: 1.6; font-weight: var(--font-weight-light); }
.ud-text-lg  { font-size: clamp(17px, 2vw, 18px); line-height: 1.5; font-weight: var(--font-weight-light); }