/* =========================================================================
   waifumaster — Design System v1
   Shared token set + utility classes for pulls.html, app.html, admin.html,
   landing.html. Always reference var(--token) instead of raw px/colors so
   theme + spacing stays consistent across every page.
   ========================================================================= */

:root {
  /* -------------------------------------------------------------------- */
  /* COLOR TOKENS — semantic (light theme defaults)                       */
  /* Component CSS should reference these, not raw hex. Dark theme below  */
  /* shadows the same names so theme toggle = swap nothing in components. */
  /* -------------------------------------------------------------------- */
  --bg:           #fff9f5;
  --bg2:          #fef3eb;
  --bg-card:      #ffffff;
  --bg-soft:      #fbf2eb;
  --text:         #4a4458;
  --muted:        #6b6478;
  --line:         #f5e1e8;
  --line-soft:    #f9eaef;
  --accent:       #e5739c;
  --accent2:      #b794f6;
  --accent-hover: #d35c89;
  --success:      #2ecc71;
  --warning:      #f5b974;
  --danger:       #e74c3c;
  --info:         #3498db;

  /* Rarity colors — kept for backwards-compat with existing components */
  --r-N:   #9a90ad;
  --r-R:   #87c5e5;
  --r-SR:  #c19be8;
  --r-SSR: #f5b974;
  --r-UR:  #e5739c;

  /* -------------------------------------------------------------------- */
  /* SPACING — 4px base, geometric progression                            */
  /* Use these for ALL padding/margin/gap. Never raw 7px / 13px etc.      */
  /* -------------------------------------------------------------------- */
  --space-1:    4px;
  --space-2:    8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* -------------------------------------------------------------------- */
  /* RADIUS                                                                */
  /* -------------------------------------------------------------------- */
  --radius-xs:    4px;
  --radius-sm:    6px;
  --radius:       8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* -------------------------------------------------------------------- */
  /* TYPE SCALE — 1.25 ratio from 12px                                    */
  /* -------------------------------------------------------------------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  36px;
  --text-4xl:  48px;

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  /* -------------------------------------------------------------------- */
  /* SHADOWS — elevation cues, 5-stop scale                               */
  /* -------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(74, 68, 88, .06);
  --shadow:    0 4px 6px -1px rgba(74, 68, 88, .08),
               0 2px 4px -2px rgba(74, 68, 88, .04);
  --shadow-md: 0 10px 15px -3px rgba(74, 68, 88, .10),
               0 4px 6px -4px rgba(74, 68, 88, .05);
  --shadow-lg: 0 20px 25px -5px rgba(74, 68, 88, .12),
               0 8px 10px -6px rgba(74, 68, 88, .06);
  --shadow-xl: 0 25px 50px -12px rgba(74, 68, 88, .20);

  /* -------------------------------------------------------------------- */
  /* MOTION — consistent timing + easing                                  */
  /* -------------------------------------------------------------------- */
  --ease:     cubic-bezier(.4, 0, .2, 1);    /* Material standard */
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in:  cubic-bezier(.4, 0, 1, 1);
  --t-fast:  120ms;
  --t-base:  180ms;
  --t-slow:  300ms;
  --t-page:  450ms;
}

/* -------------------------------------------------------------------- */
/* DARK THEME — shadow the same token names                              */
/* Triggered by html[data-theme="dark"] (set by theme-toggle.js).        */
/* -------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --bg:           #15101a;
  --bg2:          #1c1622;
  --bg-card:      #1f1828;
  --bg-soft:      #261d31;
  --text:         #e8e2f0;
  --muted:        #9b95a8;
  --line:         #2a2336;
  --line-soft:    #221b2d;
  --accent:       #ff8ad6;
  --accent2:      #b794f6;
  --accent-hover: #ff9fde;
  --r-N:          #6e6678;

  /* Shadow alpha bumped for visibility on dark surfaces */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 4px 6px -1px rgba(0,0,0,.5),  0 2px 4px -2px rgba(0,0,0,.3);
  --shadow-md: 0 10px 15px -3px rgba(0,0,0,.55), 0 4px 6px -4px rgba(0,0,0,.35);
  --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.6),  0 8px 10px -6px rgba(0,0,0,.4);
  --shadow-xl: 0 25px 50px -12px rgba(0,0,0,.7);
}

/* -------------------------------------------------------------------- */
/* GLOBAL FOCUS RING — accessibility + polish                            */
/* -------------------------------------------------------------------- */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* -------------------------------------------------------------------- */
/* BUTTON SYSTEM — .btn base + hierarchy variants                        */
/* Hierarchy: primary > secondary > ghost. Plus danger / success.        */
/* Sizes:     sm < default < lg                                          */
/* -------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  text-decoration: none;   /* in case it's an <a> */
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-base); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  box-shadow: var(--shadow);
}

.btn-secondary {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--line);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--bg-soft);
  border-color: var(--accent);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-soft);
  color: var(--text);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn-danger:hover:not(:disabled) { background: #c0392b; }

.btn-success {
  background: var(--success);
  color: #fff;
}
.btn-success:hover:not(:disabled) { background: #27ae60; }

/* Block button — full-width inside container */
.btn-block { width: 100%; }

/* -------------------------------------------------------------------- */
/* SKELETON LOADER — animated shimmer for perceived performance          */
/* Use instead of spinners for content-loading states.                   */
/* -------------------------------------------------------------------- */
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-soft) 0%,
    var(--line-soft) 50%,
    var(--bg-soft) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-text   { height: 14px; margin: 6px 0; }
.skeleton-title  { height: 22px; margin: 8px 0; width: 60%; }
.skeleton-circle { border-radius: 50%; }
.skeleton-card   { height: 180px; }

/* -------------------------------------------------------------------- */
/* CARD SURFACE — generic elevated container                             */
/* -------------------------------------------------------------------- */
.card-surface {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.card-surface:hover { box-shadow: var(--shadow-md); }
.card-interactive { cursor: pointer; }
.card-interactive:hover { transform: translateY(-2px); }

/* -------------------------------------------------------------------- */
/* CHIP / TAG — for category/rarity/genre labels                         */
/* -------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.chip-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip-success{ background: var(--success); color: #fff; border-color: var(--success); }
.chip-warning{ background: var(--warning); color: #1a1410; border-color: var(--warning); }
.chip-danger { background: var(--danger);  color: #fff; border-color: var(--danger); }

/* -------------------------------------------------------------------- */
/* LAYOUT HELPERS                                                        */
/* -------------------------------------------------------------------- */
.stack > * + *    { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-6); }
.stack-sm > * + * { margin-top: var(--space-2); }

.row-flex {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.divider {
  height: 1px;
  background: var(--line);
  margin: var(--space-4) 0;
}

/* -------------------------------------------------------------------- */
/* TEXT HELPERS                                                          */
/* -------------------------------------------------------------------- */
.text-muted     { color: var(--muted); }
.text-accent    { color: var(--accent); }
.text-success   { color: var(--success); }
.text-warning   { color: var(--warning); }
.text-danger    { color: var(--danger); }

.text-xs    { font-size: var(--text-xs); }
.text-sm    { font-size: var(--text-sm); }
.text-base  { font-size: var(--text-base); }
.text-md    { font-size: var(--text-md); }
.text-lg    { font-size: var(--text-lg); }
.text-xl    { font-size: var(--text-xl); }

.text-bold   { font-weight: 700; }
.text-semibold { font-weight: 600; }
.text-normal { font-weight: 400; }

.text-center { text-align: center; }
.text-right  { text-align: right; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* -------------------------------------------------------------------- */
/* REDUCED MOTION — respect OS / browser setting                         */
/* -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}