/* ==========================================================================
   TAHAM TECH BD - 3-TIER TOKENIZED DESIGN SYSTEM
   Modern, subtle & soothing e-commerce system for Taham Tech (tahamtech.com.bd)
   ========================================================================== */

/* --------------------------------------------------------------------------
   TIER 1: PRIMITIVE TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* One editable accent. All brand shades and effects follow this token. */
  --color-accent: #cc2446;
  --color-accent-contrast: #ffffff;
  --color-accent-text-light: color-mix(in srgb, var(--color-accent) 72%, black);
  --color-accent-text-dark: color-mix(in srgb, var(--color-accent) 42%, white);
  --color-accent-outline-light: color-mix(in srgb, var(--color-accent) 84%, black);
  --color-accent-outline-dark: color-mix(in srgb, var(--color-accent) 72%, white);
  --primitive-brand-50:   color-mix(in srgb, var(--color-accent) 3%, white);
  --primitive-brand-100:  color-mix(in srgb, var(--color-accent) 10%, white);
  --primitive-brand-200:  color-mix(in srgb, var(--color-accent) 22%, white);
  --primitive-brand-300:  color-mix(in srgb, var(--color-accent) 42%, white);
  --primitive-brand-400:  color-mix(in srgb, var(--color-accent) 72%, white);
  --primitive-brand-500:  var(--color-accent);
  --primitive-brand-600:  color-mix(in srgb, var(--color-accent) 84%, black);
  --primitive-brand-700:  color-mix(in srgb, var(--color-accent) 72%, black);
  --primitive-brand-800:  color-mix(in srgb, var(--color-accent) 58%, black);
  --primitive-brand-900:  color-mix(in srgb, var(--color-accent) 40%, black);

  /* State Signals & Accents */
  --primitive-cyan-400:   #38bdf8;
  --primitive-cyan-500:   #0284c7;
  --primitive-amber-500:  #f59e0b;
  --primitive-emerald-500:#10b981;
  --primitive-emerald-50: #ecfdf5;
  --primitive-rose-500:   #ef4444;
  --primitive-rose-50:    #fef2f2;
  --primitive-whatsapp:   #25d366;

  /* Apple Gadgets / Dazzle Luxury Neutrals */
  --primitive-slate-50:   #f8f9fa; /* Crisp Studio Canvas */
  --primitive-slate-100:  #f3f4f6;
  --primitive-slate-200:  #e5e7eb; /* Crisp 1px border */
  --primitive-slate-300:  #d1d5db;
  --primitive-slate-400:  #9ca3af;
  --primitive-slate-500:  #6b7280;
  --primitive-slate-600:  #4b5563;
  --primitive-slate-700:  #374151;
  --primitive-slate-800:  #1f2937;
  --primitive-slate-900:  #111827; /* Rich Dark Charcoal */
  --primitive-slate-950:  #0b0d12; /* Prestige Header Black */
  --primitive-pure-black: #000000;
  --primitive-pure-white: #ffffff;

  /* Shared typography: supporting text 14px, labels 15px, compact titles 16px. */
  --font-family-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --font-family-body:    'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  --font-family-bengali: 'Noto Sans Bengali', 'Inter', -apple-system, sans-serif;
  --font-family-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --font-size-2xs: 0.875rem;  /* 14px: supporting text and badges */
  --font-size-xs:  0.9375rem; /* 15px: labels and compact body text */
  --font-size-sm:  1rem;      /* 16px: compact titles and controls */
  --font-size-base:1.0625rem; /* 17px */
  --font-size-lg:  1.125rem;  /* 18px */
  --font-size-xl:  1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 2.75rem;   /* 44px */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;

  --line-height-tight:  1.15;
  --line-height-snug:   1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed:1.65;

  /* 4px Spacing Scale */
  --space-0:   0px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;

  /* Radii */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Shadows - Apple Premium Soft Elevation */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:   0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-md:   0 4px 14px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:   0 10px 25px -4px rgba(0, 0, 0, 0.06);
  --shadow-xl:   0 20px 40px -8px rgba(0, 0, 0, 0.09);
  --shadow-glow-brand: 0 4px 16px color-mix(in srgb, var(--color-accent) 20%, transparent);

  /* Animation */
  --motion-fast:   150ms cubic-bezier(0.16, 1, 0.3, 1);
  --motion-normal: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --motion-slow:   300ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-max-width: 1400px;
  --header-height:       70px;
  --subnav-height:       48px;
  /* Measured sticky stack: header row (70) + subnav (48) + subnav/header borders (2) = 120px.
     Used as the sticky offset anchor for PDP purchase controls (Task 2). */
  --header-total-height: calc(var(--header-height) + var(--subnav-height) + 2px);
  --bottom-dock-height:  64px;
  --drawer-max-width:    420px;
  --modal-max-width:     740px;

  /* Z-Index */
  --z-base:       1;
  --z-elevated:   10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-fixed:      500;
  --z-drawer:     800;
  --z-modal:      900;
  --z-toast:      1000;
}

