/* ============================================================
   TWEET — Design Tokens / CSS Custom Properties
   Brand: Tweet | Express Your Personality
   Country: Bangladesh | Currency: BDT (৳)
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --color-primary:        #1a1a1a;      /* Deep charcoal */
  --color-primary-light:  #2d2d2d;
  --color-secondary:      #c9a96e;      /* Luxury gold */
  --color-secondary-dark: #b8924e;
  --color-secondary-light:#e8d5a3;
  --color-accent:         #8b1a4a;      /* Deep rose accent */

  /* ── Neutral Palette ── */
  --color-white:          #ffffff;
  --color-off-white:      #f8f7f4;
  --color-cream:          #f2ede4;
  --color-gray-50:        #fafafa;
  --color-gray-100:       #f5f5f5;
  --color-gray-200:       #eeeeee;
  --color-gray-300:       #e0e0e0;
  --color-gray-400:       #bdbdbd;
  --color-gray-500:       #9e9e9e;
  --color-gray-600:       #757575;
  --color-gray-700:       #616161;
  --color-gray-800:       #424242;
  --color-gray-900:       #212121;
  --color-black:          #0a0a0a;

  /* ── Semantic Colors ── */
  --color-success:        #2e7d32;
  --color-success-light:  #e8f5e9;
  --color-warning:        #f57f17;
  --color-warning-light:  #fff8e1;
  --color-error:          #c62828;
  --color-error-light:    #ffebee;
  --color-info:           #1565c0;
  --color-info-light:     #e3f2fd;

  /* ── Typography ── */
  --font-display:   'Cormorant Garamond', 'Georgia', serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:      'JetBrains Mono', 'Courier New', monospace;

  /* ── Font Sizes ── */
  --text-xs:     0.688rem;   /* 11px */
  --text-sm:     0.813rem;   /* 13px */
  --text-base:   1rem;       /* 16px */
  --text-md:     1.125rem;   /* 18px */
  --text-lg:     1.25rem;    /* 20px */
  --text-xl:     1.5rem;     /* 24px */
  --text-2xl:    1.875rem;   /* 30px */
  --text-3xl:    2.25rem;    /* 36px */
  --text-4xl:    3rem;       /* 48px */
  --text-5xl:    3.75rem;    /* 60px */
  --text-6xl:    4.5rem;     /* 72px */
  --text-7xl:    5.625rem;   /* 90px */

  /* ── Font Weights ── */
  --weight-thin:       100;
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-black:      900;

  /* ── Line Heights ── */
  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* ── Letter Spacing ── */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;
  --tracking-luxury:   0.2em;

  /* ── Spacing Scale (4px base) ── */
  --space-1:   0.25rem;    /* 4px */
  --space-2:   0.5rem;     /* 8px */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-8:   2rem;       /* 32px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */
  --space-24:  6rem;       /* 96px */
  --space-32:  8rem;       /* 128px */
  --space-40:  10rem;      /* 160px */
  --space-48:  12rem;      /* 192px */

  /* ── Border Radius ── */
  --radius-none:    0;
  --radius-sm:      2px;
  --radius-md:      4px;
  --radius-lg:      8px;
  --radius-xl:      12px;
  --radius-2xl:     16px;
  --radius-3xl:     24px;
  --radius-full:    9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl:  0 20px 25px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.04);
  --shadow-2xl: 0 25px 50px rgba(0,0,0,0.15);
  --shadow-gold: 0 8px 32px rgba(201,169,110,0.25);
  --shadow-inset: inset 0 2px 4px rgba(0,0,0,0.06);

  /* ── Glassmorphism ── */
  --glass-bg:      rgba(255,255,255,0.08);
  --glass-bg-dark: rgba(0,0,0,0.25);
  --glass-border:  rgba(255,255,255,0.15);
  --glass-blur:    blur(20px);
  --glass-blur-sm: blur(10px);

  /* ── Transitions ── */
  --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --ease-luxury:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:    150ms;
  --duration-normal:  300ms;
  --duration-slow:    500ms;
  --duration-slower:  700ms;
  --duration-slowest: 1000ms;

  --transition-base:  all var(--duration-normal) var(--ease-standard);
  --transition-fast:  all var(--duration-fast) var(--ease-standard);
  --transition-slow:  all var(--duration-slow) var(--ease-luxury);

  /* ── 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-popover:   500;
  --z-toast:     600;
  --z-top:       9999;

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

  --navbar-height:       72px;
  --announcement-height: 40px;
  --total-header-height: 112px;

  /* ── Grid ── */
  --grid-cols-2: repeat(2, 1fr);
  --grid-cols-3: repeat(3, 1fr);
  --grid-cols-4: repeat(4, 1fr);
  --grid-cols-5: repeat(5, 1fr);

  /* ── Product Card ── */
  --card-radius:    var(--radius-lg);
  --card-shadow:    var(--shadow-md);
  --card-hover-shadow: var(--shadow-xl);
}

/* ── Dark Mode Support ── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-off-white: #111111;
    --color-cream:     #181818;
  }
}