/* ============================================================
   SIGNAL PACK — GLOBAL DESIGN TOKENS
   Source of truth for colour, type, spacing, radius, shadow,
   breakpoints and shared config across every component.

   These values are copied EXACTLY from the approved homepage
   custom-HTML block. Do not change these tokens as part of the
   component build — any brand/colour change is a separate,
   approved-only decision (see project restrictions).
   ============================================================ */

:root{
  /* ---- Brand colours (from approved homepage) ---- */
  --red:#E31E2A;        /* Signal Pack Red — primary CTA, badges, active states */
  --navy:#2C2A78;        /* Signal Pack Blue — headings, nav, links, footer */
  --yellow:#F5C518;      /* Accent — used sparingly for tags/eyebrows/dividers on the homepage */
  --ink:#17162e;         /* Darkest text / dark section background */
  --paper:#ffffff;       /* Primary background */
  --grey-bg:#f6f6f9;     /* Alternate section background */
  --grey-alt:#eef0f5;    /* Card / image placeholder background */
  --grey-text:#55536b;   /* Body copy grey */
  --line:rgba(23,22,46,0.10); /* Hairline borders/dividers */

  /* ---- Semantic aliases (used across form/system states) ---- */
  --color-primary:var(--red);
  --color-secondary:var(--navy);
  --color-accent:var(--yellow);
  --color-bg:var(--paper);
  --color-bg-alt:var(--grey-bg);
  --color-bg-card:var(--grey-alt);
  --color-text:var(--ink);
  --color-text-muted:var(--grey-text);
  --color-border:var(--line);

  --color-success:#1e8e5a;
  --color-success-bg:#e9f7ef;
  --color-error:#c8151f;
  --color-error-bg:#fdecec;
  --color-warning:#b98400;
  --color-warning-bg:#fff8e6;
  --color-info:var(--navy);
  --color-info-bg:#eef0fb;
  --color-disabled-bg:#f1f1f4;
  --color-disabled-text:#a8a6b8;
  --color-whatsapp:#25D366;
  --color-whatsapp-hover:#1ebc59;

  /* ---- Typography ---- */
  --font-display:'Poppins', sans-serif;
  --font-body:'Inter', sans-serif;

  --fs-display:44px;      /* Hero / page display heading */
  --fs-h1:33px;            /* Page heading */
  --fs-h2:25px;            /* Section heading (mobile-adjusted in components.css) */
  --fs-h3:19px;            /* Card / block heading */
  --fs-h4:15.5px;          /* Small heading / label heading */
  --fs-body:14.5px;        /* Base body */
  --fs-body-sm:13.5px;     /* Secondary body */
  --fs-caption:11.5px;     /* Captions, MOQ, meta */
  --fs-eyebrow:12px;       /* Eyebrow label */
  --fs-button:12.5px;      /* Button label */
  --fs-price:16px;         /* Product price */

  /* ---- Spacing scale (4px base) ---- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:56px;
  --space-10:88px;   /* section-pad, matches homepage .section-pad */

  /* ---- Radius scale ---- */
  --radius-sm:4px;
  --radius-md:6px;   /* buttons */
  --radius-lg:8px;   /* mega menu / dropdowns */
  --radius-xl:10px;  /* utility cards */
  --radius-2xl:12px; /* product/category cards */
  --radius-pill:999px;
  --radius-circle:50%;

  /* ---- Shadow scale ---- */
  --shadow-sm:0 2px 8px rgba(23,22,46,0.06);
  --shadow-md:0 16px 34px rgba(23,22,46,0.10);
  --shadow-lg:0 18px 40px rgba(23,22,46,0.14);
  --shadow-xl:0 20px 50px rgba(23,22,46,0.10);
  --shadow-sticky:0 -6px 20px rgba(23,22,46,0.08);

  /* ---- Sizing ---- */
  --header-height:86px;
  --header-height-mobile:64px;
  --control-height-sm:34px;
  --control-height-md:44px;
  --control-height-lg:52px;
  --icon-size-sm:16px;
  --icon-size-md:20px;
  --icon-btn-size:38px;
  --touch-target-min:44px;

  /* ---- Motion ---- */
  --ease:cubic-bezier(.4,0,.2,1);
  --duration-fast:150ms;
  --duration-base:200ms;
  --duration-slow:280ms;

  /* ---- Z-index scale ---- */
  --z-header:50;
  --z-mega:60;
  --z-mobile-nav:55;
  --z-hamburger:56;
  --z-sticky-bar:70;
  --z-drawer:80;
  --z-modal:90;
  --z-toast:100;
  --z-tooltip:110;
}

/*
  Breakpoints (documented — applied directly in media queries,
  since this is plain CSS with no preprocessor):
  --bp-xl-desktop : 1440px
  --bp-desktop    : 1280px
  --bp-laptop     : 1024px
  --bp-tablet     : 768px  (component "collapse" point, matches homepage 1180px nav breakpoint for nav-specific items)
  --bp-mobile     : 480px
  --bp-mobile-sm  : 390px
  --bp-mobile-xs  : 360px
*/

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}