/* ============================================================
   CardXchange — Design tokens  (v2 · elevated)
   Violet customer side · blue admin console · premium serif
   display type over a quiet lavender field.
   ============================================================ */

:root {
  /* ---- Type ---- */
  --font-display: "Source Serif 4", "Times New Roman", Times, Georgia, serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ---- Brand (customer / violet) ---- */
  --violet-900: #3b1478;
  --violet-800: #4c1d95;
  --violet-700: #5b21b6;
  --violet-600: #6d28d9;   /* brand core */
  --violet-500: #7c3aed;   /* CTAs */
  --violet-400: #a78bfa;
  --violet-300: #c4b5fd;
  --violet-100: #ede9fe;
  --violet-50:  #f3effc;
  --fuchsia:    #c026d3;

  /* ---- Admin (blue) ---- */
  --blue-800: #1e40af;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-100: #dbeafe;
  --blue-50:  #eaf1fe;
  --admin-navy: #0f2036;
  --admin-navy-2: #16304f;

  /* ---- Neutrals ---- */
  --ink:    #16121f;
  --ink-2:  #4b4757;
  --ink-3:  #7d7889;
  --line:   #e9e5f3;
  --line-2: #d9d4e8;
  --bg:     #f5f3fb;          /* page background (light lavender) */
  --surface:#ffffff;
  --navy:   #16101f;          /* customer dark strip / panels */
  --navy-2: #211738;

  /* ---- Status ---- */
  --green-700: #15803d;
  --green-600: #16a34a;
  --green-bg:  #e3f7ec;
  --amber-700: #b45309;
  --amber-bg:  #fdf0d2;
  --red-600:   #dc2626;
  --red-700:   #b91c1c;
  --red-bg:    #fde8e8;
  --info-700:  #1d4ed8;
  --info-bg:   #e4edfd;

  /* ---- Brand-tile colors ---- */
  --tile-amazon:   #1a1a1a;
  --tile-itunes:   #ec4899;
  --tile-gplay:    #16a34a;
  --tile-steam:    #1b2838;
  --tile-razer:    #65c31a;
  --tile-netflix:  #e50914;
  --tile-ebay:     #1d6fd8;
  --tile-sephora:  #111111;
  --tile-nordstrom:#3f3f3f;
  --tile-vanilla:  #f0a11b;
  --tile-apple:    #5f5f63;
  --tile-xbox:     #107c10;
  --tile-usdt:     #26a17b;

  /* ---- Gradients ---- */
  --grad-cta: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 55%, #5b21b6 100%);
  --grad-cta-hover: linear-gradient(135deg, #977cf1 0%, #7c3aed 55%, #6528c4 100%);
  --grad-brand-tile: linear-gradient(140deg, #8b5cf6, #5b21b6);
  --grad-text: linear-gradient(100deg, #7c3aed 10%, #a855f7 55%, #c026d3 100%);
  --grad-strip: linear-gradient(120deg, #f2ecfc 0%, #ece4fb 100%);
  --grad-admin-cta: linear-gradient(135deg, #3b82f6 0%, #2563eb 55%, #1e40af 100%);

  /* ---- Elevation ---- */
  --shadow-xs:  0 1px 2px rgba(23, 17, 49, 0.05);
  --shadow-sm:  0 2px 6px rgba(23, 17, 49, 0.05), 0 8px 20px rgba(23, 17, 49, 0.05);
  --shadow-card:0 1px 2px rgba(23, 17, 49, 0.04), 0 10px 28px rgba(23, 17, 49, 0.06), 0 24px 56px rgba(76, 29, 149, 0.07);
  --shadow-pop: 0 2px 6px rgba(23, 17, 49, 0.08), 0 18px 48px rgba(23, 17, 49, 0.18);
  --shadow-btn: 0 2px 5px rgba(91, 33, 182, 0.28), 0 10px 26px rgba(109, 40, 217, 0.35);
  --shadow-btn-hover: 0 3px 7px rgba(91, 33, 182, 0.3), 0 16px 34px rgba(109, 40, 217, 0.42);

  /* Card edge: hairline that catches the light */
  --edge: 1px solid rgba(76, 29, 149, 0.08);

  /* ---- Geometry ---- */
  --r-xl: 26px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 11px;
  --r-pill: 999px;

  /* ---- Layout ---- */
  --max-w: 1240px;
  --gutter: clamp(16px, 4vw, 40px);

  /* ---- Motion ---- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Theme accents (overridden by .theme-admin) */
  --accent: var(--violet-600);
  --accent-strong: var(--violet-500);
  --accent-deep: var(--violet-700);
  --accent-soft: var(--violet-50);
  --accent-line: var(--violet-100);
  --strip: var(--navy);
  --grad-accent: var(--grad-cta);
  --grad-accent-hover: var(--grad-cta-hover);
  --btn-shadow: var(--shadow-btn);
  --btn-shadow-hover: var(--shadow-btn-hover);
}

/* Admin console re-skin: same components, blue accents */
.theme-admin {
  --accent: var(--blue-600);
  --accent-strong: var(--blue-600);
  --accent-deep: var(--blue-800);
  --accent-soft: var(--blue-50);
  --accent-line: var(--blue-100);
  --strip: var(--admin-navy);
  --grad-accent: var(--grad-admin-cta);
  --grad-accent-hover: linear-gradient(135deg, #4f8ef8 0%, #2f6bef 55%, #2148bd 100%);
  --btn-shadow: 0 2px 5px rgba(30, 64, 175, 0.26), 0 10px 26px rgba(37, 99, 235, 0.33);
  --btn-shadow-hover: 0 3px 7px rgba(30, 64, 175, 0.3), 0 16px 34px rgba(37, 99, 235, 0.4);
}