/* PharmaWeb design tokens — Direction A "Clinical calm"
 * Source of truth: design_directions/README.md (Oct 2026).
 * Legacy --pw-*, --primary/--surface, and --pdp-* surfaces alias here. */

:root {
  color-scheme: light dark;

  /* —— Light (Direction A) —— */
  --c-bg: #F3F7F5;
  --c-surface: #FFFFFF;
  --c-surface-2: #EEF4F1;
  --c-surface-3: #E4EDE9;
  --c-raised: #FFFFFF;
  --c-surface-pop: #FFFFFF;
  --c-border: #E2EAE6;
  --c-border-strong: #C9D6D0;
  --c-text-strong: #0E1D18;
  --c-text: #1B2A25;
  --c-text-2: #475952;
  --c-text-3: #586963;
  --c-brand: #047857;
  --c-brand-hover: #03664A;
  --c-brand-subtle: #E2F3EB;
  --c-on-brand-subtle: #03694C;
  --c-on-brand: #FFFFFF;
  --c-brand-text: #03694C;
  --c-accent: #5B46C2;
  --c-accent-hover: #4B37B0;
  --c-accent-subtle: #EFECFC;
  --c-on-accent-subtle: #4B37B0;
  --c-accent-text: #4B37B0;
  --c-on-accent: #FFFFFF;
  --c-success: #16A34A;
  --c-success-subtle: #E4F6EA;
  --c-success-text: #11743A;
  --c-warning: #B45309;
  --c-warning-subtle: #FDF0D5;
  --c-danger: #C0283A;
  --c-danger-subtle: #FDE7E4;
  --c-info: #2563EB;
  --c-info-subtle: #DBEAFE;
  --c-focus-ring: rgba(4, 120, 87, 0.16);
  --c-focus: #047857;
  --c-star: #F2A516;
  --c-photo-well: #EEF4F1;
  --c-photo-well-edge: #E2EAE6;
  --c-overlay: rgba(14, 29, 24, 0.36);
  --c-shadow-1: 0 1px 2px rgba(15, 45, 35, 0.04), 0 4px 14px -4px rgba(15, 45, 35, 0.06);
  --c-shadow-2: 0 2px 6px rgba(15, 45, 35, 0.04), 0 16px 36px -10px rgba(15, 45, 35, 0.12);
  --c-shadow-3: 0 32px 72px -16px rgba(15, 45, 35, 0.28);
  --c-hairline: transparent;
  --c-hero-from: #DDF1E6;
  --c-hero-to: #F3F7F5;
  --c-orb: #CFEBDD;
  --c-hero-glow: radial-gradient(1200px 600px at 85% -10%, #E3F3EA 0, transparent 60%);
  --c-cta-gradient: var(--c-brand);
  --c-cta-shadow: 0 8px 20px -8px rgba(4, 120, 87, 0.55);
  --c-brand-rgb: 4, 120, 87;
  --c-accent-rgb: 91, 70, 194;
  --c-theme-color: #F3F7F5;
  --c-hdr-bg: rgba(243, 247, 245, 0.82);
  --c-hdr-solid: #F3F7F5;
  --c-hdr-border: rgba(14, 29, 24, 0.06);
  --c-search-shadow: 0 2px 4px rgba(15, 45, 35, 0.04), 0 20px 40px -16px rgba(4, 120, 87, 0.22);
  --c-chip-on-bg: #0E1D18;
  --c-chip-on-c: #FFFFFF;
  --c-qadd-bg: var(--c-brand);
  --c-qadd-c: #FFFFFF;
  --c-fav-bg: rgba(255, 255, 255, 0.85);
  --c-fav-c: #475952;
  --c-card-shadow: var(--c-shadow-1);
  --c-card-pad: 8px;

  /* Spacing — 8px grid */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* Radii — Direction A */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-card: 24px;
  --r-well: 18px;
  --r-btn: 14px;
  --r-search: 20px;
  --r-chip: 8px;
  --r-ib: 12px;
  --r-qadd: 12px;
  --r-fchip: 999px;
  --r-gallery: 28px;
  --r-pill: 999px;

  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --tap: 44px;

  /* Type scale */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-3xl: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --lh-body: 1.75;
  --lh-body-fa: 1.8;
  --lh-heading: 1.35;
  --fw-regular: 400;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --font-fa: "Vazirmatn", system-ui, sans-serif;
  --font-latin: "Inter", system-ui, sans-serif;
  --font-display: "Inter", "Vazirmatn", system-ui, sans-serif;
  --font-num: "Inter", "Vazirmatn", system-ui, sans-serif;

  /* Layout */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;
  --container-xl: 1280px;
  /* Match .da-header-inner: 55px mobile / 63px desktop */
  --header-h: 63px;
  --header-h-mobile: 55px;

  --card-1-bg: var(--c-raised);
  --card-1-border: 1px solid transparent;
  --card-1-radius: var(--r-card);
  --card-1-shadow: var(--c-card-shadow);
  --card-2-bg: var(--c-surface-2);
  --card-2-border: 1px solid transparent;
  --card-2-radius: var(--r-md);
  --card-2-shadow: none;

  --c-badge-stock-bg: var(--c-success-subtle);
  --c-badge-stock-fg: var(--c-success-text);
  --c-badge-cold-bg: var(--c-info-subtle);
  --c-badge-cold-fg: var(--c-info);
  --c-badge-new-bg: var(--c-accent-subtle);
  --c-badge-new-fg: var(--c-on-accent-subtle);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #0B1411;
  --c-surface: #121D19;
  --c-surface-2: #192722;
  --c-surface-3: #21322C;
  --c-raised: #121D19;
  --c-surface-pop: #16231F;
  --c-border: #22322C;
  --c-border-strong: #304540;
  --c-text-strong: #F3F8F6;
  --c-text: #E3ECE8;
  --c-text-2: #A8B9B2;
  --c-text-3: #8A9C95;
  --c-brand: #2BB383;
  --c-brand-hover: #35C590;
  --c-brand-subtle: #15322A;
  --c-on-brand-subtle: #4FCD9F;
  --c-on-brand: #03140D;
  --c-brand-text: #4FCD9F;
  --c-accent: #A89CF7;
  --c-accent-hover: #C4BBFF;
  --c-accent-subtle: #25203F;
  --c-on-accent-subtle: #C4BBFF;
  --c-accent-text: #C4BBFF;
  --c-on-accent: #17113A;
  --c-success: #3DD68C;
  --c-success-subtle: #123126;
  --c-success-text: #5BE0A0;
  --c-warning: #B45309;
  --c-warning-subtle: #3A2A0C;
  --c-danger: #C0283A;
  --c-danger-subtle: #3B1714;
  --c-info: #2563EB;
  --c-info-subtle: #1A2F4A;
  --c-focus-ring: rgba(43, 179, 131, 0.22);
  --c-focus: #2BB383;
  --c-star: #F5B32F;
  /* Dark well: elevated from page bg, not a light grey slab behind product photos. */
  --c-photo-well: #15241F;
  --c-photo-well-edge: #2A3D36;
  --c-overlay: rgba(0, 0, 0, 0.55);
  --c-shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 6px 18px -6px rgba(0, 0, 0, 0.5);
  --c-shadow-2: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
  --c-shadow-3: 0 32px 80px -16px rgba(0, 0, 0, 0.75);
  --c-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --c-hero-from: #0F2620;
  --c-hero-to: #0B1411;
  --c-orb: #123A2D;
  --c-hero-glow: radial-gradient(1200px 600px at 85% -10%, #10241D 0, transparent 60%);
  --c-cta-gradient: var(--c-brand);
  --c-cta-shadow: 0 8px 24px -8px rgba(43, 179, 131, 0.5);
  --c-brand-rgb: 43, 179, 131;
  --c-accent-rgb: 168, 156, 247;
  --c-theme-color: #0B1411;
  --c-hdr-bg: rgba(11, 20, 17, 0.8);
  --c-hdr-solid: #0B1411;
  --c-hdr-border: rgba(255, 255, 255, 0.06);
  --c-search-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.6);
  --c-chip-on-bg: #E3ECE8;
  --c-chip-on-c: #0B1411;
  --c-qadd-c: #03140D;
  --c-fav-bg: rgba(255, 255, 255, 0.75);
  --c-fav-c: #2C3B35;
  --c-card-border: #1C2A25;
}

/* Prefer OS dark only when no explicit data-theme yet */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --c-bg: #0B1411;
    --c-surface: #121D19;
    --c-surface-2: #192722;
    --c-surface-3: #21322C;
    --c-raised: #121D19;
    --c-surface-pop: #16231F;
    --c-border: #22322C;
    --c-border-strong: #304540;
    --c-text-strong: #F3F8F6;
    --c-text: #E3ECE8;
    --c-text-2: #A8B9B2;
    --c-text-3: #8A9C95;
    --c-brand: #2BB383;
    --c-brand-hover: #35C590;
    --c-brand-subtle: #15322A;
    --c-on-brand-subtle: #4FCD9F;
    --c-on-brand: #03140D;
    --c-brand-text: #4FCD9F;
    --c-accent: #A89CF7;
    --c-accent-hover: #C4BBFF;
    --c-accent-subtle: #25203F;
    --c-on-accent-subtle: #C4BBFF;
    --c-accent-text: #C4BBFF;
    --c-on-accent: #17113A;
    --c-success: #3DD68C;
    --c-success-subtle: #123126;
    --c-success-text: #5BE0A0;
    --c-warning: #B45309;
    --c-warning-subtle: #3A2A0C;
    --c-danger: #C0283A;
    --c-danger-subtle: #3B1714;
    --c-info: #2563EB;
    --c-info-subtle: #1A2F4A;
    --c-focus-ring: rgba(43, 179, 131, 0.22);
    --c-focus: #2BB383;
    --c-star: #F5B32F;
    --c-photo-well: #15241F;
    --c-photo-well-edge: #2A3D36;
    --c-overlay: rgba(0, 0, 0, 0.55);
    --c-shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 6px 18px -6px rgba(0, 0, 0, 0.5);
    --c-shadow-2: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
    --c-shadow-3: 0 32px 80px -16px rgba(0, 0, 0, 0.75);
    --c-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    --c-hero-from: #0F2620;
    --c-hero-to: #0B1411;
    --c-orb: #123A2D;
    --c-hero-glow: radial-gradient(1200px 600px at 85% -10%, #10241D 0, transparent 60%);
    --c-cta-gradient: var(--c-brand);
    --c-cta-shadow: 0 8px 24px -8px rgba(43, 179, 131, 0.5);
    --c-brand-rgb: 43, 179, 131;
    --c-accent-rgb: 168, 156, 247;
    --c-theme-color: #0B1411;
    --c-hdr-bg: rgba(11, 20, 17, 0.8);
    --c-hdr-solid: #0B1411;
    --c-hdr-border: rgba(255, 255, 255, 0.06);
    --c-search-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.6);
    --c-chip-on-bg: #E3ECE8;
    --c-chip-on-c: #0B1411;
    --c-qadd-c: #03140D;
    --c-fav-bg: rgba(255, 255, 255, 0.75);
    --c-fav-c: #2C3B35;
    --c-card-border: #1C2A25;
  }
}

