/* ===================================================================
  WanTrip Design Tokens
  役割: 変数（値）だけを定義。見た目は Base/Layout/Component 側。
=================================================================== */
:root {
  /* ====================== Color ====================== */
  --wan-bg:#ffffff;
  --wan-surface:#f5f5f5;
  --wan-surface-2:#fafafa;
  --wan-text:#333333;
  --wan-text-muted:#6b7280;

  --wan-accent:#ff922b;
  --wan-accent-strong:#ff7a00;
  --wan-accent-red:#e63946;

  --wan-link:#3bc9db;
  --wan-link-hover:#2292a4;

  --wan-star:#ffd23f;
  --wan-border-color:#e7e7e7;   /* ← 色だけ */
  --wan-line:#e5e7eb;

  /* 枠線/区切り（値だけ） */
  --wan-border-thin: 1px;
  --wan-border: 1px solid var(--wan-border-color);
  --wan-divider: 1px solid var(--wan-line);

  /* ====================== Semantic ====================== */
  --wan-success:#10b981;
  --wan-warning:#f59e0b;
  --wan-danger:var(--wan-accent-red);
  --wan-info:#0ea5e9;

  /* Emphasis / Focus */
  --wan-tab-active:var(--wan-accent);
  --wan-focus:0 0 0 3px rgba(59,201,219,.35);
  --wan-selection-bg:rgba(255,146,43,.2);
  --wan-selection-fg:var(--wan-text);

  /* ====================== Typography ====================== */
  --wan-font-sans:"Noto Sans JP",system-ui,-apple-system,Segoe UI,Arial,
    "Hiragino Kaku Gothic ProN","Yu Gothic UI","ヒラギノ角ゴ ProN W3","Yu Gothic",Meiryo,sans-serif;
  --wan-font-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --wan-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;

  --wan-fsize-xs:.75rem;   /* 12px */
  --wan-fsize-sm:.875rem;  /* 14px */
  --wan-fsize-md:1rem;     /* 16px */
  --wan-fsize-lg:1.125rem; /* 18px */
  --wan-fsize-xl:1.25rem;  /* 20px */
  --wan-fsize-2xl:1.5rem;  /* 24px */
  --wan-fsize-3xl:1.875rem;/* 30px */
  --wan-fsize-4xl:2.25rem; /* 36px */

  --wan-leading-tight:1.25;
  --wan-leading-normal:1.6;
  --wan-leading-loose:1.8;

  --wan-weight-regular:400;
  --wan-weight-medium:500;
  --wan-weight-bold:700;

  /* ====================== Spacing / Gap ====================== */
  --wan-space-0:0;
  --wan-space-1:.25rem;
  --wan-space-2:.5rem;
  --wan-space-3:.75rem;
  --wan-space-4:1rem;
  --wan-space-5:1.25rem;
  --wan-space-6:1.5rem;
  --wan-space-8:2rem;
  --wan-space-10:2.5rem;
  --wan-space-12:3rem;
  --wan-space-16:4rem;
  --wan-space-20:5rem;

  --wan-gap-sm:var(--wan-space-3);
  --wan-gap-md:var(--wan-space-4);
  --wan-gap-lg:var(--wan-space-6);

  /* ====================== Radius / Shadow ====================== */
  --wan-radius-sm:6px;
  --wan-radius-md:10px;
  --wan-radius-lg:16px;
  --wan-radius-xl:24px;
  --wan-radius-pill:9999px;

  --wan-shadow-1:0 1px 2px rgba(0,0,0,.06);
  --wan-shadow-2:0 2px 6px rgba(0,0,0,.08);
  --wan-shadow-3:0 6px 16px rgba(0,0,0,.10);
  --wan-shadow-4:0 12px 24px rgba(0,0,0,.12);
  --wan-shadow-focus:var(--wan-focus);

  /* ====================== Breakpoints / Container ====================== */
  --wan-bp-sm:480px;
  --wan-bp-md:768px;
  --wan-bp-lg:1024px;
  --wan-bp-xl:1280px;
  --wan-bp-2xl:1536px;

  --wan-container-sm:640px;
  --wan-container-md:768px;
  --wan-container-lg:1024px;
  --wan-container-xl:1056px;  /* ★サイト基準 */
  --wan-container-2xl:1320px;

  /* ====================== Z-Index ====================== */
  --wan-z-base:1;
  --wan-z-header:100;
  --wan-z-nav:200;
  --wan-z-drawer:400;
  --wan-z-modal:600;
  --wan-z-toast:800;
  --wan-z-tooltip:900;

  /* ====================== Motion / Opacity ====================== */
  --wan-ease-out:cubic-bezier(.16,1,.3,1);
  --wan-ease-in:cubic-bezier(.32,0,.67,0);
  --wan-ease-in-out:cubic-bezier(.4,0,.2,1);

  --wan-duration-100:120ms;
  --wan-duration-200:200ms;
  --wan-duration-300:300ms;

  --wan-opacity-0:0;
  --wan-opacity-20:.2;
  --wan-opacity-40:.4;
  --wan-opacity-60:.6;
  --wan-opacity-80:.8;
  --wan-opacity-100:1;

  /* ====================== Misc ====================== */
  --wan-container-padding: var(--wan-space-4);
  --wan-backdrop: rgba(0,0,0,.45);
}