/*
 * Anchor brand tokens (Anchor Brand Guidelines, September 2026, and anchorhealth.com).
 * Purple #36285c on warm cream #fbf4e4; plum, lavender, periwinkle, yellow and sage as
 * tints; Instrument Sans for text, IBM Plex Mono for small uppercase labels; pill buttons.
 */
:root {
  color-scheme: light;
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Brand */
  --brand-purple: #36285c;
  --brand-warm: #fbf4e4;
  --brand-plum: #552871;
  --brand-lavender: #ab98c3;
  --brand-peri: #d9d2ff;
  --brand-yellow: #fdf9ca;
  --brand-sage: #9ebdab;
  --brand-night: #1e1736;
  --brand-danger: #a3243b;
  --orb: radial-gradient(circle, #fffcf0 0%, #f1e2cb 20%, #c9bacb 46%, #9d93c2 74%, #8a82b6 100%);

  /* Surfaces and text */
  --page: #fbf4e4;
  --surface: #fdf9ef;
  --surface-raised: #ffffff;
  --surface-subtle: #f4ecda;
  --ink: #1e1736;
  --ink-soft: #36285c;
  --text: #46396c;
  --muted: #6f6688;
  --quiet: #a39bb5;
  --border: #e7deda;
  --border-strong: #cfc3cf;
  --focus: #552871;
  --focus-soft: rgba(85, 40, 113, 0.18);
  --login-mesh:
    radial-gradient(90% 85% at 0% 0%, #b7b8ff 0%, rgba(183, 184, 255, 0) 62%),
    radial-gradient(70% 70% at 100% 8%, #d9d2ff 0%, rgba(217, 210, 255, 0) 66%),
    radial-gradient(75% 60% at 28% 92%, #fdf3c6 0%, rgba(253, 243, 198, 0) 70%),
    #fbf4e4;

  /* Semantic accents, tuned to the brand tints */
  --amber: #8a5a14;
  --amber-mid: #c9942e;
  --amber-soft: #fdf9ca;
  --green: #3b6b55;
  --green-deep: #2f5a46;
  --green-soft: #e4efe8;
  --teal: #2f6e68;
  --teal-soft: #deecea;
  --blue: #4a56a6;
  --blue-soft: #e9e7ff;
  --red: #a3243b;
  --red-warm: #a3243b;
  --red-soft: #f6e1e4;
  --purple: #552871;
  --purple-soft: #ece4f1;

  --stage-potential: #6f6688;
  --stage-potential-bg: #ffffff;
  --stage-potential-badge: #f1ecf4;
  --stage-insurance: #8a5a14;
  --stage-insurance-bg: #fdf9ca;
  --stage-insurance-badge: #f3eaa6;
  --stage-forms: #552871;
  --stage-forms-bg: #ece4f1;
  --stage-forms-badge: #dccbe6;
  --stage-scheduling: #3b6b55;
  --stage-scheduling-bg: #e4efe8;
  --stage-scheduling-badge: #c9dfd2;
  --stage-waitlist: #4a56a6;
  --stage-waitlist-bg: #e9e7ff;
  --stage-waitlist-badge: #d9d2ff;
  --stage-noshow: #a3243b;
  --stage-noshow-bg: #f6e1e4;
  --stage-noshow-badge: #efc7cd;
  --stage-firstnote: #2f6e68;
  --stage-firstnote-bg: #deecea;
  --stage-firstnote-badge: #bedad6;
  --stage-checkin: #36285c;
  --stage-checkin-bg: #e6e1ef;
  --stage-checkin-badge: #d1c8e3;

  --radius-1: 6px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-panel: 20px;
  --radius-pill: 999px;
  --shadow-low: 0 1px 2px rgba(54, 40, 92, 0.06);
  --shadow-float: 0 14px 38px rgba(30, 23, 54, 0.16);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rail-width: 68px;
  --sidebar-width: 216px;
  --header-height: 84px;
  --tap: 40px;

  --color-page: var(--page);
  --color-surface: var(--surface-raised);
  --color-surface-subtle: var(--surface-subtle);
  --color-cream: var(--surface);
  --color-chip: #f1ecf4;
  --color-ink: var(--ink);
  --color-ink-soft: var(--ink-soft);
  --color-text: var(--text);
  --color-muted: #5f5678;
  --color-muted-strong: var(--muted);
  --color-disabled: var(--quiet);
  --color-border: var(--border);
  --color-border-strong: var(--border-strong);
  --color-border-soft: #eee7e2;

  --color-amber-50: #fefcef;
  --color-amber-100: #fdf9ca;
  --color-amber-300: #ead98a;
  --color-amber-500: #c9942e;
  --color-amber-700: #8a5a14;
  --color-amber-ring: rgba(138, 90, 20, 0.16);
  --color-green-50: #eef5f0;
  --color-green-100: #e4efe8;
  --color-green-500: #3b6b55;
  --color-green-600: #345f4c;
  --color-green-700: #2f5a46;
  --color-teal-50: #eaf3f1;
  --color-teal-100: #deecea;
  --color-teal-200: #bedad6;
  --color-teal-600: #2f6e68;
  --color-teal-700: #1f6e68;
  --color-blue-50: #f0eeff;
  --color-blue-100: #e9e7ff;
  --color-blue-500: #5a66b8;
  --color-blue-600: #4a56a6;
  --color-red-50: #faeef0;
  --color-red-100: #f6e1e4;
  --color-red-500: #b4304a;
  --color-red-600: #a3243b;
  --color-red-700: #8c1f33;
  --color-purple-50: #f3eef6;
  --color-purple-100: #ece4f1;
  --color-purple-200: #dccbe6;
  --color-purple-500: #552871;
  --color-purple-600: #36285c;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --shadow-card: var(--shadow-low);
  --shadow-card-hover: 0 8px 24px rgba(54, 40, 92, 0.1);
  --shadow-modal: 0 24px 64px rgba(30, 23, 54, 0.2);
  --shadow-toast: 0 12px 36px rgba(30, 23, 54, 0.18);
  --focus-color: var(--focus);
  --focus-ring: 0 0 0 3px var(--focus-soft);
  --transition-fast: 140ms ease;
  --transition-base: 200ms ease;
}


@font-face {
  font-family: "Instrument Sans";
  src: url("/workspace/fonts/instrument-sans-var.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/workspace/fonts/instrument-sans-italic-var.woff2") format("woff2-variations");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/workspace/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/workspace/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}