/* —— Legacy aliases —— */
:root, html[data-theme="light"], html[data-theme="dark"], html:not([data-theme]) {
  --pw-bg: var(--c-bg);
  --pw-bg-alt: var(--c-surface-2);
  --pw-surface: var(--c-surface);
  --pw-surface-alt: var(--c-surface-2);
  --pw-surface-raised: var(--c-surface);
  --pw-overlay: var(--c-overlay);
  --pw-text: var(--c-text);
  --pw-text-2: var(--c-text-2);
  --pw-text-3: var(--c-text-3);
  --pw-text-4: var(--c-text-3);
  --pw-brand: var(--c-brand);
  --pw-brand-hover: var(--c-brand-hover);
  --pw-brand-light: var(--c-brand-subtle);
  --pw-brand-50: var(--c-brand-subtle);
  --pw-brand-rgb: var(--c-brand-rgb);
  --pw-accent: var(--c-accent);
  --pw-accent-hover: var(--c-accent);
  --pw-accent-light: var(--c-accent-subtle);
  --pw-success: var(--c-success);
  --pw-success-light: var(--c-success-subtle);
  --pw-danger: var(--c-danger);
  --pw-danger-light: var(--c-danger-subtle);
  --pw-warning: var(--c-warning);
  --pw-info: var(--c-info);
  --pw-border: var(--c-border);
  --pw-border-hover: var(--c-border-strong);
  --pw-border-focus: var(--c-focus);
  --pw-shadow-xs: var(--c-shadow-1);
  --pw-shadow-sm: var(--c-shadow-1);
  --pw-shadow-md: var(--c-shadow-2);
  --pw-shadow-lg: var(--c-shadow-3);
  --pw-shadow-xl: var(--c-shadow-3);
  --pw-shadow-brand: var(--c-cta-shadow);
  --pw-sp-1: var(--sp-1); --pw-sp-2: var(--sp-2); --pw-sp-3: var(--sp-3);
  --pw-sp-4: var(--sp-4); --pw-sp-5: var(--sp-5); --pw-sp-6: var(--sp-6);
  --pw-sp-8: var(--sp-8); --pw-sp-10: var(--sp-10); --pw-sp-12: var(--sp-12);
  --pw-sp-16: var(--sp-16);
  --pw-r-sm: var(--r-sm); --pw-r-md: var(--r-md); --pw-r-lg: var(--r-lg);
  --pw-r-xl: var(--r-xl); --pw-r-2xl: var(--r-xl); --pw-r-pill: var(--r-pill);
  --pw-dur-fast: var(--dur-1); --pw-dur-normal: var(--dur-2); --pw-dur-slow: var(--dur-3);
  --pw-ease-out: var(--ease-out);
  --pw-touch-min: var(--tap);

  --primary: var(--c-brand);
  --primary-dark: var(--c-brand-hover);
  --primary-light: var(--c-brand-subtle);
  --primary-50: var(--c-brand-subtle);
  --secondary: var(--c-accent);
  --secondary-light: var(--c-accent-subtle);
  --accent: var(--c-brand);
  --success: var(--c-success);
  --warning: var(--c-warning);
  --danger: var(--c-danger);
  --muted: var(--c-text-3);
  --text-primary: var(--c-text);
  --text-secondary: var(--c-text-2);
  --bg-warm: var(--c-bg);
  --bg-warm-alt: var(--c-surface-2);
  --surface: var(--c-surface);
  --glass: color-mix(in srgb, var(--c-surface) 92%, transparent);
  --glass-warm: color-mix(in srgb, var(--c-surface) 95%, transparent);
  --border: var(--c-border);
  --shadow-soft: var(--c-shadow-2);
  --shadow-glow: 0 0 40px -8px rgba(var(--c-brand-rgb), 0.15);
  --card-radius: var(--r-card);

  --pdp-paper: var(--c-bg);
  --pdp-paper-2: var(--c-surface-2);
  --pdp-canvas: var(--c-surface);
  --pdp-ink: var(--c-text);
  --pdp-ink-2: var(--c-text-2);
  --pdp-ink-3: var(--c-text-3);
  --pdp-ink-4: var(--c-border-strong);
  --pdp-brass: var(--c-brand);
  --pdp-brass-hover: var(--c-brand-hover);
  --pdp-emerald: var(--c-brand);
  --pdp-emerald-2: var(--c-brand-hover);
  --pdp-emerald-soft: var(--c-brand-subtle);
  --pdp-vermilion: var(--c-danger);
  --pdp-vermilion-soft: var(--c-danger-subtle);
  --pdp-hairline: var(--c-border);
  --pdp-hairline-strong: var(--c-border-strong);

  --store-paper: var(--c-bg);
}

