/* ============================================================================
   SahajHRMS Design System - Design Tokens
   ----------------------------------------------------------------------------
   Extracted from the existing Sahaj website (css/logo-color.css, css/style.css,
   css/demo.css) and modernised for the SahajHRMS SaaS product site.
   Single source of truth. Import this file first, then component styles.
       <link rel="stylesheet" href="design-system/tokens.css">
   House rule: plain ASCII, Indian English, no special symbols in content.
   ========================================================================== */

:root {

  /* --- Brand: Sahaj corporate (action / primary) ------------------------- */
  --shj-blue:            #3976bc;   /* .shj-si  - primary brand blue        */
  --shj-blue-dark:       #154d8e;   /* main gradient end                    */
  --shj-blue-tint:       #e8f0f7;   /* .shj-a-bg-lgt - light blue surface   */
  --shj-grad-primary:    linear-gradient(90deg, #3976bc 0%, #154d8e 100%);

  /* --- Product identity: SahajHRMS (Sahaj logo blue theme) --------------- */
  /* From logo-color.css: .shj-si #3976bc + main-grd #3976bc->#154d8e.       */
  --hrms-ink:            #0e2a4d;   /* deep navy - footer, dark surfaces    */
  --hrms-slate:          #154d8e;   /* brand blue (dark) - gradient stop    */
  --hrms-steel:          #7d8796;   /* .shj-h logo wordmark grey            */
  --hrms-mist:           #f2f3f4;   /* .shj-h-lgt - page tint               */
  --hrms-grad-hero:      linear-gradient(135deg, #0e2a4d 0%, #154d8e 55%, #3976bc 100%);

  /* --- CTA accent (high-intent buttons only) ---------------------------- */
  --shj-amber:           #ff9900;   /* .shj-w - attention / primary CTA     */
  --shj-amber-dark:      #e68a00;   /* hover                                */
  --shj-amber-tint:      #fff4e5;   /* .shj-w-bg-lgt                        */

  /* --- Neutrals / ink --------------------------------------------------- */
  --ink-900:             #0c0d0f;   /* .shj-h-xdrk                          */
  --ink-800:             #191b1e;   /* .shj-h-drk - headings                */
  --ink-700:             #2b2f36;   /* body text                            */
  --ink-500:             #676767;   /* muted body (banner-txt p)            */
  --ink-400:             #7d8796;   /* .shj-h - secondary / captions        */
  --line:                #d9dce1;   /* borders / dividers                   */
  --surface:             #ffffff;   /* cards                                */
  --surface-2:           #f2f3f4;   /* page background / subtle panels      */
  --white:               #ffffff;

  /* --- Semantic --------------------------------------------------------- */
  --success:             #659035;   /* .shj-c green                         */
  --success-tint:        #eff3ea;
  --warning:             #ff9900;   /* reuse amber                          */
  --warning-tint:        #fff4e5;
  --danger:              #b3261e;   /* modernised from maroon .shj-s        */
  --danger-tint:         #f7e5e4;
  --info:                #196fb2;   /* .shj-a                               */
  --info-tint:           #e8f0f7;

  /* --- Sibling product accents (for cross-sell chips / "family" strip) -- */
  --prod-crm:            #659035;
  --prod-businessmate:   #4b5320;
  --prod-accounting:     #196fb2;
  --prod-payroll:        #445469;
  --prod-workflow:       #ff9900;
  --prod-schoolerp:      #800000;
  --prod-taxmate:        #583f82;

  /* --- Typography ------------------------------------------------------- */
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Type scale (1.25 major-third, rounded to the existing site's sizes) */
  --fs-display:  3.5rem;   /* 56px - hero H1                               */
  --fs-h1:       2.5rem;   /* 40px                                         */
  --fs-h2:       1.75rem;  /* 28px - section heading (site uses ~25px)     */
  --fs-h3:       1.375rem; /* 22px                                         */
  --fs-h4:       1.125rem; /* 18px                                         */
  --fs-lg:       1.25rem;  /* 20px - .font-md                              */
  --fs-body:     1rem;     /* 16px - base p                                */
  --fs-sm:       0.875rem; /* 14px                                         */
  --fs-xs:       0.75rem;  /* 12px - labels, badges                        */

  --fw-light:   300;       /* body copy weight on the live site           */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-tight:   1.15;
  --lh-heading: 1.25;
  --lh-body:    1.6;       /* ~30px on 16px, matches site                  */

  /* --- Spacing (4px base) ----------------------------------------------- */
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */

  /* --- Radius (signature: pill buttons) --------------------------------- */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;   /* cards - from the site                          */
  --radius-xl:   16px;
  --radius-pill: 100px;  /* buttons - the Sahaj signature                  */
  --radius-full: 50%;

  /* --- Elevation (softened from the site's -1px -1px 32px glow) ---------- */
  --shadow-sm:  0 1px 2px rgba(25,27,30,0.06), 0 1px 3px rgba(25,27,30,0.08);
  --shadow-md:  0 4px 12px rgba(25,27,30,0.08), 0 2px 4px rgba(25,27,30,0.06);
  --shadow-lg:  0 12px 32px rgba(57,118,188,0.16), 0 4px 8px rgba(25,27,30,0.06);
  --shadow-brand: 0 10px 30px rgba(21,77,142,0.26);

  /* --- Layout ----------------------------------------------------------- */
  --container:      1200px;
  --container-wide: 1400px;
  --gutter:         var(--space-5);

  /* --- Motion ----------------------------------------------------------- */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur:        250ms;   /* site uses ~450ms; 250 feels snappier for SaaS  */
  --dur-slow:   450ms;

  /* --- Focus ring (accessibility) --------------------------------------- */
  --focus-ring: 0 0 0 3px rgba(57,118,188,0.45);
}