/* ================================================================
   ZWIPKART DESIGN TOKENS
   Single source of truth for ALL design decisions.
   Imported by: style.css, admin.css, seller.css

   RULES:
   - Every color, spacing, font-size, radius, shadow, transition,
     and z-index MUST reference a token from this file.
   - To change the brand, update tokens here — it cascades everywhere.
   - Never hardcode values in component CSS.
   ================================================================ */

:root {

  /* ================================================================
     COLOR RAMPS — 10-step scales (50=lightest, 900=darkest)
     ================================================================ */

  /* ── Gray ── */
  --gray-50:  #fafafa;
  --gray-100: #f5f5f7;
  --gray-200: #e5e5e5;
  --gray-300: #d0d0d0;
  --gray-400: #a1a1a1;
  --gray-500: #6b6b6b;
  --gray-600: #525252;
  --gray-700: #333333;
  --gray-800: #1a1a1a;
  --gray-900: #111111;

  /* ── Purple (Brand) — built around #6C3CE1 ── */
  --purple-50:  #f5f0ff;
  --purple-100: #ede5ff;
  --purple-200: #d9c7ff;
  --purple-300: #b794f6;
  --purple-400: #9b6deb;
  --purple-500: #7c4ddb;
  --purple-600: #6C3CE1;
  --purple-700: #5A2DC7;
  --purple-800: #4822a0;
  --purple-900: #2d1566;

  /* ── Red (Danger / Deals) ── */
  --red-50:  #fef2f2;
  --red-100: #fdecea;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #e63946;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --red-900: #7f1d1d;

  /* ── Green (Success) ── */
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;

  /* ── Amber (Warning) ── */
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-800: #92400e;
  --amber-900: #78350f;

  /* ── Blue (Info) ── */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;


  /* ================================================================
     SEMANTIC COLOR ALIASES
     These reference the ramps above. Components use THESE, not ramps.
     ================================================================ */

  /* ── Surfaces ── */
  --color-bg-page:     var(--gray-50);
  --color-bg-card:     #ffffff;
  --color-bg-subtle:   var(--gray-100);
  --color-bg-hover:    var(--gray-200);

  /* ── Text ── */
  --color-text-primary:   var(--gray-900);
  --color-text-secondary: var(--gray-700);
  --color-text-muted:     var(--gray-500);
  --color-text-disabled:  var(--gray-400);
  --color-text-inverse:   #ffffff;

  /* ── Borders ── */
  --color-border-default: var(--gray-200);
  --color-border-strong:  var(--gray-300);
  --color-border-subtle:  var(--gray-100);

  /* ── Accent (Brand Purple) ── */
  --color-accent:        var(--purple-600);
  --color-accent-hover:  var(--purple-700);
  --color-accent-subtle: var(--purple-50);
  --color-accent-muted:  var(--purple-100);

  /* ── Semantic Status ── */
  --color-danger:         var(--red-600);
  --color-danger-subtle:  var(--red-50);
  --color-success:        var(--green-500);
  --color-success-subtle: var(--green-50);
  --color-warning:        var(--amber-500);
  --color-warning-subtle: var(--amber-50);
  --color-info:           var(--blue-500);
  --color-info-subtle:    var(--blue-50);


  /* ================================================================
     TYPOGRAPHY
     ================================================================ */

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ── Font Size Scale ── */
  --text-2xs:  0.6875rem;  /* 11px */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.875rem;   /* 14px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  clamp(1.75rem, 3.5vw, 2rem);
  --text-4xl:  clamp(2rem, 4vw, 2.5rem);
  --text-5xl:  clamp(2.5rem, 5vw, 3.5rem);

  /* ── Line Height ── */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-loose:   1.75;

  /* ── Letter Spacing ── */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.04em;
  --tracking-widest:  0.08em;

  /* ── Font Weight ── */
  --weight-light:    300;
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;
  --weight-black:    900;


  /* ================================================================
     SPACING — 4px baseline grid
     ================================================================ */

  --sp-0:   0;
  --sp-0\.5: 2px;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   28px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-14:  56px;
  --sp-16:  64px;
  --sp-18:  72px;
  --sp-20:  80px;
  --sp-24:  96px;


  /* ================================================================
     BORDER RADIUS
     ================================================================ */

  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-2xl:  20px;
  --r-full: 999px;


  /* ================================================================
     SHADOWS
     ================================================================ */

  --shadow-xs:    0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:    0 2px 6px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 14px rgba(0,0,0,0.08);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.10);
  --shadow-xl:    0 14px 40px rgba(0,0,0,0.12);
  --shadow-card:  0 1px 4px rgba(0,0,0,0.06);
  --shadow-hover: 0 8px 24px rgba(108,60,225,0.10), 0 4px 12px rgba(0,0,0,0.06);


  /* ================================================================
     MOTION — Durations & Easings
     ================================================================ */

  --duration-instant: 0.1s;
  --duration-fast:    0.15s;
  --duration-normal:  0.25s;
  --duration-slow:    0.35s;
  --duration-slower:  0.5s;

  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.16, 1, 0.3, 1);

  /* Legacy transition shorthands (keep for backward compat) */
  --t-fast: all 0.12s cubic-bezier(0.4,0,0.2,1);
  --t-base: all 0.18s cubic-bezier(0.4,0,0.2,1);
  --t-slow: all 0.35s cubic-bezier(0.4,0,0.2,1);


  /* ================================================================
     Z-INDEX SCALE
     ================================================================ */

  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-drawer:   1100;
  --z-toast:    2000;
  --z-tooltip:  3000;
  --z-max:      9999;


  /* ================================================================
     LAYOUT
     ================================================================ */

  --container:      1300px;
  --container-wide: 1520px;
  --header-h:       116px;
  --announce-h:     40px;
  --touch-min:      44px;


  /* ================================================================
     LEGACY ALIASES (backward-compatible — DO NOT remove)
     These map old variable names to new tokens so nothing breaks.
     ================================================================ */

  /* Surfaces */
  --bg-page:    var(--color-bg-page);
  --bg-card:    var(--color-bg-card);
  --bg-subtle:  var(--color-bg-subtle);
  --bg-hover:   var(--color-bg-hover);
  --white:      #ffffff;
  --black:      #000000;

  /* Ink / Text */
  --ink-primary:    var(--color-text-primary);
  --ink-secondary:  var(--color-text-secondary);
  --ink-muted:      var(--color-text-muted);
  --ink-tertiary:   var(--gray-400);
  --dark:           #000000;
  --dark-2:         var(--gray-900);
  --dark-3:         var(--gray-800);
  --text-primary:   var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted:     var(--color-text-muted);
  --text-white:     #ffffff;

  /* Brand / Accent */
  --brand-secondary: var(--color-accent);
  --accent:          var(--color-accent);
  --accent-dark:     var(--color-accent-hover);
  --accent-light:    var(--purple-50);
  --accent-blue:     var(--blue-500);

  /* Deal / Discount */
  --deal:       var(--color-danger);
  --deal-light: var(--red-100);

  /* Semantic */
  --danger:  var(--color-danger);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --info:    var(--color-info);

  /* Legacy grays */
  --grey:       var(--gray-300);
  --grey-light: var(--gray-100);
  --grey-mid:   var(--gray-200);
  --grey-dark:  var(--gray-500);

  /* Borders */
  --border:      var(--color-border-default);
  --border-dark: var(--color-border-strong);

  /* Typography */
  --font: var(--font-sans);

  /* Tech department */
  --tech-green:       #4CAF50;
  --tech-green-dark:  #388E3C;
  --tech-green-light: rgba(76,175,80,0.06);
}


/* ================================================================
   BREAKPOINTS (documented — CSS can't use variables in @media)

   xs:  480px   — small phones
   sm:  640px   — large phones
   md:  768px   — tablets
   lg:  1024px  — small desktop
   xl:  1280px  — desktop
   2xl: 1520px  — wide desktop
   ================================================================ */