/*
 * rcp_ui design tokens — v2 (light theme), 2026-09-25.
 * Source of truth for every color, size and radius used by the shell.
 * Copied to apps/malla_ui/priv/static/assets/tokens.css; keep both in sync.
 * Components reference tokens, never raw hex.
 *
 * v2 takes its look from myhealthyconnect.ai: navy primary, coral highlight,
 * cool blue-grey neutrals, Nunito Sans for text and Nunito for titles, larger
 * radii and a soft navy-tinted card shadow. The site's marketing gradients are
 * not carried over. The ui/reference/access-*.html renders use these values;
 * the older renders keep v1's warm palette for layout only.
 */

:root {
  /* Surfaces (cool off-white scale) */
  --rcp-canvas:      #f2f6f9;  /* app background, rail, top bar */
  --rcp-surface-2:   #f8fafc;  /* app column (column 2), assistant panel, table header */
  --rcp-surface:     #ffffff;  /* main view, cards, menus */
  --rcp-surface-3:   #eaf1f7;  /* subtle chips, hover on surface-2 */
  --rcp-border:      #dde5eb;  /* 1px separators, card borders */
  --rcp-border-soft: #edf2f6;  /* table row separators */
  --rcp-border-menu: #cfd9e2;  /* popover/menu border */

  /* Ink */
  --rcp-ink:         #0a2b4a;  /* primary text, dark chip/button */
  --rcp-ink-2:       #5c6e7f;  /* secondary text, inactive icons (darker in `.ty-2`) */
  --rcp-ink-3:       #627486;  /* muted text, placeholders, section labels (WCAG AA on surface; darker in `.ty-2`) */
  --rcp-ink-mute:    #94a3b1;  /* decorative strokes only — not text */
  --rcp-ink-4:       #c9d4de;  /* disabled, neutral status dot, dashed borders */

  /* Accent — the single interactive color of the shell: primary buttons,
   * selection, links, focus, citation pills. A host may still swap the family
   * through brand.theme (MallaUi.Theme). */
  --rcp-accent:      #12426b;
  --rcp-accent-hover:#0a2b4a;
  --rcp-accent-soft: #e8f2f9;  /* selected row, assistant chips, citation pills */
  --rcp-on-accent:   #ffffff;  /* text/icon on accent fills */
  --rcp-on-ink:      #ffffff;  /* text/icon on ink fills */

  /* Highlight — the brand's second color. Marks where you are (active rail
   * bar, active tab underline) and the product mark; never a button, never
   * a status, never a chart series. */
  --rcp-highlight:      #e57d63;
  --rcp-highlight-soft: #fdf1ed;
  --rcp-highlight-line: #f3c2b4;  /* underline of a tree search match */

  /* The product mark's square (.topbar-logo, .rail-logo). */
  --rcp-mark-bg:     #12426b;
  --rcp-mark-fg:     #ffffff;

  /* Status — reserved; never reused as decoration or series colors */
  --rcp-warn:        #b7791f;  /* "Aviso" */
  --rcp-warn-text:   #94611a;  /* "Aviso" as text: 4.6:1 or more on every surface (WCAG AA); --rcp-warn is 3.4:1 */
  --rcp-critical:    #c8322b;  /* "Alerta", notification badge */
  --rcp-danger-text: #b42318;  /* destructive menu items */
  --rcp-ok:          #2f7a50;
  --rcp-warn-soft:   #fdf6e9;  /* "Aviso" pill and banner fill */
  --rcp-warn-line:   #f0e0bf;  /* its border */
  --rcp-ok-soft:     #e9f4ee;  /* "OK" pill fill */
  --rcp-critical-soft:#fcebea; /* "Alerta" pill and banner fill */
  --rcp-find-mark:   #fbeec9;  /* search-match highlight behind text */

  /* Avatar palette (entity identity, fixed order, never for series) */
  --rcp-avatar-1: #12426b;
  --rcp-avatar-2: #2d8f9e;
  --rcp-avatar-3: #448061;
  --rcp-avatar-4: #7c6fb0;
  --rcp-avatar-5: #b45f8c;
  --rcp-avatar-6: #4a6fa5;
  --rcp-avatar-7: #a0653f;
  --rcp-avatar-8: #d9a066;

  /* Typography */
  --rcp-font: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --rcp-font-display: "Nunito", "Nunito Sans", "Segoe UI", system-ui, sans-serif; /* view/column/panel titles, KPI values, product name */
  --rcp-text-xs:  10px;   /* smallest meta */
  --rcp-text-sm:  11.5px; /* pills, meta, rail labels, section labels (600, letter-spacing .03em, uppercase) */
  --rcp-text-base:12px;   /* secondary lines, table header */
  --rcp-text-md:  13px;   /* body, table cells, menu items, buttons */
  --rcp-text-lg:  13.5px; /* list titles, tabs, card titles */
  --rcp-text-xl:  15px;   /* panel titles */
  --rcp-text-2xl: 17px;   /* column titles */
  --rcp-text-3xl: 19px;   /* view title (letter-spacing -0.01em) */
  --rcp-text-kpi: 22px;   /* KPI value (700, display font) */

  /* Radii */
  --rcp-radius-xs: 6px;   /* pills, small chips */
  --rcp-radius-sm: 8px;   /* menu items, action rows */
  --rcp-radius-md: 10px;  /* buttons, inputs */
  --rcp-radius-lg: 12px;  /* list rows, avatars (34px), menus */
  --rcp-radius-xl: 16px;  /* cards, rail buttons, composer */
  --rcp-radius-2xl:18px;  /* assistant composer (wide) */
  --rcp-radius-pill: 999px;

  /* Layout */
  --rcp-topbar-h:      48px;   /* product bar: logo + name left, user right */
  --rcp-rail-w:        68px;
  --rcp-column-w:      300px;
  --rcp-assistant-w:   380px;
  --rcp-rail-btn:      44px;   /* rail button, min hit target */
  --rcp-control-h:     34px;   /* buttons, inputs */
  --rcp-view-pad-x:    24px;
  --rcp-view-pad-y:    20px;
  --rcp-gap:           18px;   /* between cards in a view */

  /* Icons: inline SVG, 24 viewBox, stroke 1.7, round caps/joins, no fill */
  --rcp-icon:     20px;
  --rcp-icon-sm:  16px;

  /* Elevation (navy-tinted) */
  --rcp-shadow-color: 18, 66, 107;
  --rcp-shadow-card: 0 1px 2px rgba(var(--rcp-shadow-color), 0.06), 0 12px 30px -14px rgba(var(--rcp-shadow-color), 0.22);
  --rcp-shadow-menu: 0 10px 30px rgba(var(--rcp-shadow-color), 0.16), 0 2px 6px rgba(var(--rcp-shadow-color), 0.06);
  --rcp-shadow-composer: 0 2px 10px rgba(var(--rcp-shadow-color), 0.07);
  --rcp-shadow-rail-active: 0 1px 2px rgba(var(--rcp-shadow-color), 0.08), 0 0 0 1px var(--rcp-border);

  /* Code (MallaUi.Markdown: Makeup's token classes) */
  --rcp-font-mono:     ui-monospace, "SF Mono", Menlo, monospace;
  --rcp-code-keyword:  #7b3fa0;
  --rcp-code-string:   #2c7a4b;
  --rcp-code-atom:     #12426b;
  --rcp-code-number:   #a5560f;
  --rcp-code-comment:  #7f8b99;
  --rcp-code-function: #1d5f8f;
}

