/* ============================================================================
   Re.lief design system — SEMANTIC tokens + Ionic bridge (layer 2 of 3)
   Roles (named by JOB) mapped from primitives.css, plus the Ionic 8.4.3 bridge.
   Components consume ONLY the semantic tokens below — never a primitive, never a hex.

   Three Ionic traps this file is built around (verified against the installed
   8.4.3 dist, adversarial review 2026-08-03):
     (a) every colour role emits ALL SIX variants incl. -contrast-rgb, else
         segment / tab-bar / searchbar keep a stale white foreground;
     (b) stepped colours use the NEW names (--ion-background-color-step-* /
         --ion-text-color-step-*) defined for BOTH light and dark — Ionic 8 ships
         no light-mode steps, so undefined = hardcoded greys. The legacy
         --ion-color-step-* is deliberately never defined.
     (c) dark overrides live on the TWO-class selector
         html.ion-palette-dark.md, html.ion-palette-dark.ios — Ionic's own surface
         overrides are two-class and beat a plain html.ion-palette-dark.
   ============================================================================ */

:root {
  /* ── Surface + ink roles ────────────────────────────────────────────────── */
  --surface-page:   var(--porcelain-page);
  --surface-card:   var(--porcelain-card);
  --surface-raised: var(--porcelain-raised);
  --line:           var(--porcelain-line);
  --line-strong:    var(--porcelain-line-strong);
  --ink:            var(--ink-900);
  --ink-muted:      var(--ink-500);
  --ink-faint:      var(--ink-400); /* decorative/graphic ONLY — never text */

  /* ── Brand + accent ─────────────────────────────────────────────────────── */
  --brand-face:        var(--sage-500); /* fills / illustration only */
  --brand-interactive: var(--sage-600); /* text / buttons / links / dots / focus */
  --accent:            var(--terra-500); /* terracotta is now the accent / pain signal */
  --accent-surface:    var(--terra-100); /* tinted card / chip surface */
  --accent-border:     var(--terra-300);

  /* ── Status (base / surface tint / border tint / on-colour) ─────────────── */
  --status-success-base: var(--green-base); --status-success-surface: var(--green-surface); --status-success-border: var(--green-border); --status-success-on: #ffffff;
  --status-warning-base: var(--amber-base); --status-warning-surface: var(--amber-surface); --status-warning-border: var(--amber-border); --status-warning-on: #ffffff;
  --status-danger-base:  var(--red-base);   --status-danger-surface:  var(--red-surface);   --status-danger-border:  var(--red-border);   --status-danger-on:  #ffffff;

  /* ── Pain scale (role aliases onto the primitive ramp) ──────────────────── */
  --pain-scale-0: var(--pain-0); --pain-scale-0-ink: var(--pain-0-on);
  --pain-scale-1: var(--pain-1); --pain-scale-1-ink: var(--pain-1-on);
  --pain-scale-2: var(--pain-2); --pain-scale-2-ink: var(--pain-2-on);
  --pain-scale-3: var(--pain-3); --pain-scale-3-ink: var(--pain-3-on);
  --pain-scale-4: var(--pain-4); --pain-scale-4-ink: var(--pain-4-on);
  --pain-scale-5: var(--pain-5); --pain-scale-5-ink: var(--pain-5-on);
  --pain-scale-6: var(--pain-6); --pain-scale-6-ink: var(--pain-6-on);
  --pain-scale-7: var(--pain-7); --pain-scale-7-ink: var(--pain-7-on);
  --pain-scale-8: var(--pain-8); --pain-scale-8-ink: var(--pain-8-on);
  --pain-scale-9: var(--pain-9); --pain-scale-9-ink: var(--pain-9-on);
  --pain-scale-10: var(--pain-10); --pain-scale-10-ink: var(--pain-10-on);
  --pain-selection-ring: var(--pain-selection-ring);

  /* ── Recovery strip (fills-only; RecoveryStrip.vue is its only consumer) ── */
  --strip-start: var(--strip-apricot);
  --strip-end:   var(--strip-sage);
  --strip-track: var(--porcelain-deep);

  /* ── Elevation, focus, chips, fields ────────────────────────────────────── */
  --elevation-1: var(--elevation-1);
  --elevation-2: var(--elevation-2);
  --elevation-3: var(--elevation-3);
  --focus-ring: var(--brand-interactive);

  --chip-surface: transparent;
  --chip-ink: var(--ink-700);
  --chip-selected-surface: var(--sage-100);
  --chip-selected-ink: var(--sage-700);
  --chip-selected-border: var(--sage-600);

  --field-background: var(--surface-card);
  --field-color: var(--ink-900);
  --field-placeholder: #7f7263; /* ≥4.5:1 on the field surface */
  --field-border: var(--line-strong);
  --field-highlight: var(--brand-interactive);

  --skeleton-base: var(--porcelain-deep);
  --skeleton-sheen: var(--porcelain-raised);

  /* ══ Ionic bridge — all six variants per role ═══════════════════════════ */
  --ion-color-primary: #47734e; --ion-color-primary-rgb: 71, 115, 78; --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255, 255, 255; --ion-color-primary-shade: #3e6544; --ion-color-primary-tint: #59815f;
  --ion-color-secondary: #b1552f; --ion-color-secondary-rgb: 177, 85, 47; --ion-color-secondary-contrast: #ffffff; --ion-color-secondary-contrast-rgb: 255, 255, 255; --ion-color-secondary-shade: #9c4b29; --ion-color-secondary-tint: #b9663f;
  --ion-color-tertiary: #d98a5a; --ion-color-tertiary-rgb: 217, 138, 90; --ion-color-tertiary-contrast: #2e2621; --ion-color-tertiary-contrast-rgb: 46, 38, 33; --ion-color-tertiary-shade: #bf794f; --ion-color-tertiary-tint: #dd966a;
  --ion-color-success: #4c6b4e; --ion-color-success-rgb: 76, 107, 78; --ion-color-success-contrast: #ffffff; --ion-color-success-contrast-rgb: 255, 255, 255; --ion-color-success-shade: #435e45; --ion-color-success-tint: #5e7a60;
  --ion-color-warning: #9a5b04; --ion-color-warning-rgb: 154, 91, 4; --ion-color-warning-contrast: #ffffff; --ion-color-warning-contrast-rgb: 255, 255, 255; --ion-color-warning-shade: #885004; --ion-color-warning-tint: #a46b1d;
  --ion-color-danger: #a3232b; --ion-color-danger-rgb: 163, 35, 43; --ion-color-danger-contrast: #ffffff; --ion-color-danger-contrast-rgb: 255, 255, 255; --ion-color-danger-shade: #8f1f26; --ion-color-danger-tint: #ac3941;
  --ion-color-medium: #716556; --ion-color-medium-rgb: 113, 101, 86; --ion-color-medium-contrast: #ffffff; --ion-color-medium-contrast-rgb: 255, 255, 255; --ion-color-medium-shade: #635947; --ion-color-medium-tint: #7f7463;
  --ion-color-dark: #2e2621; --ion-color-dark-rgb: 46, 38, 33; --ion-color-dark-contrast: #ffffff; --ion-color-dark-contrast-rgb: 255, 255, 255; --ion-color-dark-shade: #282019; --ion-color-dark-tint: #43392f;
  --ion-color-light: #fbf6ef; --ion-color-light-rgb: 251, 246, 239; --ion-color-light-contrast: #2e2621; --ion-color-light-contrast-rgb: 46, 38, 33; --ion-color-light-shade: #ddd9d2; --ion-color-light-tint: #fffefb;

  --ion-background-color: #faf7f2; --ion-background-color-rgb: 250, 247, 242;
  --ion-text-color: #2e2621; --ion-text-color-rgb: 46, 38, 33;
  --ion-font-family: var(--font-text); /* Figtree, self-hosted (fonts.css) */

  --ion-item-background: #fffefb;
  --ion-toolbar-background: #faf7f2;
  --ion-card-background: #fffefb;

  /* Stepped colours — LIGHT (new names only; generated warm-neutral ramp) */
  --ion-background-color-step-50: #f0ede8;
  --ion-background-color-step-100: #e6e2dd;
  --ion-background-color-step-150: #dbd8d3;
  --ion-background-color-step-200: #d1cdc8;
  --ion-background-color-step-250: #c7c3be;
  --ion-background-color-step-300: #bdb8b3;
  --ion-background-color-step-350: #b3aea9;
  --ion-background-color-step-400: #a8a39e;
  --ion-background-color-step-450: #9e9994;
  --ion-background-color-step-500: #948f8a;
  --ion-background-color-step-550: #8a847f;
  --ion-background-color-step-600: #807a75;
  --ion-background-color-step-650: #756f6a;
  --ion-background-color-step-700: #6b6560;
  --ion-background-color-step-750: #615a55;
  --ion-background-color-step-800: #57504b;
  --ion-background-color-step-850: #4d4540;
  --ion-background-color-step-900: #423b36;
  --ion-background-color-step-950: #38302b;
  --ion-text-color-step-50: #38302b;
  --ion-text-color-step-100: #423b36;
  --ion-text-color-step-150: #4d4540;
  --ion-text-color-step-200: #57504b;
  --ion-text-color-step-250: #615a55;
  --ion-text-color-step-300: #6b6560;
  --ion-text-color-step-350: #756f6a;
  --ion-text-color-step-400: #807a75;
  --ion-text-color-step-450: #8a847f;
  --ion-text-color-step-500: #948f8a;
  --ion-text-color-step-550: #9e9994;
  --ion-text-color-step-600: #a8a39e;
  --ion-text-color-step-650: #b3aea9;
  --ion-text-color-step-700: #bdb8b3;
  --ion-text-color-step-750: #c7c3be;
  --ion-text-color-step-800: #d1cdc8;
  --ion-text-color-step-850: #dbd8d3;
  --ion-text-color-step-900: #e6e2dd;
  --ion-text-color-step-950: #f0ede8;
}

