/* ============================================================
   DHEEL TECH LIMITED — Design System: Colours & Type
   Source of truth: "DHEEL TECH templete.fig" (Empki HR SaaS layout)
   Font: Satoshi (Fontshare). Brand: violet #4F14DE on near-black #232323.
   ============================================================ */

@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap");

:root {
  /* ---- Brand / Primary ---- */
  --violet:        #4F14DE;   /* primary action, accents, links            */
  --violet-700:    #3D0FB0;   /* hover / pressed primary                   */
  --violet-300:    #AE93F0;   /* light accent text on dark                 */
  --violet-100:    #D9D9FA;   /* lavender surfaces, mockup fills           */
  --violet-tint:   rgba(79,20,222,0.15); /* faint wash / chips             */

  /* ---- Neutrals (ink) ---- */
  --ink:           #232323;   /* primary text, dark sections               */
  --ink-pure:      #000000;   /* deepest dark gradient stop                */
  --grey-600:      #4F4F4F;   /* secondary text                            */
  --grey-400:      #6C6C6C;   /* tertiary / icon strokes                   */
  --grey-300:      #D9D9D9;   /* hairlines, borders, mockup lines          */

  /* ---- Surfaces ---- */
  --white:         #FFFFFF;
  --paper:         #F9F9F9;   /* off-white section background              */
  --paper-2:       #F2F2F4;   /* benefits / alt section                    */
  --surface-dark:  #1A1A1A;   /* dark feature cards                        */

  /* ---- Semantic ---- */
  --bg:            var(--white);
  --fg:            var(--ink);
  --fg-muted:      rgba(35,35,35,0.7);
  --fg-on-dark:        #FFFFFF;
  --fg-on-dark-muted:  rgba(255,255,255,0.7);
  --accent:        var(--violet);
  --line:          var(--grey-300);
  --line-dark:     rgba(255,255,255,0.10);
  --star:          #F5A623;   /* rating stars                              */

  /* ---- Type families ---- */
  --font-sans: "Satoshi", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Type scale (px @ desktop) ---- */
  --fs-display:   56px;  /* hero headline            */
  --fs-h1:        48px;
  --fs-h2:        40px;  /* section heading          */
  --fs-h3:        28px;
  --fs-h4:        24px;
  --fs-h5:        20px;
  --fs-lead:      18px;  /* body / lead              */
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-label:     13px;  /* section eyebrow label    */

  /* ---- Weights ---- */
  --w-regular: 400;
  --w-medium:  500;
  --w-bold:    700;
  --w-black:   900;

  /* ---- Tracking ---- */
  --track-tight:  -0.02em;  /* headings                */
  --track-btn:    -0.03em;  /* buttons                 */
  --track-loose:   0.01em;  /* body                    */
  --track-label:   0.18em;  /* eyebrow labels (uppercase) */

  /* ---- Radii ---- */
  --r-container: 20px;  /* hero / big section blocks   */
  --r-card:      16px;  /* cards                       */
  --r-inner:     12px;  /* nested media / chips        */
  --r-btn:       0px;   /* BUTTONS ARE SHARP-CORNERED   */
  --r-pill:      999px;

  /* ---- Spacing scale ---- */
  --sp-1: 8px;  --sp-2: 16px;  --sp-3: 24px;  --sp-4: 32px;
  --sp-5: 48px; --sp-6: 64px;  --sp-7: 80px;  --sp-8: 120px;
  --gutter: 100px;   /* desktop page side padding */
  --maxw:   1440px;  /* page max width            */

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-card: 0 8px 30px rgba(0,0,0,0.08);
  --shadow-pop: 0 20px 60px rgba(0,0,0,0.18);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.6s;
}

/* ============================================================
   SEMANTIC TYPE RULES
   ============================================================ */
.t-eyebrow {
  font: var(--w-bold) var(--fs-label)/1 var(--font-sans);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--violet);
}
.t-display {
  font: var(--w-bold) var(--fs-display)/1.1 var(--font-sans);
  letter-spacing: var(--track-tight);
  color: var(--ink);
  text-wrap: balance;
}
.t-h2 {
  font: var(--w-bold) var(--fs-h2)/1.15 var(--font-sans);
  letter-spacing: var(--track-tight);
  color: var(--ink);
  text-wrap: balance;
}
.t-h3 {
  font: var(--w-bold) var(--fs-h3)/1.2 var(--font-sans);
  letter-spacing: var(--track-tight);
  color: var(--ink);
}
.t-h4 {
  font: var(--w-bold) var(--fs-h4)/1.25 var(--font-sans);
  letter-spacing: var(--track-tight);
  color: var(--ink);
}
.t-lead {
  font: var(--w-regular) var(--fs-lead)/1.6 var(--font-sans);
  letter-spacing: var(--track-loose);
  color: var(--fg-muted);
}
.t-body {
  font: var(--w-regular) var(--fs-body)/1.6 var(--font-sans);
  color: var(--grey-600);
}

/* Responsive type — tablet & mobile */
@media (max-width: 1024px){
  :root { --fs-display: 44px; --fs-h2: 34px; --fs-h3: 26px; --gutter: 48px; }
}
@media (max-width: 640px){
  :root { --fs-display: 34px; --fs-h2: 28px; --fs-h3: 22px; --fs-h4: 20px;
          --fs-lead: 16px; --gutter: 20px; }
}