/* ============================================================
   遊戯王Genesys 【非】公式サーバー — Design Tokens
   Source: https://ygogenesys-ja.com/ (root :root vars lifted 1:1)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Noto+Sans+JP:wght@400;500;700;800&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* ---------- Backgrounds ---------- */
  --bg:            #0a0f24;            /* deep navy — page ground */
  --bg-soft:       #101736;            /* slightly lifted */
  --bg-input:      #0c1330;            /* input / dark select */
  --bg-tile:       #0c1227;            /* card image plate */
  --panel:         rgba(255,255,255,.04);

  /* ---------- Borders ---------- */
  --border:        rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.18);
  --border-dashed: rgba(255,255,255,.12);

  /* ---------- Foreground ---------- */
  --text:          #eef2ff;            /* body */
  --muted:         #98a8d6;            /* labels, help */
  --muted-2:       #6f7fb0;            /* footnote */

  /* ---------- Accents ---------- */
  --accent:        #7c9cff;            /* primary blue */
  --accent-2:      #5eead4;            /* teal secondary */
  --accent-3:      #9c7cff;            /* violet — gradient pair */
  --warn:          #fbbf24;
  --warn-2:        #f97316;
  --danger:        #ff6b81;
  --danger-2:      #dc2626;
  --ok:            #34d399;
  --ok-2:          #22c55e;
  --pink:          #f472b6;
  --violet:        #a855f7;

  /* ---------- Signature gradients ---------- */
  --grad-primary:  linear-gradient(135deg,#7c9cff,#9c7cff);
  --grad-teal:     linear-gradient(135deg,#5eead4,#22c55e);
  --grad-warn:     linear-gradient(135deg,#fbbf24,#f97316);
  --grad-danger:   linear-gradient(135deg,#ff6b81,#dc2626);
  --grad-page:     radial-gradient(1100px 600px at 80% -10%, rgba(124,156,255,.18), transparent 50%),
                   radial-gradient(900px 500px at -10% 0%, rgba(94,234,212,.10), transparent 55%),
                   var(--bg);
  --grad-panel:    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  --grad-panel-2:  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));

  /* ---------- Card-type tints (from card_manager badges) ---------- */
  --tint-monster:  rgba(124,156,255,.16);
  --tint-monster-fg:#c4d1ff;
  --tint-spell:    rgba(94,234,212,.16);
  --tint-spell-fg: #aff3e7;
  --tint-trap:     rgba(244,114,182,.18);
  --tint-trap-fg:  #ffc1e2;
  --tint-ur:       rgba(251,191,36,.18);
  --tint-ur-fg:    #ffd86a;
  --tint-sr:       rgba(236,72,153,.18);
  --tint-sr-fg:    #ff8fcb;
  --tint-r:        rgba(59,130,246,.18);
  --tint-r-fg:     #8ec3ff;
  --tint-n:        rgba(148,163,184,.20);
  --tint-n-fg:     #d2dae6;
  --tint-extra:    rgba(168,85,247,.18);
  --tint-extra-fg: #d8b4fe;
  --tint-point:    rgba(94,234,212,.14);
  --tint-point-fg: #8df3e7;

  /* ---------- Radii ---------- */
  --radius:        16px;
  --radius-lg:     18px;
  --radius-md:     14px;
  --radius-sm:     12px;
  --radius-xs:     10px;
  --radius-pill:   999px;

  /* ---------- Shadow / elevation ---------- */
  --shadow:        0 18px 40px rgba(0,0,0,.32);
  --shadow-focus:  0 0 0 4px rgba(124,156,255,.18);
  --shadow-thumb:  0 2px 8px rgba(0,0,0,.35);

  /* ---------- Spacing scale (site uses 6/8/10/12/14/16/18/22 ranges) ---------- */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 10px;
  --sp-5: 12px;
  --sp-6: 14px;
  --sp-7: 16px;
  --sp-8: 18px;
  --sp-9: 22px;
  --sp-10:28px;

  /* ---------- Motion ---------- */
  --ease-out:      cubic-bezier(.2,.7,.2,1);
  --dur-fast:      .14s;
  --dur-med:       .18s;
  --dur-slow:      .3s;

  /* ---------- Type stack ---------- */
  --font-sans:     "Inter","Hiragino Sans","Noto Sans JP",system-ui,-apple-system,sans-serif;
  --font-mono:     "JetBrains Mono","SFMono-Regular",Consolas,ui-monospace,monospace;
}

/* ============================================================
   Base type — matches source (clamp-based, letter-spacing:-.03em h1)
   ============================================================ */

html { color-scheme: dark; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--grad-page);
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

/* Semantic type — sizes lifted from hero-main/panel-head/stat/helper */
.t-h1  { font-size: clamp(22px, 3.2vw, 36px); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; margin: 0; }
.t-h2  { font-size: 16px; font-weight: 800; letter-spacing: -.01em; margin: 0; }        /* panel-head */
.t-h3  { font-size: 13px; font-weight: 800; margin: 0; }                                /* deck-head strong */
.t-stat-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.t-stat-v { font-size: 24px; font-weight: 800; }
.t-stat-s { font-size: 12px; color: var(--muted-2); }
.t-body   { font-size: 14px; line-height: 1.7; color: var(--muted); }
.t-label  { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.t-section{ font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.t-helper { font-size: 11px; line-height: 1.6; color: var(--muted); }
.t-pill   { font-size: 11px; font-weight: 700; color: var(--muted); }
.t-badge  { font-size: 10px; font-weight: 800; letter-spacing: .04em; }
.t-mono   { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted-2); }
.t-tile-name { font-size: 13px; font-weight: 800; line-height: 1.32; }