/* ==========================================================================
   Eleos design tokens
   --------------------------------------------------------------------------
   The single source of truth for colour, type, space, and shape.
   Nothing downstream may hard-code a raw value that belongs here.

   Two rules keep this honest:
     1. Every token used for TEXT clears WCAG AA against the surface it sits
        on (4.5:1 body, 3:1 for text at or above 24px). Tokens marked
        "decorative" are for fills, borders, and icons only — never text.
     2. Space comes off a 4pt grid. There is no 9px, no 26px, no 44px.
   ========================================================================== */

:root {
  /* --- Colour: grape ramp -------------------------------------------------
     The brand ramp, taken from eleoslife.com. grape-500 is the wordmark
     purple. The old UI ran a second, near-identical purple (#6C2BD9)
     alongside it; this ramp replaces both. Ratios are against white. */
  --grape-900: #2d0c50;                  /* 16.41:1                          */
  --grape-800: #3c106a;                  /* 14.24:1                          */
  --grape-700: #470f8f;                  /* 12.12:1 — pressed, emphasis      */
  --grape-600: #611aad;                  /*  9.29:1                          */
  --grape-500: #6b1dbf;                  /*  8.22:1 — brand primary          */
  --grape-400: #8849ca;                  /*  5.45:1                          */
  --grape-300: #9e69d3;                  /*  3.88:1 — decorative             */
  --grape-200: #bb98e1;                  /*  2.42:1 — decorative             */
  --grape-100: #d0b7eb;                  /*  1.80:1 — decorative             */
  --grape-050: #f5eefc;                  /* tinted surface                   */

  /* --- Colour: rose ramp --------------------------------------------------
     The old #BE8299 sat at 2.91:1 and failed AA everywhere it was used.
     It survives here as a fill only; rose-600 carries all rose text. */
  --rose-600: #8e4f68;                   /*  5.75:1 — rose text              */
  --rose-500: #a8657f;                   /*  4.12:1 — decorative             */
  --rose-400: #be8299;                   /*  2.91:1 — decorative             */
  --rose-100: #fbe7f0;                   /* tinted surface                   */
  --rose-050: #fdf3f7;                   /* tinted surface, faintest         */

  /* --- Colour: neutrals ---------------------------------------------------
     Ratios below are against --bg (white). With page and card both white,
     controls can no longer rely on the ground for separation, so
     --border-control clears the 3:1 that WCAG 1.4.11 asks of a control
     boundary, while --border stays a quiet hairline for dividers. */
  --charcoal-900: #363c49;               /* 11.06:1 — brand ink              */
  --charcoal-800: #494e55;               /*  8.39:1 — brand body text        */

  --ink: var(--charcoal-900);            /* 11.06:1 — primary text           */
  --muted: #5f5f70;                      /*  6.25:1 — secondary text         */
  --muted-soft: #6a6a7c;                 /*  4.67:1 worst case — tertiary.
                                            The lightest value that still
                                            clears AA at 11px on every
                                            surface it lands on, the grape
                                            tint being the tightest.         */
  --border: #e3e0ea;                     /*  1.30:1 — dividers, decorative   */
  --border-strong: #cfcbd9;              /*  hover                           */
  --border-control: #8e86a1;             /*  3.46:1 — checkbox, control edge */
  --surface: #ffffff;
  --surface-raised: #fbfafc;             /*  resting fill for selectables    */
  --surface-sunken: #f5f5f7;
  --bg: #ffffff;

  /* --- Colour: semantic ---------------------------------------------------
     The page describes a transaction between two parties. Violet is always
     the employer, rose is always the employee — in numbers, bars, and pills
     alike. Colour carries meaning here, so it never varies for decoration. */
  --employer: var(--grape-500);
  --employer-strong: var(--grape-700);
  --employer-fill: var(--grape-300);
  --employer-tint: var(--grape-100);
  --employer-tint-faint: var(--grape-050);

  --employee: var(--rose-600);
  --employee-fill: var(--rose-400);
  --employee-tint: var(--rose-100);
  --employee-tint-faint: var(--rose-050);

  --focus: var(--grape-500);

  /* --- Type: families -----------------------------------------------------
     Brand faces, matching eleoslife.com. IBM Plex Mono is not a brand face:
     currency needs tabular figures that align down the ledger columns. */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Type: scale --------------------------------------------------------
     Seven steps, replacing the fourteen sizes the page used to carry (nine
     of which sat inside a single 4px band). Each step is far enough from
     its neighbour to read as a deliberate level. */
  --fs-100: 0.6875rem;                       /* 11px — eyebrow, legal, data  */
  --fs-200: 0.8125rem;                       /* 13px — secondary, captions   */
  --fs-300: 0.9375rem;                       /* 15px — body                  */
  --fs-400: 1.1875rem;                       /* 19px — section titles        */
  --fs-500: clamp(1.5rem, 5vw, 1.75rem);     /* 24→28 — supporting figures   */
  --fs-600: clamp(2rem, 8vw, 2.5rem);        /* 32→40 — the headline figure  */
  --fs-700: clamp(1.75rem, 6.5vw, 2.625rem); /* 28→42 — page title           */

  /* --- Type: weight ------------------------------------------------------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* --- Type: line height -------------------------------------------------- */
  --lh-solid: 1;
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.55;

  /* --- Type: tracking ----------------------------------------------------- */
  --ls-tight: -0.015em;
  --ls-eyebrow: 0.06em;

  /* --- Space: 4pt grid ---------------------------------------------------- */
  --sp-1: 0.25rem;                       /*  4 */
  --sp-2: 0.5rem;                        /*  8 */
  --sp-3: 0.75rem;                       /* 12 */
  --sp-4: 1rem;                          /* 16 */
  --sp-5: 1.5rem;                        /* 24 */
  --sp-6: 2rem;                          /* 32 */
  --sp-7: 3rem;                          /* 48 */
  --sp-8: 4rem;                          /* 64 */

  /* --- Radius ------------------------------------------------------------- */
  --r-sm: 0.375rem;                      /*  6 — checkbox                    */
  --r-md: 0.625rem;                      /* 10 — inputs, bars                */
  --r-lg: 0.875rem;                      /* 14 — selectable cards            */
  --r-full: 999px;

  /* --- Line & ring -------------------------------------------------------- */
  --bw: 1.5px;
  --ring-width: 3px;
  --ring: 0 0 0 var(--ring-width) rgb(107 29 191 / 0.32);

  /* --- Layout ------------------------------------------------------------- */
  --container: 47.5rem;                  /* 760px — page width               */
  --measure: 38rem;                      /* 608px — ~75 characters of body   */
  --tap: 2.75rem;                        /* 44px — minimum touch target      */

  /* --- Motion ------------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --ease: cubic-bezier(0.2, 0.6, 0.35, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med: 0ms;
  }
}