/* Version 2 of the console's text (console U-16 with G-16, G-58 and G-57; owner's decision
   2026-11-11): seven sizes with no half pixels — body 14px, secondary 12px, nothing under
   11px — and the darker text greys. On with the `:type_scale` feature, which puts `.ty-2` on
   the shell; the `--ty2-*` names are what the few literal sizes of app.css snap to there, and
   are not defined at all outside it (each such literal keeps its own value as the fallback). */
.ty-2 {
  --rcp-ink-2:       #44576b;  /* secondary text, inactive icons (7.4:1 on surface) */
  --rcp-ink-3:       #5a6c7e;  /* muted text, placeholders, section labels (AA on every surface) */
  --rcp-text-xs:   11px;  /* smallest meta */
  --rcp-text-sm:   12px;  /* pills, meta, rail labels, section labels */
  --rcp-text-base: 12px;  /* secondary lines, table header */
  --rcp-text-md:   14px;  /* body, table cells, menu items, buttons */
  --rcp-text-lg:   14px;  /* list titles, tabs, card titles (with weight, not size) */
  --rcp-text-xl:   16px;  /* panel titles */
  --rcp-text-2xl:  18px;  /* column titles */
  --rcp-text-3xl:  20px;  /* view title */
  --rcp-text-kpi:  24px;  /* KPI value */
  --ty2-xs:   var(--rcp-text-xs);
  --ty2-base: var(--rcp-text-base);
  --ty2-md:   var(--rcp-text-md);
  --ty2-xl:   var(--rcp-text-xl);
  --ty2-kpi:  var(--rcp-text-kpi);
  font-size: var(--rcp-text-md);
}