/* ==========================================================================
   DESIGN TOKENS
   Single source of truth for the visual system. To rebrand for a new client,
   change the values in this file (or set `theme` in js/config/site.config.js,
   which overrides these at runtime).
   ========================================================================== */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --primary: #134e6f;          /* main brand color: buttons, links, active states */
  --primary-hover: #0d3c57;
  --primary-soft: #e4eef4;     /* tinted backgrounds for primary elements */
  --on-primary: #ffffff;

  --secondary: #171b21;        /* dark surfaces: footer, dark bands */
  --secondary-soft: #242a32;
  --on-secondary: #ffffff;

  --accent: #f2a541;           /* "indicator lamp": active markers, highlights, tags */
  --accent-soft: #fdf1df;
  --on-accent: #171b21;

  /* ---- Neutrals ------------------------------------------------------- */
  --background: #f6f7f9;       /* page background */
  --surface: #ffffff;          /* cards, header, panels */
  --surface-steel: #eceff2;    /* product-image tiles (product photos blend into it) */
  --surface-steel-strong: #dfe3e8;

  --text: #171b21;
  --text-muted: #5a6472;
  --text-subtle: #8a939f;
  --text-on-dark-muted: #a7b0bb;

  --border: #dde2e7;
  --border-strong: #c3cad2;
  --border-on-dark: #343b45;

  /* ---- Tints: supporting hues for icon chips, fact tiles and badges ---
     Keeps feature-heavy pages (product landing) from reading as one color.
     Each tint pairs a strong hue with a soft background. */
  --tint-blue: #134e6f;
  --tint-blue-soft: #e4eef4;
  --tint-amber: #b86e0b;
  --tint-amber-soft: #fdf1df;
  --tint-green: #1f7a4a;
  --tint-green-soft: #e2f3e9;
  --tint-red: #b8392a;
  --tint-red-soft: #fbe7e3;
  --tint-teal: #0e7480;
  --tint-teal-soft: #ddf1f2;
  --tint-violet: #5546a8;
  --tint-violet-soft: #ebe8f8;

  --whatsapp: #25d366;
  --whatsapp-hover: #1eb857;
  --on-whatsapp: #0b3d20;

  --success: #1f8a4c;
  --danger: #c2412d;
  --sale: #c2412d;

  /* ---- Typography ----------------------------------------------------- */
  --font-display: "Secular One", "IBM Plex Sans Hebrew", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Hebrew", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.625rem);
  --fs-hero: clamp(2.25rem, 1.45rem + 3.6vw, 4.25rem);

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

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

  /* ---- Spacing (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: 48px;
  --space-10: 64px;
  --space-11: 80px;

  --section-space: clamp(56px, 3rem + 4vw, 112px);   /* vertical rhythm between home sections */

  /* ---- Layout --------------------------------------------------------- */
  --container: 1320px;
  --gutter: clamp(16px, 2.5vw, 32px);
  --header-height: 76px;

  /* ---- Shape ---------------------------------------------------------- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Elevation ------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgb(23 27 33 / 0.06);
  --shadow: 0 2px 4px rgb(23 27 33 / 0.04), 0 8px 24px rgb(23 27 33 / 0.06);
  --shadow-lg: 0 4px 8px rgb(23 27 33 / 0.05), 0 24px 56px rgb(23 27 33 / 0.14);

  /* ---- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 150ms;
  --duration: 240ms;
  --duration-slow: 600ms;

  /* ---- Layers --------------------------------------------------------- */
  --z-header: 100;
  --z-mega-menu: 110;
  --z-overlay: 200;
  --z-drawer: 210;
  --z-floating: 90;

  /* ---- Focus ---------------------------------------------------------- */
  --focus-ring: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary);
}