/* ── DARK — two-class selector so it beats Ionic's .ion-palette-dark.md/.ios ── */
html.ion-palette-dark.md,
html.ion-palette-dark.ios {
  --surface-page:   var(--dark-page);
  --surface-card:   var(--dark-card);
  --surface-raised: var(--dark-raised);
  --line:           var(--dark-line);
  --line-strong:    var(--porcelain-line-strong); /* #948773 ≥3:1 on dark card too */
  --ink:            var(--dark-ink);
  --ink-muted:      var(--dark-ink-muted);
  --ink-faint:      #7d7062;

  --brand-interactive: var(--sage-400); /* dark CTA = light sage on dark ink */
  --focus-ring:        var(--sage-400);

  --elevation-1: var(--elevation-1-dark);
  --elevation-2: var(--elevation-2-dark);
  --elevation-3: var(--elevation-3-dark);

  --chip-selected-surface: var(--sage-700);
  --chip-selected-ink: var(--sage-100);
  --chip-selected-border: var(--sage-400);

  --field-background: var(--dark-card);
  --field-color: var(--dark-ink);
  --field-placeholder: var(--dark-ink-muted);

  --skeleton-base: var(--dark-line);
  --skeleton-sheen: var(--dark-raised);

  /* Ionic bridge — dark. Primary is a light sage (dark ink on it). */
  --ion-color-primary: #8fae8a; --ion-color-primary-rgb: 143, 174, 138; --ion-color-primary-contrast: #26332a; --ion-color-primary-contrast-rgb: 38, 51, 42; --ion-color-primary-shade: #7e997a; --ion-color-primary-tint: #9ab695;

  --ion-background-color: #1b1712; --ion-background-color-rgb: 27, 23, 18;
  --ion-text-color: #efe8dc; --ion-text-color-rgb: 239, 232, 220;
  --ion-item-background: #262019;
  --ion-toolbar-background: #1b1712;
  --ion-card-background: #262019;
  --ion-tab-bar-background: #1b1712;

  /* Stepped colours — DARK */
  --ion-background-color-step-50: #26211c;
  --ion-background-color-step-100: #302c26;
  --ion-background-color-step-150: #3b3630;
  --ion-background-color-step-200: #45413a;
  --ion-background-color-step-250: #504b45;
  --ion-background-color-step-300: #5b564f;
  --ion-background-color-step-350: #656059;
  --ion-background-color-step-400: #706b63;
  --ion-background-color-step-450: #7a756d;
  --ion-background-color-step-500: #858077;
  --ion-background-color-step-550: #908a81;
  --ion-background-color-step-600: #9a948b;
  --ion-background-color-step-650: #a59f95;
  --ion-background-color-step-700: #afa99f;
  --ion-background-color-step-750: #bab4aa;
  --ion-background-color-step-800: #c5beb4;
  --ion-background-color-step-850: #cfc9be;
  --ion-background-color-step-900: #dad3c8;
  --ion-background-color-step-950: #e4ded2;
  --ion-text-color-step-50: #e4ded2;
  --ion-text-color-step-100: #dad3c8;
  --ion-text-color-step-150: #cfc9be;
  --ion-text-color-step-200: #c5beb4;
  --ion-text-color-step-250: #bab4aa;
  --ion-text-color-step-300: #afa99f;
  --ion-text-color-step-350: #a59f95;
  --ion-text-color-step-400: #9a948b;
  --ion-text-color-step-450: #908a81;
  --ion-text-color-step-500: #858077;
  --ion-text-color-step-550: #7a756d;
  --ion-text-color-step-600: #706b63;
  --ion-text-color-step-650: #656059;
  --ion-text-color-step-700: #5b564f;
  --ion-text-color-step-750: #504b45;
  --ion-text-color-step-800: #45413a;
  --ion-text-color-step-850: #3b3630;
  --ion-text-color-step-900: #302c26;
  --ion-text-color-step-950: #26211c;
}

