/* =============================================================================
   LAYER 2 — SEMANTIC ROLES (LIGHT)
   -----------------------------------------------------------------------------
   What a colour is FOR, not what it is. Everything below reads from a
   primitive; nothing below is a literal hue except where a blend between two
   ramps was needed to hold a contrast threshold (each of those is annotated).

   Layering rule: the page, an ordinary card and an elevated popup are three
   distinguishable surfaces. Pure white is spent only on the topmost layer, so
   a dialog always reads as lifted above the card it opened from. The surfaces
   are COOL now — clean slate off-whites — so the medical blue reads crisp.

       #f3f6fb  page
       #fbfcfe  card / navbar
       #ffffff  popup, dialog, drawer, input fill
============================================================================= */

:root,
[data-theme="light"],
.app-root.theme-light {
  /* ================================================= brand: primary ========
     Medical blue. The single most important action on a screen and nothing
     else: Sign In, Add Patient, Book Appointment, Save, Confirm, Record Payment.

     Note the direction of travel: hover LIFTS to a lighter blue rather than
     darkening. On an already-dark button a darker hover is barely perceptible,
     while pressed keeps going down — so the two states stay tellable apart. */
  --color-primary: var(--azure-600);
  --color-primary-hover: var(--azure-500);
  --color-primary-pressed: var(--azure-700);
  --color-primary-soft: var(--azure-50);
  --color-primary-soft-hover: var(--azure-100);
  /* Blue as TEXT / as a small mark on a light surface. One step down from the
     brand buys headroom on the tinted surfaces a link can also land on. */
  --color-primary-ink: var(--azure-700);
  --color-primary-ring: rgb(11 95 166 / 28%);
  /* Label on a filled blue button: 6.6:1 at rest, 5.0:1 on the lifted hover
     and 8:1+ while pressed. The brand carries white directly. */
  --text-on-primary: #ffffff;

  /* ================================================ brand: secondary =======
     Signature teal/cyan. Supporting positive actions, selected contextual
     controls, helpful links, the AI-handled metric, lane and avatar accents.
     Used sparingly so it reads as a signature, not decoration. */
  --color-secondary: var(--teal-600);
  --color-secondary-hover: var(--teal-700);
  --color-secondary-pressed: var(--teal-800);
  --color-secondary-soft: var(--teal-50);
  --color-secondary-soft-hover: var(--teal-100);
  --color-secondary-ink: var(--teal-700);
  --color-secondary-bright: var(--teal-400); /* gradients, dots, small marks */
  --color-secondary-ring: rgb(12 122 137 / 26%);
  --text-on-secondary: #ffffff;

  /* ================================================= brand: tertiary =======
     Cool neutral. Low-emphasis actions: Cancel, Back, Dismiss, neutral filters,
     "open a supporting menu". Never competes with primary or secondary. */
  --color-tertiary: var(--slate-700);
  --color-tertiary-hover: var(--slate-800);
  --color-tertiary-soft: var(--slate-100);
  --color-tertiary-soft-hover: var(--slate-200);
  --color-tertiary-ink: var(--slate-700);
  --text-on-tertiary: #ffffff;

  /* ============================================ backgrounds and surfaces === */
  --background-page: var(--slate-50);
  --background-workspace: var(--slate-25);

  --surface-primary: var(--slate-25);    /* standard card, navbar, rows */
  --surface-secondary: var(--slate-100); /* table heads, inner panels, seg track */
  --surface-secondary-hover: var(--slate-200); /* the secondary surface, pressed */
  --surface-tertiary: var(--azure-50);   /* soft brand-tinted container */
  --surface-elevated: var(--slate-0);    /* popups, dialogs, drawers, inputs */
  --surface-sunken: #edf1f7;             /* recessed wells, zebra tint */

  --surface-hover: #e9f0fa;              /* row / card hover — a blue-cooled step */
  /* Hover INSIDE a popup or menu, where --surface-hover sits too close to the
     elevated white it lands on. */
  --surface-menu-hover: var(--slate-100);
  --surface-selected: #d3e5f8;          /* selected row, active soft state */
  --surface-selected-hover: #bfd8f3;
  --surface-disabled: #e6ebf2;

  /* ============================================================== text ===== */
  --text-primary: var(--slate-900);
  --text-secondary: var(--slate-600);
  --text-muted: var(--slate-500);
  --text-disabled: var(--slate-400);
  --text-placeholder: #6c7887;
  --text-inverse: var(--slate-50);       /* on a dark block (toast) */

  /* ============================================================ borders ==== */
  --border-subtle: var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong: var(--slate-400);
  /* The outline that IDENTIFIES a form control has to clear 3:1 against the
     surface it sits on (WCAG 1.4.11). --slate-400 is only 2.7:1 on white, so
     form controls take this darker cool neutral instead of the decorative
     border (3.6:1 on white). */
  --border-control: #7c899a;
  --focus-ring: var(--azure-600);

  /* ============================================== status (not brand) =======
     Independent ramps. The brand blue is never a warning and never a
     cancellation; red is never a primary action. */
  --status-success: var(--green-600);
  --status-success-hover: var(--green-700);
  --status-success-soft: var(--green-50);
  --status-success-soft-hover: var(--green-100);
  --status-success-ink: var(--green-700);
  --status-success-ring: rgb(40 125 82 / 26%);

  --status-warning: var(--amber-600);
  --status-warning-hover: var(--amber-700);
  --status-warning-soft: var(--amber-50);
  --status-warning-soft-hover: var(--amber-100);
  --status-warning-ink: var(--amber-700);

  --status-danger: var(--red-600);
  --status-danger-hover: var(--red-700);
  --status-danger-soft: var(--red-50);
  --status-danger-soft-hover: var(--red-100);
  --status-danger-ink: var(--red-700);
  --status-danger-ring: rgb(177 66 60 / 28%);

  --status-info: var(--blue-600);
  --status-info-hover: var(--blue-700);
  --status-info-soft: var(--blue-50);
  --status-info-soft-hover: var(--blue-100);
  --status-info-ink: var(--blue-700);

  /* AI lane — a documented fourth semantic series (see primitives.css). */
  --status-ai: var(--violet-600);
  --status-ai-hover: var(--violet-700);
  --status-ai-soft: var(--violet-50);
  --status-ai-soft-hover: var(--violet-100);
  --status-ai-ink: var(--violet-700);

  --text-on-status: #ffffff;

  /* ========================================================== elevation ====
     Cool-tinted, low opacity, wide. Not warm any more — a cool blue-grey
     shadow keeps the surfaces reading clean rather than sepia. Never pure
     black on a light surface. */
  --shadow-xs: 0 1px 2px rgb(13 27 51 / 6%);
  --shadow-sm: 0 1px 2px rgb(13 27 51 / 5%), 0 4px 14px rgb(13 27 51 / 8%);
  --shadow-md: 0 2px 4px rgb(13 27 51 / 6%), 0 12px 28px rgb(13 27 51 / 11%);
  --shadow-lg: 0 4px 10px rgb(13 27 51 / 8%), 0 18px 45px rgb(13 27 51 / 15%);
  --shadow-modal: 0 24px 60px rgb(10 22 44 / 24%);
  --scrim: rgb(15 27 45 / 40%);

  /* ============================================== product-specific roles ===
     Still semantic, still theme-swappable — just narrower in scope. */

  /* The calendar's "now" line. Brand-derived so it belongs to the product, and
     deliberately NOT red so it can never be confused with Cancelled. */
  --now-line: var(--azure-600);

  /* Chat bubbles — one token per speaker, three distinct hues so nothing merges:
     patient reads cool-neutral (left), staff reads brand-blue (right), and AI
     reads its own periwinkle (right) — matching the AI lane's identity and no
     longer a pale blue that collapsed into the staff bubble beside it. */
  --bubble-patient: var(--slate-100);
  --bubble-patient-ink: var(--slate-900);
  --bubble-staff: var(--azure-200);
  --bubble-staff-ink: #082744;
  /* AI bubble sits a full step up the periwinkle ramp (100, not 50): at 50 the
     fill was so pale it melted into the #f3f6fb page behind it and AI replies
     were hard to pick out. 100 gives a clearly-distinct periwinkle surface that
     still belongs to the AI lane, stays clear of the neutral patient bubble and
     the brand-blue staff bubble, and holds the violet-700 label at ~6.5:1 (AA). */
  --bubble-ai: var(--violet-100);
  --bubble-ai-ink: var(--violet-700);

  /* The select chevron is an inline SVG, so its stroke cannot be a var(). It is
     redeclared per theme instead — the one place a literal is unavoidable. */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7684' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}