/* Shared visual roles for Medcue's public and learner interfaces. */
:root {
  color-scheme: light;

  --color-bg: #EDF2F0;
  --color-bg-subtle: #E2E9E5;
  --color-surface: #FAFBF8;
  --color-surface-elevated: #FAFBF8;
  --color-surface-secondary: var(--color-bg-subtle);
  --color-surface-inverse: #202E35;
  --color-surface-inverse-hover: #34464D;
  --color-surface-inverse-selected: #34464D;
  --color-border-inverse: #899C93;
  --color-focus-inverse: #F7AD9B;
  --color-warning-inverse: #F2D388;
  --color-text: #202E35;
  --color-text-secondary: #566570;
  --color-text-tertiary: #596961;
  --color-text-inverse: #FFFFFF;
  --color-text-inverse-secondary: #D9E2E3;
  --color-border: #C2CEC7;
  --color-border-strong: #72867B;
  --color-brand: #BC4028;
  --color-brand-hover: #96331F;
  --color-link: #96331F;
  --color-brand-subtle: #FCF0EC;
  --color-accent: #0F6B38;
  --color-accent-inverse: #F7AD9B;
  --color-success: #0F6B38;
  --color-success-subtle: #EDF5EF;
  --color-warning: #8A5300;
  --color-warning-subtle: #FFF0C8;
  --color-error: #A82835;
  --color-error-subtle: #FCF0F1;
  --color-focus: #BC4028;
  --color-disabled: #5B6965;
  --color-disabled-bg: #EDF1F0;

  --font-display: 'General Sans', 'Segoe UI', Arial, sans-serif;
  --font-body: 'General Sans', 'Segoe UI', Arial, sans-serif;
  --font-clinical: 'Atkinson Hyperlegible Next', 'Segoe UI', Arial, sans-serif;
  --font-wordmark: 'General Sans', 'Segoe UI', Arial, sans-serif;
  --brand-wordmark-size: 1.5rem;
  --brand-wordmark-weight: 600;
  --brand-mark-size: 2rem;
  --brand-gap: .5rem;
  --brand-tracking: -.025em;
  --text-scale: 1;
  --type-display: calc(clamp(2.125rem, 3.8vw, 3.75rem) * var(--text-scale));
  --type-h1: calc(clamp(1.75rem, 2.4vw, 2.25rem) * var(--text-scale));
  --type-h2: calc(clamp(1.375rem, 1.8vw, 1.875rem) * var(--text-scale));
  --type-h3: calc(1.125rem * var(--text-scale));
  --type-h4: calc(1rem * var(--text-scale));
  --type-body-lg: calc(1.125rem * var(--text-scale));
  --type-body: calc(1rem * var(--text-scale));
  --type-body-sm: calc(.875rem * var(--text-scale));
  --type-label: calc(.875rem * var(--text-scale));
  --type-caption: calc(.8125rem * var(--text-scale));
  --type-metadata: calc(.75rem * var(--text-scale));
  --type-clinical: calc(1.0625rem * var(--text-scale));
  --medcue-user-font-size: var(--type-clinical);
  --leading-heading: 1.15;
  --leading-body: 1.55;
  --leading-clinical: 1.6;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --section-space: clamp(3rem, 6vw, 5.5rem);
  --layout-gutter: clamp(1rem, 3vw, 2.5rem);
  --layout-gap: clamp(1.25rem, 3vw, 3rem);
  --layout-content: 80rem;
  --layout-wide: 90rem;
  --layout-prose: 45rem;
  --layout-reading: 72ch;
  --layout-rail: 13.5rem;

  --radius-xs: .1875rem;
  --radius-sm: .375rem;
  --radius-md: .5rem;
  --radius-lg: .625rem;
  --shadow-raised: 0 4px 16px rgb(32 46 53 / 6%);
  --shadow-overlay: 0 12px 32px rgb(32 46 53 / 12%);
  --control-height: 2.75rem;
  --duration-fast: 140ms;
  --duration-normal: 200ms;
  --duration-slow: 280ms;
  --ease-standard: cubic-bezier(.2, 0, .2, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* Existing domain styles can move to the roles above without changing at once. */
  --mc-coral: var(--color-brand);
  --mc-coral-dark: var(--color-brand-hover);
  --mc-ink: var(--color-text);
  --mc-ink-muted: var(--color-text-secondary);
  --mc-paper: var(--color-bg);
  --mc-sheet: var(--color-surface);
  --mc-recessed: var(--color-bg-subtle);
  --mc-rule: var(--color-border);
  --mc-rule-strong: var(--color-border-strong);
  --mc-green: var(--color-success);
  --mc-green-soft: var(--color-success-subtle);
  --mc-red: var(--color-error);
  --mc-red-soft: var(--color-error-subtle);
  --mc-amber: var(--color-warning);
  --mc-amber-soft: var(--color-warning-subtle);
  --mc-focus: var(--color-focus);
  --mc-display: var(--font-display);
  --mc-body: var(--font-body);
  --mc-clinical: var(--font-clinical);
  --mc-wordmark: var(--font-wordmark);
  --mc-measure: var(--layout-reading);
  --mc-shell: var(--layout-content);
  --mc-reading: var(--layout-prose);
  --mc-radius-control: var(--radius-sm);
  --mc-radius-work: var(--radius-md);
  --mc-shadow-work: var(--shadow-raised);
  --mc-duration-fast: var(--duration-fast);
  --mc-duration-enter: var(--duration-normal);
  --mc-ease-out: var(--ease-out);
}

:root[data-text-scale="small"] { --text-scale: .8824; }
:root[data-text-scale="large"] { --text-scale: 1.1176; }
:root[data-text-scale="larger"] { --text-scale: 1.2353; }