/* ========================================
 * take7.jp Design Tokens (v2: Sony Music 寄りリブート)
 * - 白基調 / 黒テキスト / 朱赤 1 点アクセント
 * - サンセリフ全振り
 * 詳細: design/design-tokens.md
 * ======================================== */

:root {
  /* === Color === */
  --color-bg-primary:        #FFFFFF;       /* メインBG=白 */
  --color-bg-secondary:      #F5F5F5;       /* 薄グレー */
  --color-bg-card:           #FFFFFF;
  --color-bg-dark:           #0F0F0F;       /* フッター・ヒーローオプション */
  --color-accent:            #E60000;       /* ソニー寄り朱赤 */
  --color-accent-soft:       rgba(230, 0, 0, 0.08);
  --color-text-primary:      #000000;
  --color-text-inverse:      #FFFFFF;
  --color-text-mute:         #666666;
  --color-hairline:          rgba(0, 0, 0, 0.1);
  --color-overlay-dark:      rgba(15, 15, 15, 0.55);
  --color-overlay-deep:      rgba(15, 15, 15, 0.78);

  /* === Typography (sans-serif heavy) === */
  --font-sans-jp:     "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Helvetica Neue", sans-serif;
  --font-sans-en:     "Inter", "Helvetica Neue", "Arial", sans-serif;
  --font-display:     "Inter", "Noto Sans JP", "Helvetica Neue", sans-serif;
  --font-display-num: "Inter", "Helvetica Neue", sans-serif;

  /* Type Scale (PC) */
  --text-display: 88px;
  --text-h1:      56px;
  --text-h2:      36px;
  --text-h3:      24px;
  --text-body-lg: 18px;
  --text-body:    16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --text-kpi:     88px;

  /* Font Weight */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Leading & Tracking */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.8;
  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-extra:  0.18em;

  /* === Spacing (8px base) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 140px;
  --space-10: 200px;

  /* === Layout === */
  --section-padding-y: 140px;
  --section-padding-x: 32px;
  --container-max-width: 1280px;
  --grid-gutter: 32px;

  /* === Borders & Shadows === */
  --border-width-thin: 1px;
  --border-width-bold: 2px;
  --border-color-mute: rgba(0, 0, 0, 0.08);

  --shadow-card:       none;
  --shadow-card-hover: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-deep:       0 16px 48px rgba(0, 0, 0, 0.12);

  /* === Motion === */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
  --duration-hero: 1200ms;

  /* === Z-Index === */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

/* === Tablet (768px〜) === */
@media (max-width: 1023px) {
  :root {
    --text-display: 56px;
    --text-h1:      44px;
    --text-h2:      30px;
    --text-h3:      22px;
    --text-kpi:     64px;
    --section-padding-y: 96px;
    --section-padding-x: 24px;
    --grid-gutter: 24px;
  }
}

/* === SP (〜767px) === */
@media (max-width: 767px) {
  :root {
    --text-display: 40px;
    --text-h1:      36px;
    --text-h2:      26px;
    --text-h3:      20px;
    --text-body-lg: 16px;
    --text-body:    15px;
    --text-body-sm: 13px;
    --text-caption: 11px;
    --text-kpi:     48px;
    --section-padding-y: 72px;
    --section-padding-x: 20px;
    --grid-gutter: 16px;
  }
}