/* ==========================================================================
   Pharmatech Polymer — Design Tokens
   Source of truth for colour, type, spacing and component primitives.
   Colours sampled from the original logo (assets/images/legacy/logo.png).
   ========================================================================== */

:root {
  /* ---- Brand colour (logo-derived) ------------------------------------- */
  --color-primary:          #ED1C24; /* Logo red — "TECH" wordmark + symbol face */
  --color-primary-hover:    #D3161D; /* AA-safe red: buttons, links (5.38:1 on white) */
  --color-primary-active:   #B5121A; /* Pressed state (6.85:1 on white) */
  --color-secondary:        #7E1E22; /* Logo symbol gradient shadow (maroon) */
  --color-accent:           #FDECEC; /* Red tint for highlights, badges, active rows */
  --color-ink:              #161616; /* Logo black wordmark, softened for screens */

  /* ---- Neutrals --------------------------------------------------------- */
  --color-background:       #FFFFFF;
  --color-surface:          #F6F5F3; /* Alternate section background */
  --color-surface-dark:     #161616; /* Footer, dark bands */
  --color-surface-dark-2:   #1F1F1F; /* Raised surfaces on dark */
  --color-text:             #161616; /* 18.1:1 on white */
  --color-text-muted:       #5A5A5A; /* 6.9:1 on white, 6.3:1 on surface */
  --color-text-on-dark:     #FFFFFF;
  --color-text-on-dark-muted: #A3A3A3; /* 7.2:1 on #161616 */
  --color-primary-on-dark:  #FF6B70; /* Links on dark (6.5:1) */
  --color-border:           #E3E1DE;
  --color-border-strong:    #C9C6C1;

  /* ---- Feedback (forms only) ------------------------------------------- */
  --color-success:          #1E7A46;
  --color-error:            #B5121A; /* Reuses primary-active so errors stay on-brand */

  /* ---- Typography ------------------------------------------------------- */
  --font-heading: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-display: clamp(2.25rem, 1.55rem + 2.8vw, 3.5rem);    /* 36 → 56 */
  --fs-h1:      clamp(2rem, 1.6rem + 1.6vw, 2.75rem);       /* 32 → 44 */
  --fs-h2:      clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem);  /* 26 → 36 */
  --fs-h3:      clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);    /* 20 → 24 */
  --fs-h4:      1.125rem;                                   /* 18 — product titles */
  --fs-body-lg: 1.125rem;                                   /* 18 — lead text */
  --fs-body:    1rem;                                       /* 16 */
  --fs-small:   0.875rem;                                   /* 14 — specs, meta */
  --fs-eyebrow: 0.75rem;                                    /* 12 — section labels */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-heavy:   800;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.65;

  --ls-tight:   -0.02em;
  --ls-eyebrow:  0.12em;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-section: clamp(4rem, 2.5rem + 6vw, 7rem); /* 64 → 112 */

  /* ---- Layout ----------------------------------------------------------- */
  --container-max:    1240px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem); /* 16 → 32 */
  --header-height: 88px;

  /* ---- Radii (restrained; one signature corner echoes the logo symbol) -- */
  --radius-sm: 4px;    /* buttons, inputs, tags */
  --radius-md: 6px;    /* cards */
  --radius-lg: 10px;   /* modals, large media */
  --radius-signature: 28px; /* top-left corner only — mirrors the "P" symbol */

  /* ---- Shadows ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(22, 22, 22, 0.06);
  --shadow-md: 0 4px 16px rgba(22, 22, 22, 0.08);
  --shadow-lg: 0 12px 32px rgba(22, 22, 22, 0.12);

  /* ---- Components ------------------------------------------------------- */
  --btn-height: 48px;
  --btn-height-sm: 40px;
  --btn-padding-x: 1.5rem;
  --input-height: 48px;
  --focus-ring: 0 0 0 3px rgba(237, 28, 36, 0.35);

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --duration-fast: 150ms;
  --duration: 250ms;
}

/* Breakpoints follow Bootstrap 5 so grid utilities and custom CSS agree:
   sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400 */

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration: 0ms; }
}