/* ============================================================
   SHILPA GROUP — SEMICONDUCTOR & ELECTRONIC MATERIALS
   01. VARIABLES — the single source of truth
   ------------------------------------------------------------
   Design direction: shilpapharma.com (Poppins, brand teal
   #00A6AC, #F4F6F7 light bands, 1250px measure), reinterpreted
   for a premium B2B semiconductor-materials audience.

   Colour psychology
     Teal      trust, scientific credibility, clarity, precision
     Deep ink  authority, governance, permanence
     Gold      earned achievement — reserved for real credentials
     Light     openness, cleanliness, laboratory rigour

   Every text colour below is contrast-checked against the
   surface it is used on. The ratio is written next to it.
   ============================================================ */

:root {

  /* ---------- Brand teal ----------------------------------
     500 is the signature Shilpa teal. It measures 2.98:1 on
     white, so it is NEVER used for text on a light surface —
     only fills, rules, icons and type on navy. 700 and 800 are
     the text-safe members of the same hue family.            */
  --brand-050: #EAF7F7;
  --brand-100: #CFEDEE;
  --brand-200: #A6DFE1;
  --brand-300: #6BCBCF;
  --brand-400: #21B5BB;
  --brand-500: #00A6AC;   /* signature — fills / rules / on-navy      */
  --brand-600: #008C92;   /* hover fill                               */
  --brand-700: #007276;   /* 5.7:1 on white — body-size text, buttons */
  --brand-800: #005A5E;   /* 8.1:1 on white — headings                */
  --brand-900: #04403F;

  /* ---------- Ink (slate-navy) ---------------------------- */
  --ink-900: #0E2233;   /* 15.8:1 on white — headings      */
  --ink-800: #1C3346;
  --ink-700: #33495A;   /* 9.1:1  on white — strong body   */
  --ink-500: #5B7185;   /* 5.1:1  on white — muted body    */
  --ink-400: #8195A5;   /* 3.2:1  — decorative / large only */
  --ink-300: #AEBFCB;

  /* ---------- Credential gold -----------------------------
     Reserved for genuinely earned credentials (EcoVadis Gold).
     Never used as a decorative accent.                       */
  --gold-500: #C8992F;
  --gold-600: #A87C1D;   /* 4.6:1 on white — large text only */
  --gold-050: #FBF5E6;
  --gold-100: #F0E2BE;

  /* ---------- Surfaces ------------------------------------ */
  --surface:       #FFFFFF;
  --surface-alt:   #F4F6F7;   /* the reference site's light band */
  --surface-tint:  #F1FAFA;   /* teal-tinted band                */
  --surface-sunk:  #EDF1F3;
  --navy-900:      #0B2230;   /* footer + nav drawer only        */
  --navy-800:      #123044;

  /* ---------- Lines --------------------------------------- */
  --line:        #E3E9EC;
  --line-strong: #CBD6DB;
  --line-brand:  #CFEDEE;
  --line-navy:   rgba(255, 255, 255, 0.12);

  /* ---------- On-dark text -------------------------------- */
  --on-navy:      #EDF3F6;   /* 14.2:1 on navy-900 */
  --on-navy-mut:  #A7BCC9;   /*  7.4:1 on navy-900 */

  /* ---------- Type ---------------------------------------- */
  --sans: "Poppins", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* One family across the whole site. Numeric alignment is handled
     with font-variant-numeric: tabular-nums, not a second face. */
  --mono: var(--sans);

  /* Type scale — fluid, 320px → 1440px */
  /* Reaches its 56px ceiling at 1280px rather than ~1000px, which
     is what holds the hero heading to three lines on a 1024px
     laptop without shrinking it on a true desktop. */
  --fs-display: clamp(1.875rem, 1.202rem + 2.873vw, 3.5rem);  /* 30 → 56 */
  --fs-h2:      clamp(1.625rem, 1.19rem + 1.86vw, 2.375rem); /* 26 → 38 */
  --fs-h3:      clamp(1.1875rem, 1.04rem + 0.62vw, 1.4375rem);/* 19 → 23 */
  --fs-h4:      clamp(1.0625rem, 1.02rem + 0.19vw, 1.125rem); /* 17 → 18 */
  --fs-lede:    clamp(1.0625rem, 1.00rem + 0.27vw, 1.1875rem);/* 17 → 19 */
  --fs-body:    1rem;         /* 16 */
  --fs-sm:      0.9375rem;    /* 15 */
  --fs-xs:      0.8125rem;    /* 13 */
  --fs-label:   0.6875rem;    /* 11 — uppercase labels */

  --lh-display: 1.13;
  --lh-h2:      1.2;
  --lh-h3:      1.35;
  --lh-body:    1.7;
  --lh-tight:   1.5;

  --ls-display: -0.022em;
  --ls-h2:      -0.017em;
  --ls-h3:      -0.011em;
  --ls-label:   0.11em;   /* uppercase Poppins needs less tracking than mono */

  /* ---------- Rhythm -------------------------------------- */
  --measure:  1250px;                          /* reference container */
  --measure-narrow: 760px;                     /* prose measure       */
  --gut:      clamp(1.25rem, 4vw, 2.5rem);
  --section:  clamp(3.5rem, 6.4vw, 6.25rem);   /* 56 → 100 */
  --section-tight: clamp(2.75rem, 4.6vw, 4.5rem);
  --card-pad: clamp(1.375rem, 2.2vw, 2rem);
  --nav-h:    76px;

  /* ---------- Radius -------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ---------- Elevation ----------------------------------
     Low-spread, tightly-tinted shadows. A premium surface is
     lifted, not dropped into a grey cloud.                  */
  --sh-xs: 0 1px 2px rgba(14, 34, 51, 0.04);
  --sh-sm: 0 1px 3px rgba(14, 34, 51, 0.05),
           0 6px 14px -8px rgba(14, 34, 51, 0.10);
  --sh-md: 0 2px 6px rgba(14, 34, 51, 0.05),
           0 14px 32px -14px rgba(14, 34, 51, 0.16);
  --sh-lg: 0 4px 12px rgba(14, 34, 51, 0.06),
           0 28px 56px -22px rgba(14, 34, 51, 0.22);
  --sh-brand: 0 10px 26px -12px rgba(0, 114, 118, 0.45);

  /* ---------- Motion --------------------------------------
     Deliberately restrained: the brief asks for as little
     animation as possible. These are state transitions on
     interactive elements, not entrance choreography.        */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.16s;
  --t-med:  0.24s;

  /* ---------- Layers -------------------------------------- */
  --z-nav: 90;
  --z-drawer: 89;
  --z-modal: 120;
  --z-skip: 200;
}