/* ============================================================
   NANOBIT — DESIGN SYSTEM TOKENS & BASE ARCHITECTURE
   Single source of truth for nanobit.com.bd.
   Ported verbatim from nanobit-design-system.html :root block.
   ============================================================ */

:root {
  /* — Color: neutrals (warm graphite, not cool) — */
  --color-ink: #191512;
  --color-ink-soft: #55504b;
  --color-ink-faint: #948d85; /* DECORATION ONLY — 3.28:1, never text */
  --color-ink-muted: #736c64; /* small muted TEXT — 5.17:1 AA */
  --color-base: #f6f4f1;
  --color-surface: #ffffff;
  --color-surface-alt: #ece8e3;
  --color-border: #e2ddd6;
  --color-border-strong: #c9c2b8;

  /* — Color: brand (Signal Orange) —
     RULE: --color-brand is an IDENTITY fill. It never sits behind white text
     (white on #FF5A1F = 3.12:1, fails WCAG AA). White-text buttons use
     --color-brand-cta. Orange TEXT on light backgrounds uses --color-brand-text. */
  --color-brand: #ff5a1f; /* identity fill, ink text only, 9.3:1 with ink */
  --color-brand-cta: #c93a0a; /* primary button fill — white text 5.13:1 AA */
  --color-brand-cta-hover: #b93a0c; /* hover — 5.72:1 */
  --color-brand-cta-press: #a83208; /* active — 6.72:1 */
  --color-brand-text: #b93a0c; /* orange text/links on base — 5.21:1 AA */
  --color-brand-on-soft: #a83208; /* icon/text on --color-brand-soft — 5.71:1 */
  --color-brand-strong: #c93a0a; /* legacy alias -> cta */
  --color-brand-deep: #b93a0c; /* legacy alias -> cta-hover */
  --color-brand-soft: #ffe8dc;

  /* — Color: accent (Circuit — precision, focus, used sparingly) — */
  --color-accent: #2dd4c7; /* fill only, ink text on it — 9.81:1 */
  --color-accent-strong: #0b7a72; /* text-safe on light fills — 5.20:1 */
  --color-accent-soft: #d9f7f3;

  /* — Color: semantic (all text values AA on Surface and Base) — */
  --color-success: #0f7040; /* 6.15:1 on white */
  --color-success-dot: #1c8a52; /* non-text dot / fill only */
  --color-success-soft: #dff3e7;
  --color-warning: #8a5b00; /* 5.87:1 on white */
  --color-warning-dot: #b4790a; /* non-text dot / fill only */
  --color-warning-soft: #fbefd6;
  --color-danger: #d1392b; /* fill, white text 4.85:1 */
  --color-danger-text: #ac2c21; /* danger as TEXT on light */
  --color-danger-strong: #ac2c21;
  --color-danger-soft: #fae1de;
  --color-info: #2d6fb0;
  --color-info-soft: #e3eef8;

  /* — Color: ON-DARK scale (Ink hero + Ink footer) — */
  --color-on-dark: #faf8f6; /* headings on Ink — warm, never pure #fff */
  --color-on-dark-soft: #b8b2aa; /* body copy on Ink — 8.63:1 */
  --color-on-dark-muted: #9c958d; /* captions/meta on Ink — 6.13:1 (min allowed) */
  --color-on-dark-border: rgba(250, 248, 246, 0.14);
  --color-on-dark-fill: rgba(250, 248, 246, 0.06);

  /* — Typography — */
  --font-display:
    "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif; /* headlines, prices */
  --font-ui:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* everything functional */
  --font-mono:
    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    monospace; /* specs: capacity, speed, power */

  --fs-display: 3.25rem;
  --lh-display: 1.08;
  --fs-h1: 2.25rem;
  --lh-h1: 1.15;
  --fs-h2: 1.75rem;
  --lh-h2: 1.25;
  --fs-h3: 1.3rem;
  --lh-h3: 1.35;
  --fs-h4: 1.05rem;
  --lh-h4: 1.4;
  --fs-body-lg: 1.0625rem;
  --lh-body-lg: 1.6;
  --fs-body: 0.9375rem;
  --lh-body: 1.6;
  --fs-label: 0.8125rem;
  --lh-label: 1.4;
  --fs-caption: 0.75rem;
  --lh-caption: 1.4;

  /* — 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-7: 2rem; /* 32px */
  --space-8: 2.5rem; /* 40px */
  --space-9: 3.5rem; /* 56px */
  --space-10: 5rem; /* 80px */
  --space-11: 7.5rem; /* 120px */

  /* — Radius scale (precision-tool feel) — */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 999px;
  --radius-button: 8px;
  --radius-input: 8px;

  /* — Elevation (warm-tinted from ink) — */
  --shadow-sm: 0 1px 2px rgba(25, 21, 18, 0.08);
  --shadow-md: 0 8px 24px rgba(25, 21, 18, 0.1);
  --shadow-lg: 0 20px 56px rgba(25, 21, 18, 0.16);
  --shadow-xl: 0 32px 88px rgba(25, 21, 18, 0.22);
  --ring-focus: none;
  --ring-focus-danger: 0 0 0 3px rgba(209, 57, 43, 0.28);

  /* — Motion — */
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --dur-deliberate: 480ms;

  /* — Layout & Breakpoints documentation values — */
  --wrap: 1240px;
  --wrap-pad: 32px;
  --content-max: 900px;
  --sidebar-w: 264px;
  --header-h: 67px;
  --tap-min: 44px;

  --bp-laptop: 1180px;
  --bp-tablet: 980px;
  --bp-phone-lg: 760px;
  --bp-phone: 520px;

  /* — Universal Compatibility & Legacy Token Aliases — */
  --color-primary: var(--color-brand-cta);
  --color-primary-hover: var(--color-brand-cta-hover);
  --color-primary-soft: var(--color-brand-soft);
  --color-primary-subtle: var(--color-brand-soft);
  --color-primary-light: var(--color-brand-soft);
  --color-on-primary: #ffffff;
  --color-text: var(--color-ink);
  --color-text-soft: var(--color-ink-soft);
  --color-text-muted: var(--color-ink-muted);
  --color-surface-subtle: var(--color-base);
  --color-border-subtle: var(--color-border);
  --radius-card: var(--radius-xl);
  --radius-base: var(--radius-input);
  --font-size-base: var(--fs-body);
  --font-size-sm: var(--fs-label);
  --font-size-xs: var(--fs-caption);
  --font-size-lg: var(--fs-body-lg);
}

