/* ============================================================
   SUN TOOLS V3 — DESIGN TOKENS
   ============================================================
   Single source of truth for color, type, spacing, radius, shadow,
   container width, and breakpoint values. Every other stylesheet in
   this theme reads these custom properties — nothing else in the
   system hardcodes a color or a spacing number.
   ============================================================ */

:root {
  /* ---------- Color ---------- */
  /* Sampled directly from the real logo file
     (uploads/sun-tools/brand-assets/sun-tools-logo-ar.png — dominant
     fill cluster ~#E00010, full-image average ~#D3030C): the old
     #E21E2B carried far more green/blue than the logo ever does,
     which read as visibly lighter/pinker next to it. */
  --st3-red:        #E1000D;
  --st3-red-dark:   #B3000A;
  --st3-dark:       #151515;
  --st3-charcoal:   #202020;
  --st3-white:      #FFFFFF;
  --st3-soft-gray:  #F4F4F2;
  --st3-border:     #E5E5E5;

  --st3-ink:        #151515;   /* primary text on light */
  --st3-body:       #4A4A48;   /* secondary/body text on light */
  --st3-muted:      #8A8A86;   /* tertiary text, placeholders */
  --st3-on-dark:    #FFFFFF;
  --st3-on-dark-muted: rgba(255,255,255,.62);
  --st3-on-dark-border: rgba(255,255,255,.14);

  --st3-surface:    var(--st3-soft-gray);
  --st3-base:       var(--st3-white);

  /* ---------- Typography ---------- */
  --st3-font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  --st3-text-xs:    0.75rem;   /* 12px — legal, meta */
  --st3-text-sm:    0.8125rem; /* 13px — labels, badges */
  --st3-text-base:  0.9375rem; /* 15px — body */
  --st3-text-md:    1.0625rem; /* 17px — lead body */
  --st3-text-lg:    1.25rem;   /* 20px — card titles */
  --st3-text-xl:    1.625rem;  /* 26px — section headings */
  --st3-text-2xl:   2.25rem;   /* 36px — page headings */
  --st3-text-3xl:   3rem;      /* 48px — hero (reserved) */

  --st3-leading-tight: 1.2;
  --st3-leading-normal: 1.55;
  --st3-leading-loose: 1.75;

  /* ---------- Spacing scale (4px base) ---------- */
  --st3-space-1:  4px;
  --st3-space-2:  8px;
  --st3-space-3:  12px;
  --st3-space-4:  16px;
  --st3-space-5:  20px;
  --st3-space-6:  24px;
  --st3-space-7:  32px;
  --st3-space-8:  40px;
  --st3-space-9:  56px;
  --st3-space-10: 72px;
  --st3-space-11: 96px;

  /* ---------- Radius ---------- */
  --st3-radius-sm: 3px;
  --st3-radius:    5px;
  --st3-radius-lg: 8px;

  /* ---------- Shadow (used sparingly — flat design, not card-soup) --- */
  --st3-shadow-sm: 0 1px 3px rgba(21,21,21,.08);
  --st3-shadow-md: 0 8px 24px -12px rgba(21,21,21,.28);
  --st3-shadow-lg: 0 20px 48px -16px rgba(21,21,21,.32);

  /* ---------- Container ---------- */
  --st3-container: 1360px;
  --st3-container-pad: var(--st3-space-5);

  /* ---------- Motion ---------- */
  --st3-ease: cubic-bezier(.4,0,.2,1);
  --st3-fast: .15s;
  --st3-base-speed: .22s;

  /* ---------- Z-index scale ---------- */
  --st3-z-header:    100;
  --st3-z-mega-menu: 110;
  --st3-z-search:    120;
  --st3-z-mobile-nav: 130;
  --st3-z-overlay:   140;
}

/* Breakpoints are documented here (custom properties can't hold media
   queries), used consistently across every stylesheet in this theme:
   2xl: 1440px  — full desktop
   xl:  1280px  — standard desktop
   lg:  1024px  — small laptop / mega menu collapse point
   md:  768px   — tablet / mobile nav takeover point
   sm:  430px   — large phone
   xs:  390px   — baseline phone */