/* ==========================================================================
   Peak Hire Services — Design tokens
   Colour values sampled directly from the approved logo artwork.
   ========================================================================== */

:root{
  /* ---- Navy: the ground and the authority ---------------------------- */
  --midnight:      #0A121D;   /* dark logo field. Hero, BFSI, footer, closing CTA */
  --ink-navy:      #152233;   /* PEAK wordmark navy. Headings, primary buttons    */
  --corp-navy:     #1F2D43;   /* raised navy panels, table heads, hover on dark   */
  --charcoal:      #2A3441;   /* body copy on light. 11.6:1 on ivory              */
  --slate:         #5A6675;   /* secondary copy, captions. 5.5:1 on ivory         */

  /* ---- Light: the space ---------------------------------------------- */
  --ivory:         #F7F5F0;   /* default page ground                              */
  --white:         #FFFFFF;   /* cards, forms, tables, light logo plate           */
  --sand:          #E8E5DF;   /* hairlines, borders, alternating bands            */
  --mist:          #D9DDE2;   /* cooler rule, from the logo's silver              */

  /* ---- Gold: the marker (people, milestones) ------------------------- */
  --gold:          #C59637;   /* core: hairlines, nodes, apex marks, active state */
  --gold-light:    #E4BC66;   /* on midnight only — 10.5:1 there                  */
  --gold-deep:     #A3721E;   /* large display type + icon strokes on light       */
  --gold-ink:      #8A5F14;   /* ONLY gold allowed on body-size type over light   */

  /* ---- Blue: the connection (search, technology) --------------------- */
  --blue:          #0758BA;   /* links, search states, focus ring on light        */
  --blue-deep:     #0A3487;   /* connective arc on light grounds                  */
  --blue-light:    #1D82CF;   /* connection lines + data points on midnight       */

  /* ---- Form semantics — never used outside a form -------------------- */
  --ok:            #1E6B4F;
  --err:           #A3341F;

  /* ---- Semantic roles ------------------------------------------------ */
  --bg:            var(--ivory);
  --bg-white:      var(--white);
  --bg-sand:       #EFECE5;
  --bg-dark:       var(--midnight);
  --fg:            var(--ink-navy);
  --fg-body:       var(--charcoal);
  --fg-soft:       var(--slate);
  --fg-dark:       #E9EBEF;
  --fg-dark-soft:  #94A2B1;
  --rule:          var(--sand);
  --rule-faint:    #F0EDE7;
  --rule-dark:     rgba(214,222,231,.15);
  --accent-ink:    var(--gold-ink);

  /* ---- Typography ---------------------------------------------------- */
  --serif: 'Source Serif 4','Source Serif Pro',Charter,'Iowan Old Style',Georgia,'Times New Roman',serif;
  --sans:  'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  --t-display:  clamp(38px, 1.76rem + 3.05vw, 72px); /* 40px @390 -> 72px @1440  */
  --t-h1:       clamp(32px, 1.61rem + 2.10vw, 56px); /* 34px @390 -> 56px @1440  */
  --t-h2:       clamp(26px, 1.43rem + 1.33vw, 42px); /* 28px @390 -> 42px @1440  */
  --t-h3:       clamp(19px, 1.20rem + .19vw, 22px);  /* 20px @390 -> 22px @1440  */
  --t-h4:       clamp(16px, .98rem + .10vw, 17px);   /* 16px @390 -> 17px @1440  */
  --t-lead:     clamp(17px, 1.02rem + .19vw, 19px);  /* 17px @390 -> 19px @1440  */
  --t-body:     clamp(16px, .98rem + .10vw, 17px);   /* 16px @390 -> 17px @1440  */
  --t-small:    15px;
  --t-data:     14.5px;
  --t-label:    12px;

  --lh-tight:   1.06;
  --lh-head:    1.14;
  --lh-body:    1.7;

  /* ---- Space: 4px base ----------------------------------------------- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --section-y:   clamp(72px, 3.20rem + 5.33vw, 128px);
  --section-y-lg:clamp(88px, 3.83rem + 6.86vw, 160px);
  --section-y-sm:clamp(56px, 2.76rem + 3.05vw, 88px);

  --container: 1320px;
  --gutter:    clamp(20px, .97rem + 1.14vw, 32px);
  --measure:   64ch;

  /* ---- Form ----------------------------------------------------------- */
  --radius:    2px;
  --radius-lg: 3px;
  --ease:      cubic-bezier(.2,.6,.2,1);
  --dur-micro: 200ms;
  --dur-comp:  400ms;
  --dur-sect:  550ms;

  --header-h:    76px;
  --header-h-sm: 64px;
}

@media (max-width: 1023px){
  :root{ --header-h:68px; --header-h-sm:60px; }
}