/* ============================================================
   GLOBAL RESET & BASE STYLES
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

*:focus,
*:focus-visible,
*:active {
  outline: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-base);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft);
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-brand-text);
}

:focus-visible,
:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ============================================================
   CONTAINER & LAYOUT UTILITIES
   ============================================================ */

.wrap,
.container {
  width: 100%;
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--wrap-pad);
  padding-right: var(--wrap-pad);
}

@media (max-width: 760px) {
  :root {
    --wrap-pad: 20px;
  }
}

@media (max-width: 520px) {
  :root {
    --wrap-pad: 16px;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 1000;
  background: var(--color-ink);
  color: var(--color-on-dark);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-button);
  font-weight: 600;
  font-size: var(--fs-label);
  transition: top var(--dur-fast) var(--ease-soft);
}

.skip-link:focus {
  top: 16px;
  outline: none;
  box-shadow: var(--ring-focus);
}

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

.font-display {
  font-family: var(--font-display);
}
.font-ui {
  font-family: var(--font-ui);
}
.font-mono {
  font-family: var(--font-mono);
}

h1,
.h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}

h2,
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

h3,
.h3 {
  font-family: var(--font-ui);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
  color: var(--color-ink);
}

h4,
.h4 {
  font-family: var(--font-ui);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 600;
  color: var(--color-ink);
}

.text-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.text-body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
}

.text-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.text-label {
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}

.text-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}

.text-muted {
  color: var(--color-ink-muted);
}

.text-soft {
  color: var(--color-ink-soft);
}

.text-brand {
  color: var(--color-brand-text);
}

.text-accent {
  color: var(--color-accent-strong);
}

code,
.code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  color: var(--color-brand-text);
}

/* ============================================================
   BUTTONS COMPONENT (DESIGN SYSTEM TOKEN COMPLIANT)
   ============================================================ */