html, body {
  background-color: var(--c-bg);
  color: var(--c-text);
}

.bg-white { background-color: var(--c-surface) !important; }
.bg-light { background-color: var(--c-surface-2) !important; }
.card, .modal-content, .dropdown-menu, .list-group-item {
  background-color: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border);
}
.form-control, .form-select, .input-group-text {
  background-color: var(--c-surface-2);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}
.form-control:focus, .form-select:focus {
  background-color: var(--c-surface);
  border-color: var(--c-brand);
  box-shadow: 0 0 0 4px var(--c-focus-ring);
}
.table { background: var(--c-surface); color: var(--c-text); }
.toast, .alert {
  background-color: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border);
}
.alert-success { background: var(--c-brand-subtle); color: var(--c-on-brand-subtle); border-color: var(--c-brand); }
.alert-danger, .alert-warning { background: var(--c-danger-subtle); color: var(--c-text); border-color: var(--c-danger); }
.alert-warning { background: var(--c-warning-subtle); border-color: var(--c-warning); }
.alert-info { background: var(--c-brand-subtle); color: var(--c-text); border-color: var(--c-info); }

.text-muted { color: var(--c-text-3) !important; }
a { color: var(--c-brand-text); }
a:hover { color: var(--c-brand-hover); }

.btn-primary {
  background-color: var(--c-brand) !important;
  border-color: var(--c-brand) !important;
  color: var(--c-on-brand) !important;
  box-shadow: var(--c-cta-shadow);
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--c-brand-hover) !important;
  border-color: var(--c-brand-hover) !important;
  color: var(--c-on-brand) !important;
}

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

