/* ======================================================
   NIERMAN UI — ROOT TOKENS + GLOBAL VARIABLES
   Updated: 2025-10-15
   Author: Mykhailo Yurchenko
   ====================================================== */

/* ---------- ROOT TOKENS ---------- */
:root{
  /* Brand / accents */
  --clr-brand-primary:#0051BB;
  --clr-brand-secondary:#00AEEF;
  --clr-brand-accent:#FFC83D;
  --clr-brand-navy:#0A2540;
  --clr-brand-indigoDark:#070850;
  --clr-brand-amber:#FFB71B;
  --clr-brand-darkGold:#B58402;
  --clr-brand-purple:#8324DB;

  /* Text (aligned with Figma) */
  --clr-text-primary:#1A1A1A;   /* was #1E1E1E */
  --clr-text-secondary:#4F5B67; /* was #757575 */
  --clr-text-inverse:#FFFFFF;
  --clr-text-onDark:#F5F5F5;
  --clr-text-footer:#1B1A19;

  /* Brand text alias */
  --clr-text-brand:var(--clr-brand-primary);

  /* Backgrounds (aligned with Figma) */
  --clr-bg-surface:#FFFFFF;
  --clr-bg-light:#F8FAFC;       /* was #F8F8F8 */
  --clr-bg-lightAlt:#F5F5F5;
  --clr-bg-dark:#101828;        /* new */
  --clr-bg-elev1:#D8D8D8;       /* new */
  --clr-bg-blueTint:#F4FCFF;
  --clr-bg-blueTint2:#D9F2FF;
  --clr-bg-mint:#EDFFF9;
  --clr-bg-violet:#E2D8FF;
  --clr-bg-greenTint:#D8FFE8;
  --clr-bg-yellowTint:#FFFBCA;
  --clr-bg-cardBlue:#C9DBFF;

  /* Borders */
  --clr-border-default:#303030;
  --clr-border-blueTint:#D9F2FF;
  --clr-border-light:#E5E7EB;   /* new */

  /* States (aligned with Figma) */
  --clr-state-primaryHover:#003D8F;       /* was #0047A4 */
  --clr-state-secondaryHover:#008FCC;
  --clr-state-cardHoverBg:#F0F5FF;        /* new */
  --clr-state-cardHoverBlueSoft:#D9F2FFA3;/* ~64% */
  --clr-state-cardHoverYellow:#FFFBCAAD;  /* ~68% */

  /* Helpful accents */
  --clr-accent-sky:#6BCDFF;
  --clr-accent-skyBright:#00CCFF;
  --clr-accent-linkOnDark:#6697D6;

  /* Typography (Poppins) */
  --ff:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Type scale */
  --h1-size:64px;  --h1-lh:106%; --h1-w:500;
  --h2-size:48px;  --h2-lh:120%; --h2-w:500; --h2-ls:-2px;
  --h3-size:36px;  --h3-lh:125%; --h3-w:500;
  --h4-size:28px;  --h4-lh:125%; --h4-w:500;
  --h5-size:20px;  --h5-lh:120%; --h5-w:500;
  --body-size:16px; --body-lh:150%; --body-w:400;
  --sub-size:18px;  --sub-lh:140%; --sub-w:400;
  --small-size:14px;--small-lh:130%; --small-w:400;

  /* Buttons */
  --btn-fs:20px; --btn-lh:100%; --btn-w:400;
  --btn-radius:8px;
  --btn-pad-y-sm:12px; --btn-pad-x-sm:20px;
  --btn-pad-y-md:14px; --btn-pad-x-md:24px;
  --btn-pad-y-lg:16px; --btn-pad-x-lg:28px;
  --btn-icon-size:44px; /* for icon-only buttons */

  /* Shadows */
  --shadow-soft:  0 25px 16.4px -14px rgba(17,10,56,.15);
  --shadow-strong:0 25px 16.4px -14px rgba(17,10,56,.35);

  /* Spacing scale */
  --sp-2:2px; --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px;
  --sp-20:20px; --sp-24:24px; --sp-28:28px; --sp-32:32px;

  /* Gradients */
  --grad-primary:       linear-gradient(-90deg,#015078 0%,#1A84B9 100%);
  --grad-primaryFlip:   linear-gradient(-90deg,#1A84B9 0%,#015078 100%);
  --grad-blueDeep:      linear-gradient(-90deg,#1E1B2E 0%,#015078 100%);
  --grad-blueDeepFlip:  linear-gradient(-90deg,#015078 0%,#1E1B2E 100%);
  --grad-green:         linear-gradient(-90deg,#016B1F 0%,#19B538 100%);
  --grad-greenFlip:     linear-gradient(-90deg,#19B538 0%,#016B1F 100%);
  --grad-sky:           linear-gradient(-90deg,#1A84B9 0%,#5EC9FF 100%);
  --grad-skyFlip:       linear-gradient(-90deg,#5EC9FF 0%,#1A84B9 100%);
  --grad-blueLight:     linear-gradient(0deg,#D9F2FF 0%,#5EC9FF 100%);
  --grad-blueLightFlip: linear-gradient(0deg,#5EC9FF 0%,#D9F2FF 100%);
  --grad-silver:        linear-gradient(90deg,#F4FCFF 0%,#BEC5C6 100%);
  --grad-silverFlip:    linear-gradient(90deg,#BEC5C6 0%,#F4FCFF 100%);
  --grad-paper:         linear-gradient(90deg,#F8F8F8 0%,#BBDDED 100%);
  --grad-paperFlip:     linear-gradient(90deg,#BBDDED 0%,#F8F8F8 100%);
  --grad-purple:        linear-gradient(30deg,rgba(129, 206, 244, 0.09) 18.21%, rgba(143, 112, 234, 0.14) 81.79%);
}

/* ================================
   RESPONSIVE TYPE TOKENS (Divi bp)
   Tablet ≤980px, Mobile ≤767px, Small ≤479px
   ================================ */

/* Tablet */
@media (max-width:980px){
  :root{
    --h1-size:56px;  --h1-lh:115%;
    --h2-size:40px;  --h2-lh:120%; --h2-ls:-1px;
    --h3-size:32px;  --h3-lh:125%;
    --h4-size:24px;  --h4-lh:125%;
    --h5-size:18px;  --h5-lh:120%;

    --sub-size:16px;  --sub-lh:140%;
    --body-size:16px; --body-lh:150%;
    --small-size:13px;--small-lh:130%;
  }
}

/* Mobile */
@media (max-width:767px){
  :root{
    --h1-size:40px;  --h1-lh:120%;
    --h2-size:32px;  --h2-lh:125%; --h2-ls:0px;
    --h3-size:24px;  --h3-lh:130%;
    --h4-size:20px;  --h4-lh:130%;
    --h5-size:16px;  --h5-lh:125%;

    --sub-size:15px;  --sub-lh:140%;
    --body-size:16px; --body-lh:150%;
    --small-size:13px;--small-lh:130%;
  }
}

/* Small phones */
@media (max-width:479px){
  :root{
    --h1-size:34px;  --h1-lh:122%;
    --h2-size:28px;  --h2-lh:125%;
    --h3-size:22px;  --h3-lh:130%;
    --h4-size:18px;  --h4-lh:130%;
    --h5-size:16px;  --h5-lh:125%;

    --sub-size:14px;  --sub-lh:140%;
    --body-size:15px; --body-lh:150%;
    --small-size:12px;--small-lh:130%;
  }
}