/* ==========================================================================
   SmartPoint Solutions — Design tokens
   --------------------------------------------------------------------------
   This file IS the design system. Every colour, font, size, radius, shadow
   and motion value used by styles.css is defined here as a custom property.
   A rebrand means editing this file only.
   ========================================================================== */

:root {
  /* ---- Foundation: navy / near-black ---------------------------------- */
  --navy-950: #060a16;
  --navy-900: #0b1220;
  --navy-800: #111a2e;
  --navy-700: #1a2540;
  --navy-600: #253352;

  /* ---- Light surfaces --------------------------------------------------- */
  --white: #ffffff;
  --surface: #f5f7fb;
  --surface-2: #eef1f7;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;

  /* ---- Text on light ---------------------------------------------------- */
  --ink: #0f172a;
  --ink-2: #3b4a63;
  --ink-3: #5b6b84;

  /* ---- Text on dark ----------------------------------------------------- */
  --on-dark: #ffffff;
  --on-dark-2: #c7d2e4;
  --on-dark-3: #8fa0bd;
  --line-dark: rgba(255, 255, 255, 0.12);

  /* ---- The SmartPoint rainbow (vivid, for accents on dark + decoration) */
  --c-magenta: #e5007d;
  --c-orange:  #f5821f;
  --c-yellow:  #ffc20e;
  --c-green:   #43b02a;
  --c-cyan:    #00b4e6;
  --c-blue:    #2d6cdf;
  --c-purple:  #a06bff;

  /* Text-safe versions for use ON WHITE (all pass WCAG AA at 4.5:1) */
  --c-magenta-ink: #b8005f;
  --c-orange-ink:  #b04a00;
  --c-yellow-ink:  #7a5a00;
  --c-green-ink:   #22752b;
  --c-cyan-ink:    #00668a;
  --c-blue-ink:    #1d4ed8;
  --c-purple-ink:  #6d3fd4;

  /* ---- Journey accents (ONE brand, three journeys) --------------------- */
  --div-branding:      var(--c-magenta);
  --div-branding-ink:  var(--c-magenta-ink);
  --div-branding-soft: #fdeaf3;
  --div-print:      var(--c-magenta);
  --div-print-ink:  var(--c-magenta-ink);
  --div-print-soft: #fdeaf3;
  --div-security:      var(--c-blue);
  --div-security-ink:  var(--c-blue-ink);
  --div-security-soft: #e8effc;

  /* ---- Commerce (Printing shop) ------------------------------------------ */
  --shop-accent:      var(--c-blue);        /* shop buttons, cart badge */
  --shop-accent-ink:  var(--c-blue-ink);
  --shop-accent-soft: var(--div-security-soft);
  --price-ink:        #0f172a;
  --ok-ink:   #1b6b2a;  --ok-soft:   #e6f5e6;
  --warn-ink: #7a5a00;  --warn-soft: #fff6d6;
  --bad-ink:  #b91c1c;  --bad-soft:  #fff1f1;
  --info-ink: #1d4ed8;  --info-soft: #e8effc;
  --grad-shop: linear-gradient(95deg, #1d4ed8 0%, #2d6cdf 60%, #00a2d1 100%);
  --grad-shop-hover: linear-gradient(95deg, #1a44c2 0%, #2760c8 60%, #0090ba 100%);

  /* ---- WhatsApp --------------------------------------------------------- */
  --wa-green:      #25d366;   /* icon / ring accent */
  --wa-green-deep: #128c7e;   /* solid buttons: white text passes AA */
  --wa-green-ink:  #0b6b5f;

  /* ---- Gradients -------------------------------------------------------- */
  --grad-rainbow: linear-gradient(90deg,
    var(--c-magenta) 0%, var(--c-orange) 17%, var(--c-yellow) 34%,
    var(--c-green) 50%, var(--c-cyan) 67%, var(--c-blue) 84%, var(--c-purple) 100%);
  /* CTA gradient: deliberately deeper than the vivid palette so white text
     stays AA-legible at every point along the button. */
  --grad-cta: linear-gradient(95deg, #c93a0d 0%, #c4006a 48%, #2f4bd8 100%);
  --grad-cta-hover: linear-gradient(95deg, #b8340b 0%, #ad005d 48%, #2540c4 100%);
  --grad-hero: radial-gradient(120% 90% at 50% 0%, var(--navy-700) 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  --grad-text-rainbow: linear-gradient(90deg,
    var(--c-magenta) 0%, var(--c-orange) 30%, var(--c-cyan) 65%, var(--c-purple) 100%);

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Sora", "Sora Fallback", "Segoe UI", Arial, sans-serif;
  --font-body: "Manrope", "Manrope Fallback", "Segoe UI", Arial, sans-serif;

  --fs-2xs: 0.6875rem;  /* 11px */
  --fs-xs:  0.75rem;    /* 12px */
  --fs-sm:  0.875rem;   /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:  1.125rem;   /* 18px */
  --fs-lg:  1.25rem;    /* 20px */
  --fs-xl:  1.5rem;     /* 24px */
  --fs-2xl: 1.875rem;   /* 30px */
  --fs-3xl: 2.375rem;   /* 38px */
  --fs-4xl: 3rem;       /* 48px */
  --fs-display: clamp(2.25rem, 1.3rem + 3.2vw, 3.75rem);
  --fs-display-sm: clamp(2rem, 1.3rem + 3vw, 3.5rem);

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.6;

  --tracking-wide: 0.12em;
  --tracking-caps: 0.08em;

  /* ---- Spacing scale ---------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  --section-pad: clamp(3rem, 2rem + 4vw, 6rem);
  --section-pad-sm: clamp(2rem, 1.5rem + 2.5vw, 4rem);

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  --header-h: 80px;            /* phone header height; the menu drawer opens below it */
  /* Header brand lockup (logo + name + tagline). Requested 2026-09-30:
     at least 3 to 4 cm tall on the landing page, so the desktop size is
     set in real centimetres. Change these three values to resize it. */
  --brand-logo-lg: 3cm;        /* desktop, top of page */
  --brand-logo-md: 72px;       /* tablet */
  --brand-logo-sm: 56px;       /* phone, and desktop once scrolled */
  --tap-min: 44px;

  /* ---- Radii ------------------------------------------------------------ */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Shadows ---------------------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --sh-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.05);
  --sh-lg: 0 18px 40px rgba(15, 23, 42, 0.14), 0 6px 12px rgba(15, 23, 42, 0.06);
  --sh-dark: 0 18px 40px rgba(0, 0, 0, 0.45);
  --sh-glow-wa: 0 8px 24px rgba(37, 211, 102, 0.35);

  /* ---- Focus ring (visible on light and dark) --------------------------- */
  --focus-ring: 0 0 0 3px var(--white), 0 0 0 6px var(--c-blue);
  --focus-ring-dark: 0 0 0 3px var(--navy-900), 0 0 0 6px var(--c-yellow);

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 150ms;
  --dur-2: 280ms;
  --dur-3: 500ms;

  /* ---- Z-index ---------------------------------------------------------- */
  --z-header: 50;
  --z-nav: 60;
  --z-float: 70;
}

/* Metric-compatible fallbacks so text does not jump when Google Fonts load
   (and so the site still looks intentional fully offline). */
@font-face {
  font-family: "Sora Fallback";
  src: local("Segoe UI Bold"), local("Arial Bold"), local("Arial");
  font-weight: 600 800;
  size-adjust: 106%;
  ascent-override: 98%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Segoe UI"), local("Arial");
  font-weight: 400 700;
  size-adjust: 101%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

@media (min-width: 768px) { :root { --header-h: 96px; } }