/* ==========================================================================
   Design tokens: Pearly Locus Medical
   --------------------------------------------------------------------------
   Every colour, size and rhythm value in the site resolves to something here.
   No component file may hard-code a hex value or a pixel gap. When the client's
   brand assets arrive, this is the only file that changes.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- colour
     Derived from the existing Pearly Locus Medical identity: gold "PEARLY",
     crimson "LOCUS", navy "MEDICAL", set in serif capitals.

     The logo's gold is a shiny bevelled gradient, which does not survive
     translation to a web interface. Rendered flat at interface sizes it turns
     muddy and reads dated. So gold is kept as a restrained accent (rules,
     eyebrows, the rewards section) and crimson carries the primary actions,
     with a navy-leaning ink underneath. The identity is preserved; the
     execution is brought up to date. */

  --brand-crimson:      #a81c24;
  --brand-crimson-dark: #8a141b;
  --brand-gold:         #c9a227;
  --brand-gold-deep:    #9a7b16;
  --brand-navy:         #152238;

  --ink:            #152238;   /* headings, primary text, the logo's navy */
  --ink-muted:      #4a5568;   /* body copy, secondary */
  --ink-subtle:     #78849a;   /* captions, meta, placeholders */

  --surface:        #ffffff;
  --surface-sunken: #f8f6f2;   /* alternating sections, warm and "pearly" */
  --surface-raised: #ffffff;

  --line:           #e6e2da;   /* hairlines, card borders */
  --line-strong:    #cec8bd;

  --accent:         var(--brand-crimson);
  --accent-hover:   var(--brand-crimson-dark);
  --accent-ink:     #6e1016;   /* text on soft accent */
  --accent-soft:    #fbeeee;   /* accent-tinted surfaces */

  --gold-soft:      #faf3e0;
  --gold-line:      #e8d9a8;

  /* ------------------------------------------------- brand red surfaces
     The footer and the VITALA panels are filled with the brand red rather
     than the navy ink they previously used.

     The text values here are tuned for THIS ground and are not the ones used
     on the navy. White on the navy gave 15.9:1; on this red it gives 7.35:1,
     so every muted grey had to be lifted. The old 72% white would land at
     4.42:1, below AA for body text. The brand gold is worse still at 3.04:1
     against this red, so the footer wordmark uses a paler gold that keeps the
     gold reading while clearing 5.2:1. */
  --surface-brand:    #a81c24;
  --on-brand:         #ffffff;
  --on-brand-strong:  color-mix(in srgb, #fff 88%, var(--surface-brand));  /* 5.99:1 */
  --on-brand-muted:   color-mix(in srgb, #fff 80%, var(--surface-brand));  /* 5.18:1 */
  --on-brand-subtle:  color-mix(in srgb, #fff 70%, var(--surface-brand));  /* 4.26:1, large text only */
  --on-brand-line:    color-mix(in srgb, #fff 26%, var(--surface-brand));
  --on-brand-gold:    #f0d98a;                                             /* 5.25:1 */

  /* WhatsApp's green, darkened from its #25D366 so the white icon clears the
     3:1 contrast a control needs (3.1:1 here; the brand green gives 2:1). */
  --whatsapp:           #1da851;
  --whatsapp-hover:     #178f45;

  /* The staff portal's sidebar and sign-in: the brand crimson, like the site
     footer, with the footer's text colours, which are tuned for this ground
     (the tints that suit navy fall below AA on crimson). */
  --portal-bar:         var(--surface-brand);
  --on-portal:          var(--on-brand);
  --on-portal-muted:    var(--on-brand-strong);                            /* 5.99:1 */
  --on-portal-subtle:   var(--on-brand-muted);                             /* 5.18:1 */
  --on-portal-line:     var(--on-brand-line);
  --on-portal-hover:    color-mix(in srgb, #000 18%, var(--surface-brand)); /* a darker crimson */
  --on-portal-gold:     var(--on-brand-gold);                              /* 5.25:1 */

  /* Errors sit in the same family as the brand red, so an error is never
     signalled by hue alone: every error state also carries an icon, a tinted
     panel and explicit text. */
  --warn:           #8a5a12;
  --warn-soft:      #fdf5e6;
  --danger:         #b3261e;
  --danger-soft:    #fdecea;
  --focus:          var(--brand-crimson);

  /* ------------------------------------------------------------ typography
     Serif headings against a screen-optimised sans. The serif buys editorial
     calm and a sense of establishment; Inter keeps the interface (prices,
     labels, form fields) unambiguous at small sizes. */

  --font-display: "Source Serif 4", Charter, "Iowan Old Style", Georgia, serif;
  --font-body:    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  /* Fluid modular scale, ratio ~1.25. Each step interpolates between its
     mobile and desktop size, so nothing needs a font-size media query. */
  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   clamp(1.06rem, 0.2vw + 1.02rem, 1.15rem);
  --text-lg:   clamp(1.25rem, 0.4vw + 1.16rem, 1.45rem);
  --text-xl:   clamp(1.5rem,  0.8vw + 1.33rem, 1.85rem);
  --text-2xl:  clamp(1.85rem, 1.4vw + 1.55rem, 2.4rem);
  --text-3xl:  clamp(2.2rem,  2.4vw + 1.7rem,  3.1rem);
  --text-4xl:  clamp(2.6rem,  3.6vw + 1.8rem,  4rem);

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.08em;   /* eyebrow labels, small caps */

  /* Prose measure. Long lines are the most common typographic failure on
     marketing pages; nothing that is read continuously exceeds this. */
  --measure: 68ch;
  --measure-narrow: 54ch;

  /* --------------------------------------------------------------- spacing
     A 4px-based scale. Components choose a step, never an arbitrary number. */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;
  --space-10: 8rem;

  /* Vertical rhythm between full-width sections: the main whitespace lever. */
  --section-y: clamp(var(--space-8), 7vw, var(--space-10));

  /* ---------------------------------------------------------------- layout */
  --container:      75rem;   /* 1200px */
  --container-tight: 56rem;
  --gutter: clamp(var(--space-4), 4vw, var(--space-7));

  /* ------------------------------------------------------- shape & surface
     Shadows are restrained. On a clean layout, a hairline border does the work
     that a drop shadow does on a cluttered one. */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(21 34 56 / 0.05);
  --shadow:    0 2px 8px rgb(21 34 56 / 0.06), 0 1px 2px rgb(21 34 56 / 0.04);
  --shadow-lg: 0 12px 32px rgb(21 34 56 / 0.10), 0 2px 6px rgb(21 34 56 / 0.05);

  --ring: 0 0 0 3px rgb(168 28 36 / 0.22);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 180ms;
}

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