/* ============================================================
   AZORA CLUB — DESIGN SYSTEM
   Single entry point. Link this one file:
     <link rel="stylesheet" href="azora-design-system/azora.css">
   Everything derives from CSS custom properties (tokens),
   so theming = editing :root below. Components are prefixed `az-`.
   ============================================================ */

/* ---------- Webfonts: Fredoka (display) + Nunito (body) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ====================================================
     BRAND PALETTE (named) — the 7 Azora colors
     ==================================================== */
  --azora-roxo:   #A58EDC;  /* 💜 Roxo Azora   — primary    */
  --azora-rosa:   #F5A9C9;  /* 🌸 Rosa Loti    — accent/hot */
  --azora-azul:   #A9D7F5;  /* 🌊 Azul Lago    — accent     */
  --azora-verde:  #BFE9D8;  /* 🌿 Verde Menta  — success    */
  --azora-creme:  #FAF8FC;  /* 🥛 Creme        — page bg     */
  --azora-lilas:  #EEE8F8;  /* 🌫️ Lilás Névoa  — sunken      */
  --azora-escuro: #3F3560;  /* 🖋️ Roxo Escuro  — ink/text    */

  /* ====================================================
     PURPLE RAMP (brand spine, anchored on Roxo Azora)
     ==================================================== */
  --purple-50:  #f6f1fc;
  --purple-100: #EEE8F8;
  --purple-200: #e2d6f4;
  --purple-300: #d3bff5;
  --purple-400: #b9a0e4;
  --purple-500: #A58EDC;   /* primary */
  --purple-600: #8f73ce;   /* primary-strong */
  --purple-700: #7d5fc0;
  --purple-800: #5f4a96;
  --purple-900: #3F3560;   /* ink */

  /* ---------- Pastel accents (soft + strong pairs) ---------- */
  --pink-soft: #F5A9C9;  --pink: #ee8bb4;
  --mint-soft: #BFE9D8;  --mint: #6fcaa5;
  --sky-soft:  #A9D7F5;  --sky:  #7fbdec;

  /* ---------- Neutrals (warm, lavender-tinted) ---------- */
  --white:      #ffffff;
  --lavender-1: #FAF8FC;  /* page · Creme */
  --lavender-2: #EEE8F8;  /* sunken · Lilás Névoa */
  --lavender-3: #e4daf4;
  --border-1:   #ece4f7;  /* hairline */
  --border-2:   #dccbf2;  /* stronger */

  /* ---------- Text ---------- */
  --text-strong:  #3F3560;
  --text-body:    #4f4570;
  --text-muted:   #897fa6;
  --text-subtle:  #b1a6c9;
  --text-on-brand:#ffffff;

  /* ---------- Semantic ---------- */
  --success: #6fcaa5;  --success-bg: #e7f6ef;
  --info:    #7fbdec;  --info-bg:    #e8f3fd;
  --warning: #e8b06a;  --warning-bg: #f8efe1;
  --danger:  #e88a96;  --danger-bg:  #fbe9ec;

  /* ---------- Surface aliases ---------- */
  --bg-page:        var(--lavender-1);
  --surface-card:   var(--white);
  --surface-sunken: var(--lavender-2);
  --brand:          var(--purple-500);
  --brand-strong:   var(--purple-600);
  --brand-ink:      var(--purple-900);
  --hairline:       var(--border-1);

  /* ---------- Per-game accent chips (TCG lines) ---------- */
  --game-pokemon:  #BFE9D8;
  --game-lorcana:  #A9D7F5;
  --game-yugioh:   #F5A9C9;
  --game-riftbound:#b9a0e4;
  --game-magic:    #d3bff5;

  /* ====================================================
     TYPOGRAPHY
     ==================================================== */
  --font-display: 'Fredoka', system-ui, sans-serif;  /* headings, prices, labels, buttons */
  --font-body:    'Nunito', system-ui, sans-serif;   /* paragraphs, UI text */

  --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-md: 16px;
  --text-lg: 18px;  --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px;
  --text-4xl: 46px; --text-5xl: 60px;

  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800;
  --lh-tight:1.05; --lh-snug:1.2; --lh-normal:1.45; --lh-relaxed:1.65;
  --ls-tight:-0.02em; --ls-normal:0; --ls-wide:0.04em; --ls-wider:0.12em;

  /* ====================================================
     SPACING — 4px grid
     ==================================================== */
  --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; --space-24:96px;
  --container-max:1240px; --gutter:24px; --section-y:80px;

  /* ====================================================
     EFFECTS — radii, shadows, borders, motion
     ==================================================== */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-2xl:36px;
  --r-pill:999px; --r-circle:50%;

  /* soft, ink-tinted shadows (never hard black) */
  --shadow-xs: 0 1px 2px rgba(63,53,96,0.08);
  --shadow-sm: 0 2px 8px rgba(63,53,96,0.10);
  --shadow-md: 0 8px 22px rgba(63,53,96,0.13);
  --shadow-lg: 0 16px 38px rgba(63,53,96,0.16);
  --shadow-xl: 0 28px 60px rgba(63,53,96,0.20);
  --shadow-pop: 0 6px 0 rgba(63,53,96,0.12);

  --border-w: 1.5px;
  --ring-focus: 0 0 0 4px rgba(165,142,220,0.34);

  --ease-out:    cubic-bezier(0.22,0.61,0.36,1);
  --ease-bounce: cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
}

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---------- Buttons ---------- */
.az-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--text-md);
  line-height:1; padding:12px 22px; border-radius:var(--r-pill); border:none; cursor:pointer;
  white-space:nowrap; text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.az-btn:focus-visible { outline:none; box-shadow:var(--ring-focus); }
