/* Play-Data — Design Tokens
 * Single source of truth. Map straight to Tailwind / CSS vars / SCSS as needed.
 * Dark theme is the default. data-theme="light" overrides at the bottom.
 */

:root,
[data-theme="dark"] {
  /* ── Surfaces ───────────────────────────────────────────── */
  --pd-bg:            #0d1117;   /* page background */
  --pd-bg-elev:       #11161d;   /* slightly raised regions, hero strip */
  --pd-panel:         #161b22;   /* card / panel fill */
  --pd-panel-2:       #1c222b;   /* nested panel, table row hover */
  --pd-panel-3:       #232a35;   /* input fill, active row */

  /* ── Borders & dividers ─────────────────────────────────── */
  --pd-border:        #22272e;   /* default 1px stroke */
  --pd-border-strong: #2d343d;   /* emphasised border, focus ring base */
  --pd-divider:       #1f242c;   /* internal hairlines inside cards */

  /* ── Text ──────────────────────────────────────────────── */
  --pd-text:          #e6edf3;   /* primary copy */
  --pd-text-strong:   #f5f7fa;   /* headings */
  --pd-text-muted:    #8b949e;   /* secondary copy, table labels */
  --pd-text-faint:    #6e7681;   /* timestamps, helper text */
  --pd-text-on-amber: #1a1208;   /* text on amber CTA */

  /* ── Accent (warm amber) ───────────────────────────────── */
  --pd-amber:         #f59e0b;   /* primary accent */
  --pd-amber-hover:   #fbbf24;
  --pd-amber-dim:     #b87514;   /* pressed / dim variant */
  --pd-amber-tint:    rgba(245, 158, 11, 0.12);  /* selected bg */
  --pd-amber-line:    rgba(245, 158, 11, 0.35);  /* selected border */

  /* ── Semantic ──────────────────────────────────────────── */
  --pd-success:       #3fb950;
  --pd-success-tint:  rgba(63, 185, 80, 0.14);
  --pd-danger:        #f85149;
  --pd-danger-tint:   rgba(248, 81, 73, 0.14);
  --pd-info:          #58a6ff;
  --pd-info-tint:     rgba(88, 166, 255, 0.14);
  --pd-warn:          #d29922;
  --pd-warn-tint:     rgba(210, 153, 34, 0.14);

  /* ── Item rarity (for DB) ──────────────────────────────── */
  --pd-rarity-common:    #8b949e;
  --pd-rarity-uncommon:  #3fb950;
  --pd-rarity-rare:      #58a6ff;
  --pd-rarity-epic:      #bc8cff;
  --pd-rarity-legendary: #f59e0b;

  /* ── Type ──────────────────────────────────────────────── */
  --pd-font-sans:  "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pd-font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pd-font-display: "Onest", system-ui, sans-serif;  /* same family, heavier weight */

  /* Type scale (mobile-first; desktop overrides further down) */
  --pd-fs-xs:    12px;
  --pd-fs-sm:    13px;
  --pd-fs-base:  15px;
  --pd-fs-md:    17px;
  --pd-fs-lg:    20px;
  --pd-fs-xl:    24px;
  --pd-fs-2xl:   30px;
  --pd-fs-3xl:   38px;
  --pd-fs-4xl:   48px;

  --pd-lh-tight:   1.15;
  --pd-lh-snug:    1.35;
  --pd-lh-normal:  1.55;
  --pd-lh-loose:   1.7;

  /* ── Spacing (8px grid, 4px half-step) ─────────────────── */
  --pd-s-1:   4px;
  --pd-s-2:   8px;
  --pd-s-3:   12px;
  --pd-s-4:   16px;
  --pd-s-5:   20px;
  --pd-s-6:   24px;
  --pd-s-8:   32px;
  --pd-s-10:  40px;
  --pd-s-12:  48px;
  --pd-s-16:  64px;
  --pd-s-20:  80px;

  /* ── Radii ─────────────────────────────────────────────── */
  --pd-r-1:   2px;
  --pd-r-2:   4px;   /* default card / button */
  --pd-r-3:   6px;
  --pd-r-pill: 999px;

  /* ── Shadows (used sparingly — flat aesthetic) ─────────── */
  --pd-shadow-pop:  0 8px 24px rgba(0,0,0,0.45);
  --pd-shadow-flat: 0 1px 0 rgba(255,255,255,0.02) inset;

  /* ── Layout ────────────────────────────────────────────── */
  --pd-container:    1200px;
  --pd-container-narrow: 760px;  /* article reading width */
  --pd-header-h:     56px;
  --pd-tabs-h:       44px;

  /* ── Motion ────────────────────────────────────────────── */
  --pd-ease:    cubic-bezier(.2,.6,.2,1);
  --pd-dur-1:   120ms;
  --pd-dur-2:   200ms;
  --pd-dur-3:   320ms;
}

/* Light theme — usable, but secondary */
[data-theme="light"] {
  --pd-bg:            #f6f7f8;
  --pd-bg-elev:       #ffffff;
  --pd-panel:         #ffffff;
  --pd-panel-2:       #f1f3f5;
  --pd-panel-3:       #e9ecef;

  --pd-border:        #d8dde2;
  --pd-border-strong: #c0c6cc;
  --pd-divider:       #e5e9ed;

  --pd-text:          #1a1f26;
  --pd-text-strong:   #0a0d12;
  --pd-text-muted:    #5a6470;
  --pd-text-faint:    #8a939d;

  --pd-amber-tint:    rgba(245, 158, 11, 0.12);
  --pd-amber-line:    rgba(245, 158, 11, 0.45);
}

/* Desktop type bump */
@media (min-width: 768px) {
  :root {
    --pd-fs-base: 16px;
    --pd-fs-md:   18px;
    --pd-fs-lg:   22px;
    --pd-fs-xl:   28px;
    --pd-fs-2xl:  36px;
    --pd-fs-3xl:  46px;
    --pd-fs-4xl:  60px;
  }
}