/* Flexa DS — color tokens. Lifted verbatim from Flexa Design System.dc.html.
   ONE name-set; dark is a scoped override below (never --d-*). */
:root {
  /* Neutral / shared chrome */
  --bg: #f7f5f1;
  --surface: #ffffff;
  --surface-alt: #efece6;
  --ink: #20242b;
  --ink-2: #5a6170;
  --ink-3: #9aa0ac;
  --line: #e4e0d8;

  /* Wellness accent (dusty mauve) */
  --w-accent: #a96a7b;
  --w-accent-ink: #8e5265;
  --w-accent-soft: #f5ebee;

  /* Care / physio accent (cedar teal) */
  --c-accent: #2e8c7f;
  --c-accent-ink: #256f66;
  --c-accent-soft: #e7f2f0;

  /* Text/icons on accent fills */
  --on-accent: #ffffff;

  /* Keyboard focus ring */
  --focus: rgba(46, 140, 127, 0.45);

  /* Semantic — system states only, never pain/adherence */
  --success: #2f7d5b;
  --success-soft: #e8f3ee;
  --warn: #b97a24;
  --warn-soft: #f9f0e1;
  --error: #bf4a42;
  --error-soft: #f9e9e8;
  --info: #3d6fa5;
  --info-soft: #e9f0f7;

  /* Overlay & utility (from prototype sheets/toasts) */
  --scrim: rgba(32, 36, 43, 0.38);
  --handle: #d8d4cc;
  --toast-bg: #20242b;
  --toast-fg: #f2efea;

  /* Media overlay chrome (Amendment 2) — badges/viewer sit on photography,
     so they stay near-black in BOTH themes */
  --media-bg: #20242b;
  --media-fg: #f2efea;
  --media-fg-dim: #7d7a72;
  --media-chip: rgba(242, 239, 234, 0.14);
  --media-scrim: rgba(32, 36, 43, 0.75);
  --media-tag: rgba(255, 255, 255, 0.92);
  --media-tag-ink: #20242b;
}

/* Explicit light — pins a node (or the root) to light values regardless of ancestor
   theme. Used by the Auto / Light / Dark setting and by always-light artifacts:
   receipts, PDFs, printable sheets, client message previews. Mirrors :root exactly. */
[data-theme='light'] {
  --bg: #f7f5f1;
  --surface: #ffffff;
  --surface-alt: #efece6;
  --ink: #20242b;
  --ink-2: #5a6170;
  --ink-3: #9aa0ac;
  --line: #e4e0d8;

  --w-accent: #a96a7b;
  --w-accent-ink: #8e5265;
  --w-accent-soft: #f5ebee;

  --c-accent: #2e8c7f;
  --c-accent-ink: #256f66;
  --c-accent-soft: #e7f2f0;

  --on-accent: #ffffff;
  --focus: rgba(46, 140, 127, 0.45);

  --success: #2f7d5b;
  --success-soft: #e8f3ee;
  --warn: #b97a24;
  --warn-soft: #f9f0e1;
  --error: #bf4a42;
  --error-soft: #f9e9e8;
  --info: #3d6fa5;
  --info-soft: #e9f0f7;

  --scrim: rgba(32, 36, 43, 0.38);
  --handle: #d8d4cc;
  --toast-bg: #20242b;
  --toast-fg: #f2efea;
  --media-bg: #20242b;
}

/* Dark theme — same names, scoped override. Values from Flexa RTL & Dark Variants.dc.html */
[data-theme='dark'] {
  --bg: #171614;
  --surface: #201f1c;
  --surface-alt: #2a2925;
  --ink: #f2efea;
  --ink-2: #b8b2a8;
  --ink-3: #7d7a72;
  --line: #3a3833;

  --w-accent: #c98ca0;
  --w-accent-ink: #d9a9ba;
  --w-accent-soft: rgba(201, 140, 160, 0.16);

  --c-accent: #5ab3a6;
  --c-accent-ink: #7cc6bb;
  --c-accent-soft: rgba(90, 179, 166, 0.16);

  /* light accents need dark text for AA */
  --on-accent: #171614;

  --focus: rgba(90, 179, 166, 0.5);

  /* dark semantics: hue held, soft tints become ~25% translucent washes (per dark prototype chips) */
  --success: #7fc4a2;
  --success-soft: rgba(47, 125, 91, 0.25);
  --warn: #d9a45c;
  --warn-soft: rgba(185, 122, 36, 0.22);
  --error: #d98079;
  --error-soft: rgba(191, 74, 66, 0.22);
  --info: #8fb4dc;
  --info-soft: rgba(61, 111, 165, 0.25);

  --scrim: rgba(0, 0, 0, 0.5);
  --toast-bg: #f2efea;
  --toast-fg: #171614;

  /* media chrome holds its near-black story; only the slab matches dark surface */
  --media-bg: #201f1c;
}