/* =============================================================
   VARIABLES.CSS — Design Tokens
   Premium Gen-Z Fashion Marketplace ("VELVET")
   ============================================================= */

:root {
  /* ---------- BRAND / PRIMARY PALETTE ---------- */
  --c-primary: #ff3f6c;
  --c-primary-dark: #e02954;
  --c-primary-darker: #c41d45;
  --c-primary-light: #ff6b8d;
  --c-primary-lighter: #ffe3ea;
  --c-primary-tint: #fff5f7;

  /* ---------- SECONDARY / FASHION TONES ---------- */
  --c-ink: #14101a;          /* near-black premium */
  --c-charcoal: #282c3f;     /* myntra-ish slate */
  --c-grape: #6c5ce7;        /* accent violet */
  --c-grape-light: #a29bfe;
  --c-teal: #00b894;
  --c-amber: #f6a609;
  --c-gold: #d4af37;
  --c-blush: #ffd3e0;
  --c-cream: #faf7f2;

  /* ---------- NEUTRALS ---------- */
  --c-white: #ffffff;
  --c-bg: #ffffff;
  --c-bg-alt: #faf9fb;
  --c-bg-soft: #f5f5f6;
  --c-surface: #ffffff;
  --c-border: #ededf0;
  --c-border-strong: #d4d5d9;
  --c-muted: #94969f;
  --c-text-soft: #696b79;
  --c-text: #282c3f;
  --c-text-strong: #14101a;

  /* ---------- STATE COLORS ---------- */
  --c-success: #03a685;
  --c-success-bg: #e7f8f3;
  --c-warning: #ff905a;
  --c-warning-bg: #fff2ea;
  --c-danger: #ff5959;
  --c-danger-bg: #ffeded;
  --c-info: #2f80ed;
  --c-info-bg: #eaf2fe;
  --c-disabled: #c9cad1;
  --c-disabled-bg: #f0f0f2;

  /* ---------- SKELETON / SHIMMER ---------- */
  --c-skeleton: #ececed;
  --c-skeleton-hl: #f7f7f8;

  /* ---------- GRADIENTS ---------- */
  --g-primary: linear-gradient(135deg, #ff3f6c 0%, #ff6b8d 100%);
  --g-primary-deep: linear-gradient(135deg, #ff3f6c 0%, #c41d45 100%);
  --g-grape: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
  --g-sunset: linear-gradient(135deg, #ff6b8d 0%, #f6a609 100%);
  --g-vibe: linear-gradient(135deg, #6c5ce7 0%, #ff3f6c 60%, #f6a609 100%);
  --g-dark: linear-gradient(135deg, #282c3f 0%, #14101a 100%);
  --g-gold: linear-gradient(135deg, #d4af37 0%, #f6e27a 100%);
  --g-flash: linear-gradient(135deg, #ff3f6c 0%, #6c5ce7 100%);
  --g-glass: linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.35) 100%);

  /* ---------- SPACING SYSTEM (4px base) ---------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;

  /* ---------- RADIUS SYSTEM ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ---------- ELEVATION / SHADOW SYSTEM ---------- */
  --sh-xs: 0 1px 2px rgba(20,16,26,.06);
  --sh-sm: 0 2px 8px rgba(20,16,26,.07);
  --sh-md: 0 6px 18px rgba(20,16,26,.09);
  --sh-lg: 0 14px 38px rgba(20,16,26,.12);
  --sh-xl: 0 24px 60px rgba(20,16,26,.18);
  --sh-primary: 0 10px 26px rgba(255,63,108,.35);
  --sh-grape: 0 10px 26px rgba(108,92,231,.32);
  --sh-inset: inset 0 0 0 1px var(--c-border);

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Poppins", "Inter", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Cascadia Code", Menlo, monospace;

  --fs-2xs: 0.6875rem;  /* 11 */
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.8125rem;   /* 13 */
  --fs-base: 0.875rem;  /* 14 */
  --fs-md: 1rem;        /* 16 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-2xl: 1.75rem;    /* 28 */
  --fs-3xl: 2.25rem;    /* 36 */
  --fs-4xl: 3rem;       /* 48 */
  --fs-5xl: 4rem;       /* 64 */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-wider: 0.12em;

  /* ---------- LAYOUT ---------- */
  --container: 1400px;
  --container-narrow: 1080px;
  --nav-h: 80px;
  --nav-h-mobile: 60px;
  --announce-h: 36px;
  --bottomnav-h: 62px;

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: .15s;
  --t-base: .25s;
  --t-slow: .45s;

  /* ---------- Z-INDEX ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-nav: 200;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 700;
  --z-max: 999;
}

/* Optional dark accents reused on dark sections */
.theme-dark {
  --c-bg: var(--c-ink);
  --c-surface: #1d1924;
  --c-text: #f3f1f6;
  --c-text-strong: #ffffff;
  --c-text-soft: #b6b2c2;
  --c-border: #2c2735;
}