/* HopeBot console design tokens. Every colour, size and space the console uses is defined
   here and nowhere else; console/DESIGN.md explains each one and the contrast it was checked
   against. Text pairs clear 4.5:1 on the ground they land on; control borders clear 3:1.

   Context identity (BOT01): the patient side is JCF blue, the recruitment side a deep amber.
   The two differ in hue for every common kind of colour blindness, and the colour is never
   the only signal: the context name and its icon are always shown beside it. */

:root {
  color-scheme: light;

  /* Brand */
  --brand: #1E4ED8;
  --brand-strong: #1A3FB0;
  --brand-wash: #E9EEFC;

  /* Context bands: white text on each clears 6.7:1 */
  --ctx-patient: #1E4ED8;
  --ctx-patient-strong: #1A3FB0;
  --ctx-patient-wash: #E9EEFC;
  --ctx-patient-ink: #1A3FB0;
  --ctx-recruitment: #92400E;
  --ctx-recruitment-strong: #7C2D12;
  --ctx-recruitment-wash: #FDF0D5;
  --ctx-recruitment-ink: #7C2D12;
  --ctx: var(--ctx-patient);
  --ctx-strong: var(--ctx-patient-strong);
  --ctx-wash: var(--ctx-patient-wash);
  --ctx-ink: var(--ctx-patient-ink);

  /* Grounds */
  --bg: #F4F6FA;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --surface-3: #EEF2F7;
  --overlay: rgba(15, 23, 42, 0.55);

  /* Ink: 17.4 / 10.4 / 6.3 on --surface, at least 5.9 on --bg */
  --ink: #0F172A;
  --ink-2: #334155;
  --ink-3: #556170;
  --ink-inverse: #FFFFFF;
  --link: #1A3FB0;

  /* Lines: --line divides, --line-strong bounds a control (3.6:1) */
  --line: #DCE3EC;
  --line-strong: #7A8799;

  /* Status: each ink clears 4.5:1 on its own wash and on --surface */
  --ok: #166534;
  --ok-wash: #DCFCE7;
  --warn: #854D0E;
  --warn-wash: #FEF9C3;
  --danger: #B91C1C;
  --danger-wash: #FEE2E2;
  --info: #1E40AF;
  --info-wash: #DBEAFE;
  --neutral: #475569;
  --neutral-wash: #EEF2F7;
  --read: #1D4ED8;

  /* Conversation bubbles */
  --bubble-in: #FFFFFF;
  --bubble-out: #E7F0FF;
  --bubble-out-recruitment: #FFF3DC;

  /* Focus: a 3px ring that clears 3:1 on every ground it meets */
  --focus: #1E4ED8;
  --focus-on-band: #FFFFFF;

  /* Type: system faces, so nothing is downloaded and Devanagari falls back cleanly */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", "Nirmala UI", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --lh-tight: 1.25;
  --lh: 1.5;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 650;

  /* Space: a 4px grid */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* Shape and depth */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 10px 30px rgba(15, 23, 42, 0.18);

  /* Layout */
  --tap: 44px;
  --header-h: 60px;
  --nav-w: 236px;
  --bottom-nav-h: 64px;
  --content-max: 1180px;
  --gutter: 16px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t-med: 200ms;
}

/* Dark: the same roles, solved again against dark grounds. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand: #8EAEFF;
    --brand-strong: #B3C8FF;
    --brand-wash: #1B2A52;
    --ctx-patient-wash: #152349;
    --ctx-patient-ink: #A9C1FF;
    --ctx-recruitment-wash: #3A2410;
    --ctx-recruitment-ink: #FBC98A;
    --bg: #0B1220;
    --surface: #111A2E;
    --surface-2: #0E1628;
    --surface-3: #1A2540;
    --overlay: rgba(2, 6, 23, 0.7);
    --ink: #E6EDF7;
    --ink-2: #C5D0DF;
    --ink-3: #9EACC0;
    --link: #A9C1FF;
    --line: #24314D;
    --line-strong: #6A7B99;
    --ok: #6EE7A0;
    --ok-wash: #0F2A1B;
    --warn: #FCD34D;
    --warn-wash: #2E2508;
    --danger: #FCA5A5;
    --danger-wash: #3A1414;
    --info: #A9C8FF;
    --info-wash: #15244A;
    --neutral: #C5D0DF;
    --neutral-wash: #1F2A44;
    --read: #8EB4FF;
    --bubble-in: #16213A;
    --bubble-out: #1B2F5C;
    --bubble-out-recruitment: #3A2812;
    --focus: #A9C1FF;
    --shadow-1: 0 0 0 1px rgba(148, 163, 184, 0.10);
    --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #8EAEFF;
  --brand-strong: #B3C8FF;
  --brand-wash: #1B2A52;
  --ctx-patient-wash: #152349;
  --ctx-patient-ink: #A9C1FF;
  --ctx-recruitment-wash: #3A2410;
  --ctx-recruitment-ink: #FBC98A;
  --bg: #0B1220;
  --surface: #111A2E;
  --surface-2: #0E1628;
  --surface-3: #1A2540;
  --overlay: rgba(2, 6, 23, 0.7);
  --ink: #E6EDF7;
  --ink-2: #C5D0DF;
  --ink-3: #9EACC0;
  --link: #A9C1FF;
  --line: #24314D;
  --line-strong: #6A7B99;
  --ok: #6EE7A0;
  --ok-wash: #0F2A1B;
  --warn: #FCD34D;
  --warn-wash: #2E2508;
  --danger: #FCA5A5;
  --danger-wash: #3A1414;
  --info: #A9C8FF;
  --info-wash: #15244A;
  --neutral: #C5D0DF;
  --neutral-wash: #1F2A44;
  --read: #8EB4FF;
  --bubble-in: #16213A;
  --bubble-out: #1B2F5C;
  --bubble-out-recruitment: #3A2812;
  --focus: #A9C1FF;
  --shadow-1: 0 0 0 1px rgba(148, 163, 184, 0.10);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.55);
}

/* The context in force recolours the band, the eyebrow and the bubbles. */
[data-context="recruitment"] {
  --ctx: var(--ctx-recruitment);
  --ctx-strong: var(--ctx-recruitment-strong);
  --ctx-wash: var(--ctx-recruitment-wash);
  --ctx-ink: var(--ctx-recruitment-ink);
  --bubble-out: var(--bubble-out-recruitment);
}
[data-context="patient"] {
  --ctx: var(--ctx-patient);
  --ctx-strong: var(--ctx-patient-strong);
  --ctx-wash: var(--ctx-patient-wash);
  --ctx-ink: var(--ctx-patient-ink);
}