/* ============================================================
   DOOMESDAY VIP — BASE CSS
   Design system: dark premium, gold accent, mobile-first
   ============================================================ */

/* --- CUSTOM PROPERTIES ------------------------------------ */
:root {
  /* Color palette */
  --color-bg:          #080808;
  --color-surface:     #111111;
  --color-surface-2:   #1a1a1a;
  --color-surface-3:   #222222;
  --color-border:      #282828;
  --color-border-light:#333333;

  --color-accent:      #c8a96e;
  --color-accent-dark: #a8893e;
  --color-accent-light:#e8c98e;

  --color-text:        #f0f0f0;
  --color-text-muted:  #888888;
  --color-text-faint:  #555555;

  --color-error:       #d94f4f;
  --color-success:     #4f9e4f;
  --color-warning:     #d4a44f;

  --color-white:       #ffffff;
  --color-black:       #000000;

  /* Typography */
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono:   'JetBrains Mono', 'Courier New', monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.2em;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  --header-height: 72px;

  /* Borders */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 20px rgba(200,169,110,0.2);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-slower: 600ms ease;

  /* Z-index scale */
  --z-below:    -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* --- RESET ------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

p { line-height: var(--leading-normal); }

/* --- TYPOGRAPHY ------------------------------------------- */
.font-serif       { font-family: var(--font-serif); }
.font-sans        { font-family: var(--font-sans); }

.text-xs          { font-size: var(--text-xs); }
.text-sm          { font-size: var(--text-sm); }
.text-base        { font-size: var(--text-base); }
.text-lg          { font-size: var(--text-lg); }
.text-xl          { font-size: var(--text-xl); }
.text-2xl         { font-size: var(--text-2xl); }
.text-3xl         { font-size: var(--text-3xl); }
.text-4xl         { font-size: var(--text-4xl); }
.text-5xl         { font-size: var(--text-5xl); }
.text-6xl         { font-size: var(--text-6xl); }

.text-muted       { color: var(--color-text-muted); }
.text-faint       { color: var(--color-text-faint); }
.text-accent      { color: var(--color-accent); }
.text-error       { color: var(--color-error); }
.text-success     { color: var(--color-success); }

.tracking-wide    { letter-spacing: var(--tracking-wide); }
.tracking-wider   { letter-spacing: var(--tracking-wider); }
.tracking-widest  { letter-spacing: var(--tracking-widest); }

.uppercase        { text-transform: uppercase; }
.lowercase        { text-transform: lowercase; }
.capitalize       { text-transform: capitalize; }

.font-light       { font-weight: 300; }
.font-normal      { font-weight: 400; }
.font-medium      { font-weight: 500; }
.font-semibold    { font-weight: 600; }
.font-bold        { font-weight: 700; }

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

/* Label style used throughout */
.label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.label--accent {
  color: var(--color-accent);
}

/* --- LAYOUT ----------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 640px)  { .container { padding-inline: var(--space-6); } }
@media (min-width: 1024px) { .container { padding-inline: var(--space-8); } }
@media (min-width: 1280px) { .container { padding-inline: var(--space-12); } }

.container--sm  { max-width: var(--container-sm); }
.container--md  { max-width: var(--container-md); }
.container--lg  { max-width: var(--container-lg); }
.container--2xl { max-width: var(--container-2xl); }

/* Grid system */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.gap-2  { gap: var(--space-2); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

/* Flex utilities */
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.gap-x-2 { column-gap: var(--space-2); }
.gap-x-4 { column-gap: var(--space-4); }
.gap-y-2 { row-gap: var(--space-2); }
.gap-y-4 { row-gap: var(--space-4); }
.flex-1  { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Spacing utilities */
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mx-auto { margin-inline: auto; }
.p-4   { padding: var(--space-4); }
.p-6   { padding: var(--space-6); }
.px-4  { padding-inline: var(--space-4); }
.px-6  { padding-inline: var(--space-6); }
.py-4  { padding-block: var(--space-4); }
.py-8  { padding-block: var(--space-8); }
.py-16 { padding-block: var(--space-16); }
.py-20 { padding-block: var(--space-20); }
.py-24 { padding-block: var(--space-24); }
.py-32 { padding-block: var(--space-32); }

/* Display utilities */
.block         { display: block; }
.inline-block  { display: inline-block; }
.hidden        { display: none; }
.relative      { position: relative; }
.absolute      { position: absolute; }
.sticky        { position: sticky; }
.overflow-hidden { overflow: hidden; }
.w-full        { width: 100%; }
.h-full        { height: 100%; }
.min-h-screen  { min-height: 100vh; }

/* --- SECTION STYLES --------------------------------------- */
.section {
  padding-block: var(--space-16);
}

.section--sm  { padding-block: var(--space-8); }
.section--lg  { padding-block: var(--space-24); }
.section--xl  { padding-block: var(--space-32); }

.section__header {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.section__title {
  font-family: var(--font-serif);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.section__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 640px;
  margin-inline: auto;
}

/* --- DIVIDERS --------------------------------------------- */
.divider {
  height: 1px;
  background: var(--color-border);
  border: none;
  margin-block: var(--space-8);
}

.divider--gold {
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

/* --- SCROLLBAR -------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-surface); }
::-webkit-scrollbar-thumb { background: var(--color-border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

/* --- SELECTION -------------------------------------------- */
::selection {
  background: var(--color-accent);
  color: var(--color-black);
}

/* --- FOCUS VISIBLE ---------------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* --- ANIMATIONS ------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.animate-fade-in    { animation: fadeIn var(--transition-base) forwards; }
.animate-fade-in-up { animation: fadeInUp var(--transition-slow) forwards; }
.animate-spin       { animation: spin 1s linear infinite; }
.animate-pulse      { animation: pulse 2s infinite; }

/* --- SKELETON LOADING ------------------------------------- */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface) 25%,
    var(--color-surface-2) 50%,
    var(--color-surface) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-wave 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-wave {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- TOAST NOTIFICATIONS ---------------------------------- */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  pointer-events: auto;
  animation: fadeInUp var(--transition-base) forwards;
  min-width: 280px;
  max-width: 380px;
}

.toast--success { border-left: 3px solid var(--color-success); }
.toast--error   { border-left: 3px solid var(--color-error); }
.toast--info    { border-left: 3px solid var(--color-accent); }

/* ============================================================
   LIGHT THEME — overrides for white store pages
   ============================================================ */
body.light-theme {
  --color-bg:           #ffffff;
  --color-surface:      #f8f8f8;
  --color-surface-2:    #f0f0f0;
  --color-surface-3:    #e8e8e8;
  --color-border:       #e5e5e5;
  --color-border-light: #d5d5d5;

  --color-accent:       #121212;
  --color-accent-dark:  #000000;
  --color-accent-light: #333333;

  --color-text:         #121212;
  --color-text-muted:   #666666;
  --color-text-faint:   #999999;

  --font-sans: 'Saira', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Saira', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.light-theme ::selection { background: #121212; color: #fff; }
body.light-theme ::-webkit-scrollbar-track  { background: #f0f0f0; }
body.light-theme ::-webkit-scrollbar-thumb  { background: #ccc; }
body.light-theme ::-webkit-scrollbar-thumb:hover { background: #999; }

body.light-theme .skeleton {
  background: linear-gradient(90deg, #f5f5f5 25%, #ebebeb 50%, #f5f5f5 75%);
  background-size: 200% 100%;
}