/* --------------------------------------------------------------------------
   TIER 2: SEMANTIC TOKENS - LIGHT THEME (DEFAULT APPLE GADGETS LUXURY LOOK)
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;
  --color-site-background: #fdfdfd;

  /* Canvas & Surface Layers */
  --color-canvas:             var(--color-site-background);
  --color-surface-base:       var(--color-site-background);
  --color-surface-subtle:     #fafafa;
  --color-surface-card:       #fdfdfd;
  --color-surface-elevated:   #fdfdfd;
  --color-surface-sunken:     #f6f6f6; /* Gentle, soothing light neutral */
  --color-surface-glass:      rgba(255, 255, 255, 0.95);

  /* Borders */
  --color-border-subtle:      #f1f5f9;
  --color-border-default:     #e2e8f0;
  --color-border-strong:      #cbd5e1;
  --color-border-brand:       color-mix(in srgb, var(--color-accent) 35%, transparent);

  /* Typography Roles */
  --color-text-primary:       #0f172a; /* Deep, gentle slate - softer than harsh black */
  --color-text-secondary:     #475569;
  --color-text-muted:         #64748b;
  --color-text-subtle:        #94a3b8;
  --color-text-inverse:       #ffffff;

  /* Brand Semantics */
  --color-accent-text:         var(--color-accent-text-light);
  --color-accent-outline:      var(--color-accent-outline-light);
  --color-brand-text:          var(--color-accent-text);
  --color-brand-outline:       var(--color-accent-outline);
  --color-brand-primary:      var(--primitive-brand-500);
  --color-brand-hover:        var(--primitive-brand-600);
  --color-brand-active:       var(--primitive-brand-700);
  --color-brand-subtle:       var(--primitive-brand-50);
  --color-brand-contrast:     var(--color-accent-contrast);

  /* State Accents */
  --color-success:            #059669;
  --color-success-bg:         #ecfdf5;
  --color-warning:            #d97706;
  --color-warning-bg:         #fffbeb;
  --color-danger:             #e11d48;
  --color-danger-bg:          #fee2e2;
  --color-info:               #0284c7;
  --color-info-bg:            #eff6ff;

  /* Header (Clean, Light, Soothing Studio Look) */
  --header-bg:                var(--color-site-background);
  --header-border:            #e2e8f0;
  --header-text:              #0f172a;

  /* Secondary Subnav (Crisp White with subtle light border) */
  --subnav-bg:                var(--color-site-background);
  --subnav-border:            #e2e8f0;
  --subnav-text:              #475569;
  --subnav-text-hover:        var(--color-brand-text);

  /* Search & Controls */
  --input-bg:                 #f1f5f9;
  --input-bg-focus:           #ffffff;
  --input-border:             #e2e8f0;
  --input-border-focus:       var(--color-brand-outline);

  /* Card Spec */
  --card-bg:                  #ffffff;
  --card-border:              #e2e8f0;
  --card-shadow:              0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
  --card-shadow-hover:        0 10px 25px -4px rgba(0, 0, 0, 0.07);
}