.az-btn:active { transform:translateY(1px) scale(0.98); }
.az-btn--primary   { background:var(--brand); color:var(--text-on-brand); box-shadow:var(--shadow-md); }
.az-btn--primary:hover { background:var(--brand-strong); box-shadow:var(--shadow-lg); }
.az-btn--secondary { background:var(--purple-50); color:var(--brand-strong); }
.az-btn--secondary:hover { background:var(--purple-100); }
.az-btn--ghost     { background:transparent; color:var(--brand-strong); }
.az-btn--ghost:hover { background:var(--purple-50); }
.az-btn--mint      { background:var(--mint-soft); color:var(--text-strong); box-shadow:var(--shadow-sm); }
.az-btn--mint:hover { filter:brightness(0.97); box-shadow:var(--shadow-md); }
.az-btn--sm { font-size:var(--text-sm); padding:8px 16px; }
.az-btn--lg { font-size:var(--text-lg); padding:15px 30px; }
.az-btn--block { display:flex; width:100%; }
.az-btn:disabled, .az-btn[aria-disabled="true"] { opacity:0.5; cursor:not-allowed; box-shadow:none; }

.az-iconbtn {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:var(--r-circle);
  background:var(--white); color:var(--brand-strong);
  border:var(--border-w) solid var(--border-1); cursor:pointer; box-shadow:var(--shadow-xs);
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.az-iconbtn:hover { background:var(--purple-50); }
.az-iconbtn:active { transform:scale(0.92); }

/* ---------- Wishlist button tooltip ---------- */
.az-wishbtn__tip {
  position:absolute; top:calc(100% + 6px); right:0;
  white-space:nowrap; pointer-events:none;
  background:var(--text-strong); color:var(--white);
  font-family:var(--font-body); font-weight:var(--fw-semibold); font-size:12px; line-height:1;
  padding:5px 9px; border-radius:var(--r-sm); box-shadow:var(--shadow-sm);
  opacity:0; transform:translateY(-3px);
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  z-index:5;
}
.az-wishbtn:hover .az-wishbtn__tip,
.az-wishbtn:focus-visible .az-wishbtn__tip { opacity:1; transform:translateY(0); }

/* ---------- Badges & Tags ---------- */
.az-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-weight:var(--fw-semibold);
  font-size:var(--text-xs); letter-spacing:var(--ls-wide);
  padding:5px 11px; border-radius:var(--r-pill);
  background:var(--purple-100); color:var(--brand-strong);
}
.az-badge--new     { background:var(--mint-soft); color:#2f7d63; }
.az-badge--hot     { background:var(--pink-soft); color:#b14c7e; }
.az-badge--sale    { background:var(--lavender-2); color:#6f56b0; }
.az-badge--preorder{ background:var(--sky-soft);  color:#3f6ea8; }
.az-badge--loti    { background:var(--pink-soft); color:#8a3563; }
.az-badge--soldout { background:var(--lavender-3); color:var(--text-muted); }

/* Origin / language pill (code only: BR · EUA · JP · CN) */
.az-origin {
  display:inline-flex; align-items:center;
  font-family:var(--font-display); font-weight:var(--fw-semibold);
  font-size:var(--text-2xs); letter-spacing:0.04em; color:var(--text-muted);
  background:var(--lavender-2); border:var(--border-w) solid var(--border-1);
  border-radius:var(--r-pill); padding:3px 10px;
}

/* Game chip — pastel per TCG line */
.az-chip {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--text-sm);
  color:var(--text-strong); padding:7px 14px; border-radius:var(--r-pill);
  background:var(--white); border:var(--border-w) solid var(--border-1);
  cursor:pointer; transition:all var(--dur-base) var(--ease-out); white-space:nowrap;
}
.az-chip:hover { border-color:var(--border-2); transform:translateY(-1px); }
.az-chip[aria-pressed="true"] { background:var(--purple-50); border-color:var(--purple-300); color:var(--brand-strong); }
.az-chip .dot { width:12px; height:12px; border-radius:var(--r-circle); }

/* ---------- Cards ---------- */
.az-card {
  background:var(--surface-card); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); border:var(--border-w) solid var(--border-1); overflow:hidden;
}
.az-product {
  background:var(--surface-card); border-radius:var(--r-lg);
  border:var(--border-w) solid var(--border-1); box-shadow:var(--shadow-sm);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.az-product:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.az-product__media { position:relative; aspect-ratio:1/1; background:var(--lavender-2); display:flex; align-items:center; justify-content:center; }
.az-product__body { padding:var(--space-4); display:flex; flex-direction:column; gap:6px; }
.az-product__title { font-family:var(--font-body); font-weight:var(--fw-bold); font-size:var(--text-md); color:var(--text-strong); line-height:var(--lh-snug); }
.az-product__meta { font-size:var(--text-sm); color:var(--text-muted); }
.az-price { font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--text-xl); color:var(--brand-strong); white-space:nowrap; }
.az-price--old { font-size:var(--text-sm); color:var(--text-subtle); text-decoration:line-through; font-weight:var(--fw-medium); }

/* ---------- Inputs ---------- */
.az-input, .az-select {
  font-family:var(--font-body); font-size:var(--text-md); color:var(--text-strong);
  background:var(--white); padding:12px 16px; border-radius:var(--r-md);
  border:var(--border-w) solid var(--border-2); width:100%;
  transition:border-color var(--dur-base), box-shadow var(--dur-base);
}
.az-input::placeholder { color:var(--text-subtle); }
.az-input:focus, .az-select:focus { outline:none; border-color:var(--purple-400); box-shadow:var(--ring-focus); }
.az-search {
  display:flex; align-items:center; gap:10px;
  background:var(--white); border:var(--border-w) solid var(--border-2);
  border-radius:var(--r-pill); padding:10px 18px;
}
.az-search input { border:none; outline:none; background:transparent; flex:1; font-family:var(--font-body); font-size:var(--text-md); color:var(--text-strong); }

/* ---------- Quantity stepper ---------- */
.az-stepper { display:inline-flex; align-items:center; border:var(--border-w) solid var(--border-2); border-radius:var(--r-pill); overflow:hidden; background:var(--white); }
.az-stepper button { width:38px; height:38px; border:none; background:transparent; font-family:var(--font-display); font-size:20px; color:var(--brand-strong); cursor:pointer; }
.az-stepper button:hover { background:var(--purple-50); }
.az-stepper span { min-width:34px; text-align:center; font-family:var(--font-display); font-weight:var(--fw-semibold); color:var(--text-strong); }

/* ---------- Tabs ---------- */
.az-tabs { display:inline-flex; gap:4px; background:var(--lavender-2); padding:5px; border-radius:var(--r-pill); }
.az-tab { font-family:var(--font-display); font-weight:var(--fw-medium); font-size:var(--text-sm); padding:9px 20px; border-radius:var(--r-pill); border:none; background:transparent; color:var(--text-muted); cursor:pointer; transition:all var(--dur-base) var(--ease-out); }
.az-tab[aria-selected="true"] { background:var(--white); color:var(--brand-strong); box-shadow:var(--shadow-xs); }

/* ---------- Rating ---------- */
.az-rating { color:var(--brand); font-size:var(--text-md); letter-spacing:2px; }