.btn {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0;
  border-radius: var(--radius-button);
  border: 1.5px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  min-height: var(--tap-min);
  transition:
    background var(--dur-base) var(--ease-soft),
    border-color var(--dur-base) var(--ease-soft),
    color var(--dur-base) var(--ease-soft),
    box-shadow var(--dur-base) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

.btn-md {
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
}

.btn-sm {
  height: 32px;
  min-height: 32px;
  padding: 0 14px;
  font-size: 13px;
}

.btn-lg {
  height: 48px;
  padding: 0 28px;
  font-size: 15px;
}

.btn-block {
  width: 100%;
}

.btn-primary {
  background: var(--color-brand-cta);
  color: var(--color-on-dark);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--color-brand-cta-hover);
  color: var(--color-on-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-primary:active,
.btn-primary.is-active {
  background: var(--color-brand-cta-press);
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
}

.btn-primary:disabled,
.btn-primary.is-disabled {
  background: var(--color-brand-cta);
  opacity: 0.38;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.btn-secondary {
  background: transparent;
  color: var(--color-brand-text);
  border-color: var(--color-brand-cta);
}

.btn-secondary:hover {
  background: var(--color-brand-soft);
  border-color: var(--color-brand-cta);
  color: var(--color-brand-text);
}

.btn-secondary:active,
.btn-secondary.is-active {
  background: #ffd2b8;
  border-color: var(--color-brand-cta-press);
}

.btn-secondary:disabled,
.btn-secondary.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-ghost {
  background: transparent;
  color: var(--color-ink-soft);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--color-surface-alt);
  color: var(--color-ink);
}

.btn-ghost:active,
.btn-ghost.is-active {
  background: var(--color-border);
}

.btn-ghost:disabled,
.btn-ghost.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-danger {
  background: var(--color-danger);
  color: var(--color-on-dark);
  box-shadow: var(--shadow-sm);
}

.btn-danger:hover {
  background: var(--color-danger-strong);
  color: var(--color-on-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-danger:active,
.btn-danger.is-active {
  background: #8a2219;
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
}

.btn-danger:disabled,
.btn-danger.is-disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   FORM CONTROLS & INPUTS
   ============================================================ */

.field,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
  height: 40px;
  border-radius: var(--radius-input);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  padding: 0 14px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--color-ink);
  width: 100%;
  transition:
    border-color var(--dur-base) var(--ease-soft),
    box-shadow var(--dur-base) var(--ease-soft),
    background var(--dur-base) var(--ease-soft);
}

textarea {
  height: auto;
  min-height: 100px;
  padding: 10px 14px;
}

.field::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--color-ink-faint);
}

.field:hover,
input:hover,
textarea:hover,
select:hover {
  border-color: var(--color-ink-faint);
}

.field:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--ring-focus);
}

.field.err,
input.err,
textarea.err {
  border-color: var(--color-danger);
}

.field.err:focus,
input.err:focus,
textarea.err:focus {
  box-shadow: var(--ring-focus-danger);
}

.field:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  background: var(--color-surface-alt);
  color: var(--color-ink-faint);
  cursor: not-allowed;
}

.form-label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.form-hint {
  font-size: 12px;
  color: var(--color-ink-muted);
  margin-top: var(--space-1);
}

.form-hint.err {
  color: var(--color-danger-text);
}

/* ============================================================
   BADGES & PILLS
   ============================================================ */

.badge,
.product-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.badge-brand {
  background: var(--color-brand-soft);
  color: var(--color-brand-on-soft);
}
.badge-accent {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}
.badge-success {
  background: var(--color-success-soft);
  color: var(--color-success);
}
.badge-warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}
.badge-danger {
  background: var(--color-danger-soft);
  color: var(--color-danger-text);
}
.badge-info {
  background: var(--color-info-soft);
  color: var(--color-info);
}

.badge-sale {
  background: var(--color-danger);
  color: var(--color-on-dark);
  font-weight: 700;
}
.badge-new {
  background: var(--color-ink);
  color: var(--color-accent);
  font-weight: 700;
}
.badge-dark {
  background: var(--color-ink);
  color: var(--color-on-dark);
}

/* ============================================================
   STOCK INDICATOR
   ============================================================ */

.stock-status {
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.stock-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
}

.stock-status.in-stock,
.stock-status--in {
  color: var(--color-success);
}
.stock-status.in-stock::before,
.stock-status--in::before {
  background: var(--color-success-dot);
}

.stock-status.low-stock,
.stock-status--low {
  color: var(--color-warning);
}
.stock-status.low-stock::before,
.stock-status--low::before {
  background: var(--color-warning-dot);
}

.stock-status.out-of-stock,
.stock-status--out {
  color: var(--color-ink-muted);
}
.stock-status.out-of-stock::before,
.stock-status--out::before {
  background: var(--color-ink-faint);
}

/* ============================================================
   PRICE FORMATTING
   ============================================================ */

.product-price,
.price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}

.price-now,
.price ins,
.price .amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--color-ink);
  text-decoration: none;
}

.price-was,
.price del,
.price del .amount {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-ink-muted);
  text-decoration: line-through;
  font-weight: 400;
}

/* ============================================================
   SVG ICON BASELINE
   ============================================================ */

.nb-icon,
.i {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -3px;
  flex-shrink: 0;
}

.nb-icon svg,
.i svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}