/* ============================================================
   SolTech InfoLabs — Design Tokens

   Every colour below is derived from the official SolTech brand:
     · #393185  logo indigo      (assets/img/soltech-logo.svg)
     · #2F2483  deep indigo      (soltechie.com brand CSS)
     · #4154F1  SolTech blue     (dominant brand accent)
     · #5969F3  light blue
     · #A0AAF8  soft periwinkle
     · #2DB6FA  electric/aqua blue
     · #E1ECFF  light blue surface
     · #F6F9FF  blue-grey surface
     · #F51F9C  magenta accent   (small supporting use only)

   Tonal ramps preserve the source hue. Blue is the dominant colour;
   magenta appears only as a restrained highlight.
   ============================================================ */

:root {
  /* ---------- Brand primitives (the named brand API) ---------- */
  --soltech-primary:      #4154F1;  /* SolTech blue */
  --soltech-primary-dark: #2E3FD8;
  --soltech-primary-deep: #2F2483;  /* deep indigo */
  --soltech-secondary:    #393185;  /* logo indigo */
  --soltech-accent:       #F51F9C;  /* magenta — sparing */
  --soltech-electric:     #2DB6FA;  /* aqua highlight */
  --soltech-periwinkle:   #A0AAF8;
  --soltech-surface:      #FFFFFF;
  --soltech-surface-soft: #F6F9FF;
  --soltech-border:       #E1ECFF;
  --soltech-text:         #171340;
  --soltech-text-muted:   #4E5678;

  /* ---------- Indigo / navy ramp (hue ≈ 247) ---------- */
  --ink-950: #070516;
  --ink-900: #0B0824;
  --ink-850: #100C31;
  --ink-800: #15103F;
  --ink-750: #1B154F;
  --ink-700: #221B62;
  --ink-650: #2F2483;
  --ink-600: #393185;
  --ink-500: #4A3FA5;

  /* ---------- SolTech blue ramp (hue ≈ 232) ---------- */
  --blue-50:  #F2F5FF;
  --blue-100: #E1ECFF;
  --blue-200: #C6D2FC;
  --blue-300: #A0AAF8;
  --blue-400: #5969F3;
  --blue-500: #4154F1;
  --blue-600: #2E3FD8;
  --blue-700: #2431AE;
  --blue-800: #1B2585;

  /* ---------- Electric / aqua ramp (hue ≈ 200) ---------- */
  --aqua-300: #8FDCFD;
  --aqua-400: #5FCBF5;
  --aqua-500: #2DB6FA;
  --aqua-600: #0E90D6;

  /* ---------- Magenta accent — small supporting role only ---------- */
  --pink-400: #FA5CB6;
  --pink-500: #F51F9C;

  /* ---------- Blue-grey neutrals ---------- */
  --white:     #FFFFFF;
  --paper-50:  #FAFBFF;
  --paper-100: #F6F9FF;
  --paper-200: #EDF2FD;
  --line-200:  #E1ECFF;
  --line-300:  #CFDDF6;
  --slate-400: #8B94B8;
  --slate-500: #626C90;
  --slate-600: #4E5678;
  --slate-700: #363E5E;

  /* ---------- Semantic: light surface ---------- */
  --bg:            var(--white);
  --bg-tint:       var(--paper-100);
  --surface:       var(--white);
  --surface-sunk:  var(--paper-50);
  --border:        var(--line-200);
  --border-strong: var(--line-300);
  --text:          var(--soltech-text);
  --text-muted:    var(--slate-600);
  --text-faint:    var(--slate-500);
  --accent:        var(--blue-500);
  --accent-text:   var(--blue-600);

  /* ---------- Semantic: dark surface ---------- */
  --d-bg:            var(--ink-950);
  --d-surface:       rgba(255 255 255 / 0.04);
  --d-surface-hover: rgba(255 255 255 / 0.07);
  --d-border:        rgba(255 255 255 / 0.11);
  --d-border-strong: rgba(255 255 255 / 0.20);
  --d-text:          #F2F5FF;
  --d-text-muted:    #A9B3D8;
  --d-text-faint:    #7C87B2;

  /* ---------- Product identities ----------
     One family, spread across the SolTech blue spectrum.
     Each has three roles:
       --p-*        vivid accent, for graphics and fills
       --p-*-ink    darkened, for text on light surfaces (WCAG AA)
       --p-*-lt     lightened, for text on dark surfaces
     SuTra, SolServ Studio and DocSense are horizontal layers — they are
     distinguished by form, not by leaving the blue family.        */

  --p-docsense:  #14B4C9;  --p-docsense-ink:  #0A6E7D;  --p-docsense-lt:  #6EDCEC;
  --p-ezbilling: #0FA6E6;  --p-ezbilling-ink: #0A6A94;  --p-ezbilling-lt: #6FD0F7;
  --p-solserv:   #1F72DE;  --p-solserv-ink:   #1657AC;  --p-solserv-lt:   #7FB6F5;
  --p-instadocs: #5B86F5;  --p-instadocs-ink: #3557CE;  --p-instadocs-lt: #A3BCFB;
  --p-insight:   #4154F1;  --p-insight-ink:   #2E3FD8;  --p-insight-lt:   #99A5FA;
  --p-sutra:     #6B47E5;  --p-sutra-ink:     #5232C4;  --p-sutra-lt:     #B29AF5;
  --p-paylife:   #3A2F9E;  --p-paylife-ink:   #2F2483;  --p-paylife-lt:   #9A90E4;

  /* Active product accent — remapped per scope by [data-product] */
  --pa:     var(--blue-500);
  --pa-ink: var(--blue-600);
  --pa-lt:  var(--blue-300);
  /* accent text in whichever theme the element sits in */
  --pa-on:  var(--pa-ink);

  /* ---------- Typography ---------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui,
               -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono",
               "Roboto Mono", Menlo, Consolas, monospace;

  --fs-eyebrow: 0.75rem;
  --fs-xs:   0.8125rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   clamp(1.0625rem, 0.99rem + 0.32vw, 1.1875rem);
  --fs-lg:   clamp(1.1875rem, 1.09rem + 0.42vw, 1.375rem);
  --fs-xl:   clamp(1.375rem, 1.24rem + 0.6vw, 1.75rem);
  --fs-h4:   clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);
  --fs-h3:   clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
  --fs-h2:   clamp(2rem, 1.62rem + 1.7vw, 3.25rem);
  --fs-h1:   clamp(2.5rem, 1.85rem + 2.9vw, 4.5rem);
  --fs-hero: clamp(2.6rem, 1.85rem + 3.4vw, 4.9rem);

  --lh-tight: 1.06;
  --lh-snug:  1.18;
  --lh-base:  1.62;
  --lh-loose: 1.72;

  --tr-tight:  -0.033em;
  --tr-snug:   -0.021em;
  --tr-normal: -0.011em;
  --tr-wide:   0.02em;
  --tr-caps:   0.13em;

  /* ---------- Space ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-7: 2rem;     --sp-8: 2.5rem;
  --sp-9: 3rem;     --sp-10: 4rem;    --sp-11: 5rem;    --sp-12: 6.5rem;

  --section-y: clamp(4.5rem, 3rem + 6.2vw, 8.5rem);
  --section-y-sm: clamp(3.25rem, 2.4rem + 3.6vw, 5.5rem);
  --gutter: clamp(1.25rem, 0.7rem + 2.2vw, 2.5rem);
  --maxw: 1216px;
  --maxw-narrow: 780px;
  --maxw-wide: 1400px;

  /* ---------- Radius ---------- */
  --r-xs: 6px;  --r-sm: 9px;  --r-md: 13px;
  --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --sh-xs: 0 1px 2px rgb(23 19 64 / 0.05);
  --sh-sm: 0 1px 3px rgb(23 19 64 / 0.06), 0 4px 10px -4px rgb(23 19 64 / 0.06);
  --sh-md: 0 2px 5px rgb(23 19 64 / 0.05), 0 12px 26px -10px rgb(23 19 64 / 0.12);
  --sh-lg: 0 4px 10px rgb(23 19 64 / 0.05), 0 26px 52px -18px rgb(23 19 64 / 0.18);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur:      240ms;
  --dur-slow: 460ms;

  /* ---------- Layering ---------- */
  --z-base: 1; --z-sticky: 60; --z-nav: 100; --z-drawer: 120; --z-top: 200;
}

