/* ==========================================================================
   PiPO HRIS — LAYER 01 · DESIGN TOKENS
   The single source of truth. No component file may hardcode a visual value
   that belongs here.
   ========================================================================== */

:root {
  /* ── Neutrals ─────────────────────────────────────────────
     Two rules learned from the MylesPort build, which reads bright while
     being 47% dark by area: the light grounds are cool and near-white, not
     warm beige; and the dark grounds are a COLOUR, not near-black. A
     near-black ground makes a page feel heavy no matter how little of it
     there is. */
  --ink:        #0B1A16;   /* text — near-black with a green undertone */
  --ink-2:      #17201D;   /* deep charcoal */
  --ink-3:      #3B4744;
  --muted:      #5D6763;   /* 5.9:1 on white, 4.8:1 on the grey
                              product surfaces — measured, not chosen */
  --muted-2:    #5D6763;

  /* Dark GROUNDS — each is a colour from the identity, deepened.
     White clears 13.7:1 on the shallowest of them. */
  --ground:       #06342A;  /* emerald ink — the default dark section */
  --ground-soft:  #084034;  /* its lifted surface */
  --ground-indigo:#1C1A47;  /* indigo ink, from the logo's #3F328D */
  --ground-purple:#3A1240;  /* purple ink, from the logo's #992A90 */
  --ink-soft:   var(--ground-soft);   /* legacy alias */

  /* Light grounds — cool and bright. The tinted three let LIGHT sections
     carry the brand's other colours, so purple and indigo come back without
     adding a single dark pixel. */
  --paper:      #F4F7FA;   /* cool paper — the workhorse light section */
  --paper-2:    #FFFFFF;
  --mist:       #E7F4EF;   /* emerald tint */
  --lilac:      #F1EFFB;   /* indigo tint */
  --blush:      #FAEEF7;   /* purple tint */
  --line:       #DCE4E8;
  --line-soft:  #EAEFF2;

  /* ── Emerald — the primary ──────────────────────────────── */
  --emerald-700:#06644A;   /* text-safe: 7.2:1 on white */
  --emerald:    #087F5B;   /* primary CTA, links, active states */
  --emerald-400:#13B981;
  --emerald-300:#5FD6AC;   /* on dark: 7.6:1 */
  --emerald-tint:#E7F4EF;
  --teal:       #0B8C78;
  --teal-lt:    #2FBFA6;
  --teal-deep:  #08705F;
  --teal-tint:  #E2F3EF;

  /* ── Indigo and purple — the logo's other two, as equals ──
     Taken straight from the PiPO mark (#3F328D and #992A90) rather than the
     brighter web hues used before, which is why the logo never quite sat on
     the page. Each has a text-safe deep step and a light step for dark
     grounds; both are measured. */
  --indigo:     #3F328D;   /* the logo indigo */
  --indigo-deep:#2E2470;   /* text-safe: 13.1:1 on white */
  --indigo-lt:  #9B8EE8;   /* on dark: 4.9–5.8:1 */
  --indigo-tint:#F1EFFB;
  --indigo-line:rgba(63,50,141,.30);

  --purple:     #992A90;   /* the logo purple */
  --purple-deep:#7A2073;   /* text-safe: 9.2:1 on white */
  --purple-lt:  #D072C6;   /* on dark: 4.5–5.4:1 */
  --purple-tint:#FAEEF7;
  --purple-line:rgba(153,42,144,.30);

  /* Legacy aliases — the old violet/magenta names now resolve to the real
     brand colours, so every existing rule picks them up. */
  --violet:      var(--indigo);
  --violet-lt:   var(--indigo-lt);
  --violet-deep: var(--indigo-deep);
  --magenta:      var(--purple);
  --magenta-lt:   var(--purple-lt);
  --magenta-deep: var(--purple-deep);
  --magenta-tint: var(--purple-tint);

  --plum-900:   var(--ground);
  --plum-800:   var(--ground-soft);
  --plum-700:   #0A4A3B;
  --plum-500:   var(--indigo);

  /* ── PiPO Gold ──────────────────────────────────────────── */
  /* The ONE approved gold tone. No champagne, no muted variant.
     6.9:1 on the emerald ground, 8.2:1 on indigo — safe for text on dark.
     3.06:1 on white, so on light grounds it is a rule, an icon or a graphic,
     never body text; --gold-ink is the text step where words are needed. */
  --gold:       #B08F45;
  --gold-lt:    #D4B473;                  /* the step for dark grounds */
  --gold-ink:   #7E6226;                  /* text-safe on light: 5.7:1 */
  --gold-tint:  #F7F1E4;
  --gold-line:  rgba(176,143,69,.38);
  --gold-glow:  rgba(176,143,69,.16);

  /* ── Semantic ───────────────────────────────────────────── */
  --ok:         var(--emerald);
  --warn:       #B0862B;
  --risk:       #B8443C;

  /* ── Type — one system ──────────────────────────────────── */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ── Rhythm ─────────────────────────────────────────────── */
  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1440px;        /* widened from 1260; confirmed at this width */
  --maxw-narrow: 900px;
  /* Tightened from 9vw/144px when the homepage was trimmed: with fifty
     inner pages behind it, the homepage routes rather than explains. */
  --sec-y: clamp(64px, 7vw, 118px);

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 18px;
  --r-btn: 10px;
  --hdr-h: 76px;

  --shadow-sm: 0 1px 2px rgba(7,20,17,.05), 0 2px 8px rgba(7,20,17,.04);
  --shadow:    0 1px 3px rgba(7,20,17,.05), 0 10px 28px rgba(7,20,17,.07);
  --shadow-lg: 0 3px 10px rgba(7,20,17,.07), 0 28px 68px rgba(7,20,17,.13);
  --shadow-plum: 0 30px 80px rgba(3,10,8,.55);

  --ease: cubic-bezier(.22,.61,.36,1);

  /* ── Gradient language ──────────────────────────────────────
     Emerald -> deep teal -> the logo indigo, closing on the logo purple.
     The full four-stop version is a signature moment, not default
     styling: use --grad-ambient for atmosphere. */
  --grad-pipo: linear-gradient(120deg,
      #087F5B 0%,
      #0B8C78 32%,
      #3F328D 68%,
      #992A90 100%);

  /* the same journey, held back to a glow */
  --grad-ambient: linear-gradient(140deg,
      rgba(8,127,91,.16)  0%,
      rgba(11,140,120,.13) 38%,
      rgba(63,50,141,.13) 74%,
      rgba(153,42,144,.09) 100%);

  /* light-surface version of the same journey */
  --grad-ambient-lt: linear-gradient(140deg,
      rgba(8,127,91,.09)  0%,
      rgba(11,140,120,.07) 38%,
      rgba(63,50,141,.07) 74%,
      rgba(153,42,144,.05) 100%);

  /* a hairline that carries the full brand journey */
  --grad-rule: linear-gradient(90deg,
      transparent 0%, #087F5B 12%, #0B8C78 38%,
      #3F328D 70%, rgba(153,42,144,.60) 92%, transparent 100%);
}

:root {
  /* ── Spacing scale ──────────────────────────────────────── */
  --s-1:   4px;   --s-2:   8px;   --s-3:  12px;  --s-4:  16px;
  --s-5:  24px;   --s-6:  32px;   --s-7:  40px;  --s-8:  48px;
  --s-9:  64px;   --s-10: 80px;   --s-11: 96px;  --s-12:120px;  --s-13:160px;

  /* ── Section rhythm ─────────────────────────────────────── */
  --sec-compact: clamp(56px, 6.5vw, 96px);
  --sec-std:     clamp(76px, 9vw, 120px);
  --sec-major:   clamp(96px, 11vw, 160px);

  /* ── Containers ─────────────────────────────────────────── */
  --c-wide:    1400px;   /* product visual container */
  --c-main:    1260px;   /* standard page container  */
  --c-read:     740px;   /* long-form reading width  */

  /* ── Radius (no bubbles) ────────────────────────────────── */
  --r-xs:  6px;
  --r-shot: 18px;        /* product screenshot frame */

  /* ── Borders ────────────────────────────────────────────── */
  --b-light: 1px solid var(--line);
  --b-dark:  1px solid rgba(255,255,255,.10);
  --b-em:    1px solid rgba(8,127,91,.28);
  --b-em-dark: 1px solid rgba(19,185,129,.28);

  /* ── Shadows — four, reusable ───────────────────────────── */
  --sh-sm:   0 1px 2px rgba(7,20,17,.05), 0 2px 6px rgba(7,20,17,.04);
  --sh-md:   0 2px 6px rgba(7,20,17,.06), 0 12px 28px rgba(7,20,17,.08);
  --sh-lg:   0 4px 14px rgba(7,20,17,.08), 0 30px 70px rgba(7,20,17,.14);
  --sh-glow: 0 0 0 1px rgba(19,185,129,.16), 0 18px 60px rgba(19,185,129,.12);

  /* ── Motion ─────────────────────────────────────────────── */
  --t-fast: 180ms;
  --t-std:  300ms;
  --t-slow: 600ms;
  --e-out:  cubic-bezier(.22,.61,.36,1);
  --e-in-out: cubic-bezier(.65,.05,.36,1);

  /* ── Breakpoints (reference — used in media queries) ────── */
  /* mobile < 640 · tablet 640–1024 · desktop 1024–1440 · wide > 1440 */

  /* ── Status — deliberately distinct from brand emerald ──── */
  --st-success:   #1E9E6A;  --st-success-bg: #E6F6EF;
  --st-warning:   #B0862B;  --st-warning-bg: #FBF2DF;
  --st-warning-ink:#7E6226; /* text on the warning tint — 5.1:1. A STATUS
                               colour, deliberately not brand gold. */
  --st-error:     #B8443C;  --st-error-bg:   #F9EDEC;
  --st-info:      #3F328D;  --st-info-bg:    #EFEDFA;

  /* ── Product category accents (accents, not sub-brands) ─── */
  --cat-corehr:      var(--emerald);
  --cat-payroll:     var(--indigo);
  --cat-attendance:  var(--teal);
  --cat-leave:       var(--emerald-400);
  --cat-performance: var(--purple);
  --cat-analytics:   var(--purple-deep);
  --cat-frontline:   var(--emerald-700);
  --cat-experience:  var(--teal-lt);

  /* ── Data visualisation ramp ────────────────────────────── */
  --dv-1: #087F5B;  --dv-2: #3F328D;  --dv-3: #0B8C78;
  --dv-4: #992A90;  --dv-5: #13B981;  --dv-6: #9B8EE8;
  --dv-neutral: #A9B3AF;
  --dv-gold: #B08F45;   /* the strategic series — workforce cost */
}