/* Product photos on tinted wells (Direction A --well) */
.product-image-container,
.product-card .product-image-container,
.product-image-wrapper,
.pdp-gallery,
.pdp-gallery-main,
.pdp-main-image,
.pdp-image-stage,
.pdp-hero-media,
.keyword-product-image,
.home-product-card .product-image,
[data-photo-well] {
  background-color: var(--c-photo-well) !important;
  border-radius: var(--r-well);
}

body.product-page .pdp-product-gallery {
  background: transparent !important;
}

html[data-theme="dark"] .product-image-container,
html[data-theme="dark"] .product-image-wrapper,
html[data-theme="dark"] .pdp-gallery-main,
html[data-theme="dark"] .keyword-product-image {
  box-shadow: inset 0 0 0 1px var(--c-photo-well-edge);
}

.home-experience,
body.home-page,
body.catalog-page,
body.product-page,
body.keyword-search-page,
body.cart-page {
  background-color: var(--c-bg) !important;
  color: var(--c-text);
}

.pharma-mobile-nav,
.commerce-sticky-cta,
.pdp-mobile-cart-footer {
  background-color: var(--c-hdr-bg) !important;
  color: var(--c-text) !important;
  border-color: var(--c-hdr-border) !important;
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
}
.pharma-mobile-nav-item { color: var(--c-text-3) !important; }
.pharma-mobile-nav-item.active,
.pharma-mobile-nav-item:hover { color: var(--c-brand-text) !important; }

