/* ==========================================================================
   Poker Lab Inc. - Design Tokens (V5.5)
   White-base corporate / Deep purple monotone (no bronze)
   Based on Poker Lab LP.html (2026-05-01 V5.5 purple-only rewrite)
   ========================================================================== */

:root {
  /* ---------- Color (V5.5 — purple only) ---------- */
  --pl-brand: #3a2d7c;         /* main deep purple */
  --pl-brand-deep: #2b2160;    /* hover / pressed */
  --pl-brand-soft: #6b5fb0;    /* light purple accent */
  --pl-brand-mute: #8a82c2;    /* muted purple for tags / sub-accent */
  --pl-brand-pale: #efecf8;    /* pale purple icon bg */
  --pl-brand-tint: #f6f4fb;    /* footer social bg */
  --pl-brand-wash: #e4dff5;    /* highlighter wash (mark) */

  /* Accent aliases (kept for back-compat — all purple now) */
  --pl-accent: var(--pl-brand-soft);
  --pl-accent-soft: var(--pl-brand-mute);
  --pl-accent-warm: var(--pl-brand-soft);

  --pl-ink: #1f1d2c;           /* main text */
  --pl-ink-2: #1f1d2c;         /* sub text — match main for stronger contrast */
  --pl-ink-3: #2a2840;         /* meta text — slightly lighter but still solid */

  --pl-line: #e6e4ee;
  --pl-bg: #ffffff;
  --pl-bg-alt: #f4f3f8;        /* solution section (slight tint to distinguish) */
  --pl-bg-cta: #ece8f6;        /* AI CTA section */

  /* ---------- Spacing - 4pt baseline ---------- */
  --pl-space-1: 4px;
  --pl-space-2: 8px;
  --pl-space-3: 12px;
  --pl-space-4: 16px;
  --pl-space-5: 20px;
  --pl-space-6: 24px;
  --pl-space-8: 32px;
  --pl-space-10: 40px;
  --pl-space-12: 48px;
  --pl-space-16: 64px;
  --pl-space-20: 80px;
  --pl-space-24: 96px;

  /* ---------- Radius ---------- */
  --pl-radius-xs: 2px;
  --pl-radius-sm: 4px;
  --pl-radius-md: 6px;
  --pl-radius-lg: 8px;
  --pl-radius-xl: 12px;
  --pl-radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --pl-shadow-card: 0 24px 50px -24px rgba(58, 45, 124, 0.25);
  --pl-shadow-cta: 0 20px 50px -24px rgba(58, 45, 124, 0.25);
  --pl-shadow-btn: 0 6px 20px -6px rgba(58, 45, 124, 0.4);
  --pl-shadow-btn-hover: 0 12px 28px -8px rgba(58, 45, 124, 0.5);

  /* ---------- Transition ---------- */
  --pl-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --pl-dur-fast: 160ms;
  --pl-dur-base: 240ms;
  --pl-dur-slow: 480ms;
  --pl-dur-scene: 800ms;

  /* ---------- Layout ---------- */
  --pl-container-max: 1120px;
  --pl-header-h: 72px;

  /* ---------- Type (V5) ---------- */
  --pl-font-en: 'Inter', 'Noto Sans JP', sans-serif;
  --pl-font-jp: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --pl-font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;

  /* Type scale */
  --pl-text-xs: 11px;
  --pl-text-sm: 12px;
  --pl-text-base: 13px;
  --pl-text-md: 14px;
  --pl-text-lg: 18px;
  --pl-text-xl: 22px;
  --pl-text-2xl: 26px;
  --pl-text-3xl: 32px;
  --pl-text-4xl: 44px;
  --pl-text-5xl: 56px;

  /* Tracking */
  --pl-track-tight: -0.01em;
  --pl-track-normal: 0;
  --pl-track-wide: 0.02em;
  --pl-track-wider: 0.04em;
  --pl-track-widest: 0.08em;
  --pl-track-extra: 0.18em;
}