/* The iOS modal re-derives its background from step-100 under .ion-palette-dark.ios */
html.ion-palette-dark.ios ion-modal {
  --background: var(--dark-card);
}

/* ── Typography utilities ────────────────────────────────────────────────────
   The page title renders large in Figtree with the brand title-dot, in
   ion-content (screens drop the toolbar ion-title text during migration, S6/S7).
   The dot is CSS-generated (content:"") so screen readers never announce it. */
.ds-page-title {
  font-family: var(--font-text);
  font-size: var(--text-title);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 var(--space-3);
}
.ds-page-title::after {
  content: "";
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  margin-left: 0.16em;
  border-radius: var(--radius-pill);
  background: var(--brand-interactive);
}

/* Fraunces is reserved for pain numerals and one hero moment per reflective
   screen — never body text, never page titles (avoids the "newspaper" read). */
.ds-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
}

/* ── Global focus-visible (replaces the ad-hoc outline sites migrated later) ── */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── Overlay + control theming that must be global (rendered outside the page
   subtree / shadow-limited) ─────────────────────────────────────────────── */
ion-toast {
  --background: var(--surface-card);
  --color: var(--ink);
  --border-radius: var(--radius-md);
  --button-color: var(--brand-interactive);
}

/* ion-alert is scoped (not shadow) → plain global CSS reaches its internals */
.alert-wrapper.sc-ion-alert-md,
.alert-wrapper.sc-ion-alert-ios {
  border-radius: var(--radius-xl);
  background: var(--surface-card);
}
.alert-title.sc-ion-alert-md,
.alert-title.sc-ion-alert-ios,
.alert-message.sc-ion-alert-md,
.alert-message.sc-ion-alert-ios {
  color: var(--ink);
}