body.home-page .hero-section,
body.home-page .product-card,
body.catalog-page .product-card,
body.product-page .pdp-product-card,
body.product-page .pdp-buy-box,
body.product-page .pdp-panel,
body.product-page .pdp-product-info,
.login-page .login-card,
.login-card,
.auth-card {
  background-color: var(--c-raised) !important;
  color: var(--c-text) !important;
  border-color: transparent !important;
}
body.home-page .stat-item,
body.home-page .feature-card,
body.home-page .main-content-card,
body.product-page .pdp-section {
  background-color: transparent !important;
  border-color: transparent !important;
}
.site-header.navbar,
.site-header > .container-fluid.navbar-shell {
  color: var(--c-text) !important;
}
body.product-page,
body.product-page .pdp-page,
body.product-page main {
  background-color: var(--c-bg) !important;
  color: var(--c-text);
}

.site-header .logo-for-light { display: block !important; }
.site-header .logo-for-dark { display: none !important; }
html[data-theme="dark"] .site-header .logo-for-light { display: none !important; }
html[data-theme="dark"] .site-header .logo-for-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .site-header .logo-for-light { display: none !important; }
  html:not([data-theme]) .site-header .logo-for-dark { display: block !important; }
}

.pw-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-ib);
  background: var(--c-surface-2);
  color: var(--c-text);
  cursor: pointer;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
}
.navbar-end-cluster {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.pw-theme-toggle:hover { background: var(--c-surface-3); }
.pw-theme-toggle:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.pw-theme-toggle .pw-theme-icon { font-size: 1rem; line-height: 1; }
.pw-theme-toggle[data-pref="light"] .pw-theme-icon-moon,
.pw-theme-toggle[data-pref="dark"] .pw-theme-icon-sun,
.pw-theme-toggle[data-pref="system"] .pw-theme-icon-sun { display: none; }
.pw-theme-toggle[data-pref="light"] .pw-theme-icon-sun { display: inline; }
.pw-theme-toggle[data-pref="dark"] .pw-theme-icon-moon,
.pw-theme-toggle[data-pref="system"] .pw-theme-icon-system { display: inline; }
.pw-theme-toggle[data-pref="light"] .pw-theme-icon-system,
.pw-theme-toggle[data-pref="dark"] .pw-theme-icon-system { display: none; }
.pw-theme-toggle .pw-theme-icon-system { display: none; }
.pw-theme-toggle[data-pref="system"] .pw-theme-icon-moon { display: none; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}