/* ============================================================
   tokens.css — Kinetic Bento Design Tokens
   ダークテーマ既定 + ライトモード切替
   ============================================================ */

/* ============================================================
   DARK THEME（既定）
   ============================================================ */
:root,
[data-theme="dark"] {
  /* --- 背景色 --- */
  --bg-primary:   #050816;
  --bg-elevated:  #0E1428;
  --bg-glass:     rgba(255, 255, 255, 0.04);
  --bg-glass-hover: rgba(255, 255, 255, 0.08);
  --bg-card:      rgba(14, 20, 40, 0.7);
  --bg-inverse:   #E5E9F2;

  /* --- テキスト色 --- */
  --text-primary:   #E5E9F2;
  --text-secondary: #B4BAC8;
  --text-muted:     #8B92A8;
  --text-inverse:   #050816;
  --text-heading:   #FFFFFF;

  /* --- アクセントカラー --- */
  --accent-blue:    #3B82F6;
  --accent-blue-light: #60A5FA;
  --accent-cyan:    #06B6D4;
  --accent-magenta: #EC4899;
  --accent-violet:  #8B5CF6;

  /* --- ボーダー --- */
  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-medium:  rgba(255, 255, 255, 0.14);
  --border-accent:  rgba(59, 130, 246, 0.4);

  /* --- グロー --- */
  --glow-blue:    rgba(59, 130, 246, 0.25);
  --glow-cyan:    rgba(6, 182, 212, 0.2);
  --glow-magenta: rgba(236, 72, 153, 0.2);

  /* --- シャドウ --- */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 8px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow-blue: 0 0 32px rgba(59, 130, 246, 0.3);
  --shadow-glow-cyan: 0 0 24px rgba(6, 182, 212, 0.25);

  /* --- デモバナー --- */
  --demo-banner-bg: #1a1200;
  --demo-banner-text: #F59E0B;
  --demo-banner-border: rgba(245, 158, 11, 0.3);

  /* --- カスタムスクロールバー --- */
  --scrollbar-track: #0E1428;
  --scrollbar-thumb: #3B82F6;
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
[data-theme="light"] {
  /* --- 背景色 --- */
  --bg-primary:   #F8FAFF;
  --bg-elevated:  #FFFFFF;
  --bg-glass:     rgba(255, 255, 255, 0.8);
  --bg-glass-hover: rgba(255, 255, 255, 0.95);
  --bg-card:      rgba(255, 255, 255, 0.9);
  --bg-inverse:   #1E3A8A;

  /* --- テキスト色 --- */
  --text-primary:   #1F2937;
  --text-secondary: #4B5563;
  --text-muted:     #9CA3AF;
  --text-inverse:   #FFFFFF;
  --text-heading:   #1E3A8A;

  /* --- アクセントカラー --- */
  --accent-blue:    #2563EB;
  --accent-blue-light: #3B82F6;
  --accent-cyan:    #0891B2;
  --accent-magenta: #DB2777;
  --accent-violet:  #7C3AED;

  /* --- ボーダー --- */
  --border-subtle:  rgba(0, 0, 0, 0.08);
  --border-medium:  rgba(0, 0, 0, 0.14);
  --border-accent:  rgba(37, 99, 235, 0.4);

  /* --- グロー --- */
  --glow-blue:    rgba(37, 99, 235, 0.12);
  --glow-cyan:    rgba(8, 145, 178, 0.1);
  --glow-magenta: rgba(219, 39, 119, 0.1);

  /* --- シャドウ --- */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-elevated: 0 8px 48px rgba(0, 0, 0, 0.12);
  --shadow-glow-blue: 0 0 32px rgba(37, 99, 235, 0.15);
  --shadow-glow-cyan: 0 0 24px rgba(8, 145, 178, 0.12);

  /* --- デモバナー --- */
  --demo-banner-bg: #FFFBEB;
  --demo-banner-text: #92400E;
  --demo-banner-border: rgba(146, 64, 14, 0.2);

  /* --- カスタムスクロールバー --- */
  --scrollbar-track: #E5E7EB;
  --scrollbar-thumb: #2563EB;
}

/* ============================================================
   共通トークン（テーマ非依存）
   ============================================================ */
:root {
  /* --- フォント --- */
  --font-family-sans: "IBM Plex Sans JP", "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-family-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-family-mono: "IBM Plex Mono", monospace;

  /* --- フォントサイズ --- */
  --font-size-xs:    clamp(0.75rem,  0.7rem  + 0.25vw, 0.8125rem);
  --font-size-sm:    clamp(0.875rem, 0.82rem + 0.27vw, 0.9375rem);
  --font-size-base:  clamp(0.9375rem,0.87rem + 0.33vw, 1.0625rem);
  --font-size-md:    clamp(1rem,     0.9rem  + 0.5vw,  1.25rem);
  --font-size-lg:    clamp(1.125rem, 1rem    + 0.6vw,  1.5rem);
  --font-size-xl:    clamp(1.5rem,   1.2rem  + 1.5vw,  2.5rem);
  --font-size-2xl:   clamp(2rem,     1.5rem  + 2.5vw,  4rem);
  --font-size-3xl:   clamp(2.5rem,   1.8rem  + 3.5vw,  5.5rem);
  --font-size-hero:  clamp(3rem,     2rem    + 5vw,    8rem);
  --font-size-jumbo: clamp(4rem,     3rem    + 7vw,    12rem);

  /* --- フォントウェイト --- */
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:    700;

  /* --- 行間・字間 --- */
  --line-height-tight:  1.15;
  --line-height-snug:   1.35;
  --line-height-normal: 1.7;
  --line-height-loose:  1.9;

  --letter-spacing-tight:   -0.03em;
  --letter-spacing-normal:   0;
  --letter-spacing-wide:     0.06em;
  --letter-spacing-widest:   0.15em;
  --letter-spacing-extreme: -0.06em; /* 背景巨大文字用 */

  /* --- スペーシング（8px grid） --- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* --- レイアウト --- */
  --layout-max-width: 1280px;
  --layout-gutter-sp: var(--space-4);
  --layout-gutter-pc: var(--space-8);

  /* --- 角丸 --- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-full: 9999px;

  /* --- モーション --- */
  --duration-fast:   120ms;
  --duration-normal: 280ms;
  --duration-slow:   600ms;
  --duration-hero:   1200ms;

  --easing-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --easing-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);

  /* --- ヘッダー高さ --- */
  --header-height: 72px;
}