/* ─── Voice of Patient · product tokens · v1.0 · 6 October 2026 ─────────────
   A JMC Digital product. Shared role names (--p-*) across the five products,
   so a component is built once and a client's rebrand is one override file.
   Raw colours carry the --vop- prefix. Type, size, space and radius come from
   the JMC Digital layer (--jd-*); the fallbacks below are its frozen values,
   so this file also works on its own. Role names match every JMC Digital product
   (aligned 6 Oct 2026 with Jalsa's: --p-font-body-ar, --p-weight-body-ar-strong,
   --p-leading-body-ar; --p-accent is the hover step of the brand).
   Do not edit values here to restyle a deployment — override the --p- roles
   in a separate file loaded after this one. */
:root {
  /* colour · raw */
  --vop-teal:   #0F9AA8;   /* signature teal — fills only, 3.38:1 on white */
  --vop-lagoon: #0B6670;   /* text-safe brand — 6.67:1 on white; white on it 6.67:1 */
  --vop-reef:   #0D7A87;   /* one step lighter than lagoon — hover and pressed; white on it 5.06:1 */
  --vop-deep:   #08454C;   /* dark frame — sidebar, hero ground */
  --vop-aqua:   #6CCBD2;   /* light tone in the mark, chart fills — never text on light */
  --vop-spray:  #E3F4F5;   /* tint — selected rows, soft panels */

  /* colour · roles (shared names) */
  --p-brand:          var(--vop-lagoon);   /* filled buttons, active states, links */
  --p-brand-ink:      var(--vop-lagoon);   /* brand-coloured text on light surfaces */
  --p-brand-on:       #FFFFFF;             /* text on a --p-brand fill: 6.67:1 */
  --p-brand-tint:     var(--vop-spray);    /* selected rows, soft panels, active nav background */
  --p-accent:         var(--vop-reef);     /* hover and pressed on brand fills — a lighter step of the brand, still 5.06:1 with white */
  --p-ink:            var(--jd-charcoal, #111111);
  --p-ink-muted:      var(--jd-grey, #41464E);
  --p-surface:        var(--jd-white, #FFFFFF);
  --p-surface-sunken: var(--jd-panel, #F6F7F9);
  --p-surface-invert: var(--vop-deep);     /* the dark frame: side navigation, hero */
  --p-border:         var(--jd-rule, #E3E5E9);
  --p-focus:          var(--vop-teal);     /* focus ring, 2px — 3.38:1 on white */

  /* status · identical in all five products; the brand never stands for a status */
  --p-success: #1B7A43;  --p-success-tint: #E7F4EC;
  --p-warning: #8A5300;  --p-warning-tint: #FFF4D6;
  --p-danger:  #B42318;  --p-danger-tint:  #FDECEA;
  --p-info:    #1F5FAD;  --p-info-tint:    #E8F0FB;

  /* type */
  --p-font-display: var(--jd-font-display, Jost, Montserrat, Poppins, "Helvetica Neue", Arial, sans-serif);
  --p-font-body:    "IBM Plex Sans", Almarai, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --p-font-body-ar: Almarai, "IBM Plex Sans", Tahoma, "Segoe UI", Arial, sans-serif;   /* Arabic body and screens */
  --p-weight-display: var(--jd-weight-display, 500);
  --p-weight-display-strong: var(--jd-weight-display-strong, 600);
  --p-weight-body: var(--jd-weight-body, 400);
  --p-weight-body-strong: var(--jd-weight-body-strong, 500);
  --p-weight-body-ar-strong: 700;   /* Almarai has 300 / 400 / 700 / 800 — no 500 */

  /* type scale · 1.25 off 16px */
  --p-size-100: var(--jd-size-100, 0.80rem);
  --p-size-200: var(--jd-size-200, 1.00rem);
  --p-size-300: var(--jd-size-300, 1.25rem);
  --p-size-400: var(--jd-size-400, 1.563rem);
  --p-size-500: var(--jd-size-500, 1.953rem);
  --p-size-600: var(--jd-size-600, 2.441rem);
  --p-leading-tight: var(--jd-leading-tight, 1.15);
  --p-leading-body:  var(--jd-leading-body, 1.55);
  --p-leading-body-ar: 1.75;   /* Arabic needs more room for dots above and below */

  /* space · 4px base */
  --p-space-1: var(--jd-space-1, 4px);  --p-space-2: var(--jd-space-2, 8px);
  --p-space-3: var(--jd-space-3, 12px); --p-space-4: var(--jd-space-4, 16px);
  --p-space-5: var(--jd-space-5, 24px); --p-space-6: var(--jd-space-6, 32px);
  --p-space-7: var(--jd-space-7, 48px); --p-space-8: var(--jd-space-8, 64px);

  /* radius */
  --p-radius-sm: var(--jd-radius-sm, 4px); --p-radius-md: var(--jd-radius-md, 8px); --p-radius-lg: var(--jd-radius-lg, 12px);

  /* mark geometry */
  --vop-mark-clearspace: 0.174;  /* 16/92 of the mark's diameter, on all sides */
  --vop-mark-min-px: 16;         /* the full mark holds at 16 px — no small-size cut */
  --vop-mark-simple-min-px: 24;  /* one-colour cut: its gaps close below 24 px */
}

/* Dark screens are opt-in, never automatic: set data-theme="dark" on <html>. */
:root[data-theme="dark"] {
  --p-brand:          var(--vop-aqua);   /* fill; text on it is charcoal, 9.99:1 */
  --p-brand-ink:      var(--vop-aqua);   /* 9.99:1 on charcoal */
  --p-brand-on:       #111111;
  --p-brand-tint:     #0E3A40;
  --p-ink:            #FFFFFF;
  --p-ink-muted:      var(--jd-grey-400, #A9AEB7);
  --p-surface:        var(--jd-charcoal, #111111);
  --p-surface-sunken: var(--jd-charcoal-800, #2A2A2A);
  --p-surface-invert: var(--vop-deep);
  --p-border:         var(--jd-charcoal-800, #2A2A2A);
  --p-focus:          var(--vop-aqua);
}