/* ion-datetime themed within Ionic's vars + parts (terra selection) */
ion-datetime {
  --background: var(--surface-card);
  --title-color: var(--ink);
  --wheel-highlight-background: var(--terra-100);
}
ion-datetime::part(calendar-day active),
ion-datetime::part(calendar-day today),
ion-datetime::part(wheel-item active) {
  color: var(--brand-interactive);
}

/* Page background stays the warm porcelain (dark handled by the bridge above). */
ion-content {
  --background: var(--surface-page);
}

/* Buttons get the spacious radius app-wide (one place, every screen). */
ion-button {
  --border-radius: var(--radius-md);
}

/* Back button reads ink on the porcelain toolbars (was white on terracotta). */
ion-back-button {
  --color: var(--ink);
}

/* Form controls, app-wide, via the --field-* roles (Ionic default greys are an
   AA failure against porcelain). Placeholders clear 4.5:1 (contrast test). */
ion-input,
ion-textarea {
  --background: var(--field-background);
  --color: var(--field-color);
  --placeholder-color: var(--field-placeholder);
  --border-radius: var(--radius-md);
  --highlight-color-focused: var(--field-highlight);
}

/* Selected chip, app-wide (the S3-deferred global rule). Per-screen rules that
   predate it resolve to the same tokens; the Lucide icons inside inherit --color. */
ion-chip.selected {
  --background: var(--chip-selected-surface);
  --color: var(--chip-selected-ink);
}

/* Desktop container for the browser-based clinician portal — content no longer
   stretches edge-to-edge on a wide monitor. Screens apply .ds-container. */
.ds-container {
  max-width: var(--container-max);
  margin-inline: auto;
}

/* Segments: porcelain track, terracotta selected. */
ion-segment {
  --background: var(--surface-raised);
}
ion-segment-button {
  --color: var(--ink-muted);
  --color-checked: var(--brand-interactive);
  --indicator-color: var(--surface-card);
  --border-radius: var(--radius-md);
}