/* ==========================================================================
   TurbonX BD — Design tokens
   One monochrome system. Light is the default; dark overrides follow.
   JS sets [data-theme] on <html>; when absent the OS preference wins.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Brand / surface (light) ------------------------------------------- */
  --bg-primary:      #ffffff;
  --bg-secondary:    #f4f4f4;
  --surface:         #ffffff;
  --surface-raised:  #ffffff;
  --surface-sunken:  #f0f0f0;
  --media-bg:        #f1f1f1;   /* product image wells — constant in both themes */

  --text-primary:    #050505;
  --text-secondary:  #6b6b6b;
  --text-tertiary:   #9a9a9a;
  --text-inverse:    #ffffff;

  --border:          rgba(5, 5, 5, 0.14);
  --border-strong:   rgba(5, 5, 5, 0.30);
  --border-faint:    rgba(5, 5, 5, 0.07);

  --button-bg:       #050505;
  --button-text:     #ffffff;
  --button-bg-alt:   #ffffff;
  --button-text-alt: #050505;

  --overlay:         rgba(5, 5, 5, 0.5);
  --scrim:           rgba(255, 255, 255, 0.72);

  --shadow-1: 0 1px 2px rgba(5, 5, 5, 0.06), 0 2px 8px rgba(5, 5, 5, 0.05);
  --shadow-2: 0 12px 40px rgba(5, 5, 5, 0.14);
  --shadow-pop: 0 24px 70px rgba(5, 5, 5, 0.18);

  /* --- Functional (used sparingly, never decoratively) ------------------- */
  --danger:   #c8453a;
  --danger-bg: rgba(200, 69, 58, 0.10);
  --success:  #050505;   /* success reads through inversion, not colour */
  --pay-full: #6d28d9;      /* checkout payment cards: one calm accent per way of paying */
  --pay-delivery: #0f766e;
  --pay-tax: #b45309;       /* a VAT/tax surcharge on the delivery charge — a warning amber, deliberately not the discount teal */

  /* --- Typography -----------------------------------------------------
     One superfamily (Archivo variable: weight 400–800, width 75–125%).
     Display = the 125% width cut; text = normal width. Hind Siliguri
     carries Bengali and the ৳ sign; system-ui is the offline fallback. */
  --font-display: "Archivo", "Hind Siliguri", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-text:    "Archivo", "Hind Siliguri", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-bangla:  "Hind Siliguri", "Archivo", system-ui, "Segoe UI", Roboto, sans-serif;

  /* Fluid modular scale — ~1.2 mobile easing to ~1.26 desktop */
  --step--2: clamp(0.69rem, 0.67rem + 0.10vw, 0.75rem);
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.18vw, 1.02rem);
  --step-1:  clamp(1.13rem, 1.06rem + 0.36vw, 1.35rem);
  --step-2:  clamp(1.35rem, 1.22rem + 0.66vw, 1.80rem);
  --step-3:  clamp(1.62rem, 1.39rem + 1.16vw, 2.40rem);
  --step-4:  clamp(1.94rem, 1.55rem + 1.95vw, 3.20rem);
  --step-5:  clamp(2.33rem, 1.68rem + 3.24vw, 4.27rem);
  --step-6:  clamp(2.80rem, 1.71rem + 5.43vw, 5.69rem);
  --step-7:  clamp(3.20rem, 1.35rem + 9.25vw, 8.00rem);

  --leading-tight: 1.04;
  --leading-snug:  1.22;
  --leading-body:  1.6;
  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-wide:    0.06em;

  /* --- Spacing scale (4px base) --------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;    --sp-11: 12rem;

  /* --- Radius (tight = considered, not childish) ---------------------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* --- Layout ------------------------------------------------------- */
  --container: 1320px;
  --container-narrow: 920px;
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 4rem);
  --header-h: 68px;
  --header-h-scrolled: 58px;
  --announce-h: 34px;

  /* --- Motion ------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
  --dur-4: 560ms;

  /* --- Stacking ---------------------------------------------------- */
  --z-header: 100;
  --z-backtop: 200;
  --z-pet: 250;
  --z-overlay: 900;
  --z-drawer: 950;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* Dark — follow OS unless the user has explicitly chosen light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg-primary:      #000000;
    --bg-secondary:    #000000;
    --surface:         #0b0b0b;
    --surface-raised:  #161616;
    --surface-sunken:  #0a0a0a;
    --media-bg:        #f1f1f1;

    --text-primary:    #ffffff;
    --text-secondary:  #8f8f8f;
    --text-tertiary:   #5f5f5f;
    --text-inverse:    #050505;

    --border:          rgba(255, 255, 255, 0.15);
    --border-strong:   rgba(255, 255, 255, 0.34);
    --border-faint:    rgba(255, 255, 255, 0.08);

    --button-bg:       #ffffff;
    --button-text:     #050505;
    --button-bg-alt:   #000000;
    --button-text-alt: #ffffff;

    --overlay:         rgba(0, 0, 0, 0.66);
    --scrim:           rgba(0, 0, 0, 0.72);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-pop: 0 30px 80px rgba(0, 0, 0, 0.75);

    --danger:   #e2685d;
    --danger-bg: rgba(226, 104, 93, 0.14);
    --pay-full: #a78bfa;
    --pay-delivery: #2dd4bf;
    --pay-tax: #fbbf24;
  }
}

/* Dark — explicit user choice, wins over everything */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-primary:      #000000;
  --bg-secondary:    #000000;
  --surface:         #0b0b0b;
  --surface-raised:  #161616;
  --surface-sunken:  #0a0a0a;
  --media-bg:        #f1f1f1;

  --text-primary:    #ffffff;
  --text-secondary:  #8f8f8f;
  --text-tertiary:   #5f5f5f;
  --text-inverse:    #050505;

  --border:          rgba(255, 255, 255, 0.15);
  --border-strong:   rgba(255, 255, 255, 0.34);
  --border-faint:    rgba(255, 255, 255, 0.08);

  --button-bg:       #ffffff;
  --button-text:     #050505;
  --button-bg-alt:   #000000;
  --button-text-alt: #ffffff;

  --overlay:         rgba(0, 0, 0, 0.66);
  --scrim:           rgba(0, 0, 0, 0.72);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 16px 48px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 30px 80px rgba(0, 0, 0, 0.75);

  --danger:   #e2685d;
  --danger-bg: rgba(226, 104, 93, 0.14);
  --pay-full: #a78bfa;
  --pay-delivery: #2dd4bf;
  --pay-tax: #fbbf24;
}

/* Light — explicit user choice */
:root[data-theme="light"] {
  color-scheme: light;
}