/* Dark scope: remap the semantic layer so every component follows. */
.theme-dark {
  --bg:            var(--d-bg);
  --pa-on:         var(--pa-lt);
  --bg-tint:       var(--ink-900);
  --surface:       var(--d-surface);
  --surface-sunk:  rgba(255 255 255 / 0.02);
  --border:        var(--d-border);
  --border-strong: var(--d-border-strong);
  --text:          var(--d-text);
  --text-muted:    var(--d-text-muted);
  --text-faint:    var(--d-text-faint);
  --accent:        var(--blue-300);
  --accent-text:   var(--blue-300);
  --sh-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --sh-md: 0 12px 30px -14px rgb(0 0 0 / 0.7);
  --sh-lg: 0 30px 60px -24px rgb(0 0 0 / 0.8);
  color-scheme: dark;
}

/* Per-product accent scopes */
[data-product="insight"]      { --pa: var(--p-insight);      --pa-ink: var(--p-insight-ink);      --pa-lt: var(--p-insight-lt); }
[data-product="instadocs"] { --pa: var(--p-instadocs); --pa-ink: var(--p-instadocs-ink); --pa-lt: var(--p-instadocs-lt); }
[data-product="sutra"]     { --pa: var(--p-sutra);     --pa-ink: var(--p-sutra-ink);     --pa-lt: var(--p-sutra-lt); }
[data-product="solserv"]  { --pa: var(--p-solserv);  --pa-ink: var(--p-solserv-ink);  --pa-lt: var(--p-solserv-lt); }
[data-product="ezbilling"] { --pa: var(--p-ezbilling); --pa-ink: var(--p-ezbilling-ink); --pa-lt: var(--p-ezbilling-lt); }
[data-product="docsense"]  { --pa: var(--p-docsense);  --pa-ink: var(--p-docsense-ink);  --pa-lt: var(--p-docsense-lt); }
[data-product="paylife"]   { --pa: var(--p-paylife);   --pa-ink: var(--p-paylife-ink);   --pa-lt: var(--p-paylife-lt); }