/* --------------------------------------------------------------------------
   TIER 2: SEMANTIC TOKENS - DARK THEME (DAZZLE OBSIDIAN PRESTIGE)
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;
  --color-site-background: #09090b;

  /* Canvas & Surface Layers */
  --color-canvas:             var(--color-site-background);
  --color-surface-base:       var(--color-site-background);
  --color-surface-subtle:     #18181b;
  --color-surface-card:       #141417;
  --color-surface-elevated:   #1c1c20;
  --color-surface-sunken:     #0c0c0e;
  --color-surface-glass:      rgba(18, 18, 21, 0.9);

  /* Borders */
  --color-border-subtle:      rgba(255, 255, 255, 0.06);
  --color-border-default:     rgba(255, 255, 255, 0.12);
  --color-border-strong:      rgba(255, 255, 255, 0.2);
  --color-border-brand:       color-mix(in srgb, var(--color-accent) 40%, transparent);

  /* Typography Roles */
  --color-text-primary:       #ffffff;
  --color-text-secondary:     #d1d5db;
  --color-text-muted:         #9ca3af;
  --color-text-subtle:        #6b7280;
  --color-text-inverse:       #09090b;

  /* Brand Semantics */
  --color-accent-text:         var(--color-accent-text-dark);
  --color-accent-outline:      var(--color-accent-outline-dark);
  --color-brand-text:          var(--color-accent-text);
  --color-brand-outline:       var(--color-accent-outline);
  --color-brand-primary:      var(--primitive-brand-500);
  --color-brand-hover:        var(--primitive-brand-600);
  --color-brand-active:       var(--primitive-brand-700);
  --color-brand-subtle:       color-mix(in srgb, var(--color-accent) 15%, transparent);
  --color-brand-contrast:     var(--color-accent-contrast);

  /* State Accents */
  --color-success:            #34d399;
  --color-success-bg:         rgba(16, 185, 129, 0.15);
  --color-warning:            #fbbf24;
  --color-warning-bg:         rgba(245, 158, 11, 0.15);
  --color-danger:             #f87171;
  --color-danger-bg:          rgba(239, 68, 68, 0.15);
  --color-info:               #38bdf8;
  --color-info-bg:            rgba(14, 165, 233, 0.15);

  /* Header & Subnav */
  --header-bg:                var(--color-site-background);
  --header-border:            #18181b;
  --header-text:              #ffffff;

  --subnav-bg:                var(--color-site-background);
  --subnav-border:            #202024;
  --subnav-text:              #cbd5e1;
  --subnav-text-hover:        var(--color-brand-text);

  /* Search & Controls */
  --input-bg:                 rgba(255, 255, 255, 0.06);
  --input-bg-focus:           rgba(255, 255, 255, 0.1);
  --input-border:             rgba(255, 255, 255, 0.1);
  --input-border-focus:       var(--color-brand-outline);

  /* Card Spec */
  --card-bg:                  #141417;
  --card-border:              rgba(255, 255, 255, 0.08);
  --card-shadow:              0 4px 14px rgba(0, 0, 0, 0.4);
  --card-shadow-hover:        0 14px 28px rgba(0, 0, 0, 0.6), 0 0 12px color-mix(in srgb, var(--color-accent) 15%, transparent);

  /* Badge Specimens (dark) */
  --comp-badge-discount-bg:          color-mix(in srgb, var(--color-accent) 16%, transparent);
  --comp-badge-discount-text:        var(--color-brand-text);
  --comp-badge-warranty-bg:          rgba(16, 185, 129, 0.16);
  --comp-badge-warranty-text:        #6ee7b7;
  --comp-badge-stock-bg:             rgba(56, 189, 248, 0.14);
  --comp-badge-stock-text:           #7dd3fc;

  /* Tables, Drawer & Modal Surfaces */
  --comp-table-border:               rgba(255, 255, 255, 0.08);
  --comp-table-row-hover:            rgba(255, 255, 255, 0.04);
  --comp-drawer-shadow:              -16px 0 48px rgba(0, 0, 0, 0.6);
  --comp-modal-shadow:               0 24px 64px rgba(0, 0, 0, 0.6);

  /* Elevation shadows (light defaults are invisible on the dark canvas) */
  --shadow-xs:               0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:               0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-md:               0 4px 14px -2px rgba(0, 0, 0, 0.45);
  --shadow-lg:               0 10px 25px -4px rgba(0, 0, 0, 0.5);
  --shadow-xl:               0 20px 40px -8px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   TIER 3: COMPONENT TOKENS
   -------------------------------------------------------------------------- */
:root {
  --comp-product-card-radius:        var(--radius-lg);
  --comp-product-card-bg:            var(--card-bg);
  --comp-product-card-border:        var(--card-border);
  --comp-product-card-padding:       var(--space-4);
  --comp-product-card-shadow:        var(--card-shadow);
  --comp-product-card-shadow-hover:  var(--card-shadow-hover);
  --comp-product-card-img-height:    220px;

  --comp-price-cash-color:           var(--color-brand-text);
  --comp-price-cash-size:            1.25rem;
  --comp-price-cash-weight:          700;
  --comp-price-regular-color:        var(--color-text-muted);
  --comp-price-regular-size:         0.8125rem;

  --comp-btn-radius:                 var(--radius-full);
  --comp-btn-primary-bg:             var(--color-brand-primary);
  --comp-btn-primary-text:           var(--color-brand-contrast);
  --comp-btn-primary-hover:          var(--color-brand-hover);

  /* Badge Specimens (light) */
  --comp-badge-discount-bg:          var(--primitive-brand-50);
  --comp-badge-discount-text:        var(--color-brand-text);
  --comp-badge-warranty-bg:          #ecfdf5;
  --comp-badge-warranty-text:        #047857;
  --comp-badge-stock-bg:             #e0f2fe;
  --comp-badge-stock-text:           #075985;

  /* Tables, Drawer & Modal Surfaces */
  --comp-table-border:               var(--color-border-subtle);
  --comp-table-row-hover:            #f8fafc;
  --comp-drawer-shadow:              -16px 0 48px rgba(15, 23, 42, 0.14);
  --comp-modal-shadow:               var(--shadow-xl);

  --comp-drawer-bg:                  var(--color-surface-base);
  --comp-drawer-border:              var(--color-border-default);
  --comp-modal-bg:                   var(--color-surface-elevated);
  --comp-modal-border:               var(--color-border-default);
}