/* デザイントークン: 色 / 余白 / タイポ / 影 / z-index */
:root {
  color-scheme: dark;

  /* Base */
  --c-bg: #0F1216;
  --c-bg-elev-1: #161B21;
  --c-bg-elev-2: #1E252D;
  --c-line: #2A323C;
  --c-line-strong: #3B4552;

  /* Text */
  --c-text: #ECEFF3;
  --c-text-sub: #A6B0BC;
  --c-text-mute: #6E7A88;

  /* Accent */
  --c-accent: #E5484D;
  --c-accent-hi: #FF6B6B;
  --c-accent-dim: rgba(229, 72, 77, .14);

  /* Support */
  --c-cyan: #35C4D7;
  --c-gold: #E8C15A;
  --c-ok: #4CC38A;
  --c-warn: #E8B14A;
  --c-ng: #E5484D;

  /* Role colors */
  --role-duelist: #E5484D;
  --role-initiator: #3D8BFD;
  --role-controller: #9B7BF0;
  --role-sentinel: #35C4D7;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Typography */
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --font-en: "Chakra Petch", "Bahnschrift", "Segoe UI", system-ui, sans-serif;
  --fs-1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --fs-2: clamp(0.95rem, 0.93rem + 0.1vw, 1rem);
  --fs-3: clamp(1.05rem, 1rem + 0.2vw, 1.125rem);
  --fs-4: clamp(1.15rem, 1.1rem + 0.3vw, 1.25rem);
  --fs-5: clamp(1.35rem, 1.25rem + 0.5vw, 1.5rem);
  --fs-6: clamp(1.7rem, 1.5rem + 1vw, 2rem);
  --fs-7: clamp(2rem, 1.7rem + 1.6vw, 2.5rem);

  /* Radius / shape */
  --radius: 2px;
  --radius-cut: 10px;

  /* Shadow */
  --shadow-inset: 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-card: 0 4px 16px rgba(0,0,0,.35);

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur: 160ms;

  /* z-index */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;

  --container-max: 1200px;
  --container-max-wide: 1440px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --c-bg: #F4F5F7;
  --c-bg-elev-1: #FFFFFF;
  --c-bg-elev-2: #E9EBEF;
  --c-line: #D6DAE0;
  --c-line-strong: #B9C0CA;
  --c-text: #14181D;
  --c-text-sub: #454E58;
  --c-text-mute: #6E7A88;
  --c-accent-dim: rgba(229, 72, 77, .1);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --c-bg: #F4F5F7;
    --c-bg-elev-1: #FFFFFF;
    --c-bg-elev-2: #E9EBEF;
    --c-line: #D6DAE0;
    --c-line-strong: #B9C0CA;
    --c-text: #14181D;
    --c-text-sub: #454E58;
    --c-text-mute: #6E7A88;
    --c-accent-dim: rgba(229, 72, 77, .1);
  }
}