/* =============================================================================
   LAYER 3 — COMPONENT ALIASES
   -----------------------------------------------------------------------------
   The names components actually consume. Every value here points at a semantic
   role, never at a primitive — which is what lets the whole palette be retuned
   in semantic-light.css / semantic-dark.css without a component file changing.

   Both themes are served by this one file: the aliases resolve through the
   semantic layer, so `--navbar-bg` is warm white in light and warm black in
   dark without being declared twice. An alias is only redeclared per theme when
   the two themes genuinely need DIFFERENT roles, not different values — there
   are two such cases below and both are annotated.
============================================================================= */

:root {
  /* ------------------------------------------------------------- navbar ---
     Slim and polished. The bar is application chrome: a full-width surface
     separated by a hairline, never a floating card and never a thick band. */
  /* Chrome heights are part of the ~90% global scale-down (see primitives). */
  --navbar-height: 54px;
  --navbar-padding-inline: var(--page-pad-x);
  --navbar-item-height: 32px;
  --navbar-icon-size: 34px;
  --navbar-brand-size: 30px;
  --navbar-item-radius: var(--radius-sm);

  --navbar-bg: var(--surface-primary);
  --navbar-border: var(--border-subtle);
  --navbar-border-scrolled: var(--border-default);
  --navbar-link-color: var(--text-secondary);
  --navbar-link-hover-color: var(--text-primary);
  --navbar-link-hover-bg: var(--surface-hover);
  --navbar-link-active-bg: var(--color-primary);
  --navbar-link-active-color: var(--text-on-primary);
  --navbar-brand-color: var(--text-primary);

  /* ------------------------------------------------------------ buttons ---
     One shape language: 9px on standard actions, 10px on large dialog actions,
     8px on compact icon controls. Pills are for filters and statuses only. */
  --button-radius: 9px;
  --button-radius-lg: 10px;
  --button-radius-sm: var(--radius-sm);
  --button-height-sm: 30px;
  --button-height-md: 38px;
  --button-height-lg: 43px;
  --button-padding-sm: 12px;
  --button-padding-md: 16px;
  --button-padding-lg: 20px;

  --button-primary-bg: var(--color-primary);
  --button-primary-hover-bg: var(--color-primary-hover);
  --button-primary-pressed-bg: var(--color-primary-pressed);
  --button-primary-fg: var(--text-on-primary);

  --button-secondary-bg: var(--color-secondary);
  --button-secondary-hover-bg: var(--color-secondary-hover);
  --button-secondary-fg: var(--text-on-secondary);

  --button-tertiary-bg: var(--surface-secondary);
  --button-tertiary-hover-bg: var(--color-tertiary-soft-hover);
  --button-tertiary-fg: var(--text-primary);
  --button-tertiary-border: var(--border-control);

  --button-outline-fg: var(--color-primary-ink);
  --button-outline-border: var(--color-primary);
  --button-outline-hover-bg: var(--color-primary-soft);

  --button-ghost-fg: var(--text-secondary);
  --button-ghost-hover-fg: var(--text-primary);
  --button-ghost-hover-bg: var(--surface-menu-hover);

  --button-danger-bg: var(--status-danger);
  --button-danger-hover-bg: var(--status-danger-hover);
  --button-danger-fg: var(--text-on-status);

  --button-disabled-bg: var(--surface-disabled);
  --button-disabled-fg: var(--text-muted);
  --button-disabled-border: var(--border-default);

  /* ------------------------------------------------------ inputs / forms ---
     THE SINGLE-BOUNDARY CONTRACT.

     Every interactive field draws exactly ONE line, and these tokens are the
     only description of it. Across all states the boundary changes COLOUR and
     nothing else — never its width (which would shift layout), and never its
     count.

     What that rules out, permanently:
       - a wrapper border around an already-bordered control
       - `outline` on a control that has a border (the global focus-visible
         rule below is scoped off form controls for exactly this reason)
       - `box-shadow: 0 0 0 Npx` — a hard, un-blurred, un-offset shadow is a
         second border wearing a different property name

     Focus is still unmistakable: the border swings from a low-contrast neutral
     to the brand at ~10:1, and an AMBIENT shadow (offset and blurred, so it
     reads as lift rather than as a line) sits under it. */
  --control-height-sm: 34px;
  --control-height-md: 41px;
  --control-height-lg: 47px;
  --control-radius: 9px;
  --control-radius-sm: var(--radius-sm);

  /* One width for every state. Never animated, never conditional. */
  --control-border-width: 1px;
  --control-border-default: var(--border-control);
  --control-border-hover: var(--text-muted);
  --control-border-focus: var(--focus-ring);
  --control-border-error: var(--status-danger);
  --control-border-disabled: var(--border-default);

  --control-bg: var(--surface-elevated);
  --control-bg-focus: var(--surface-elevated);
  --control-bg-disabled: var(--surface-disabled);
  /* Read-only stays readable and selectable — it is not disabled. A recessed
     fill says "you can copy this, you cannot change it". */
  --control-bg-readonly: var(--surface-sunken);

  --control-text: var(--text-primary);
  --control-placeholder: var(--text-placeholder);
  --control-label: var(--text-secondary);

  /* Ambient only. Offset + blurred + no spread: it can never resolve into a
     ring the way `0 0 0 3px` does. */
  --control-shadow-focus: 0 4px 14px var(--color-primary-ring);
  --control-shadow-error: 0 4px 14px var(--status-danger-ring);

  /* Aliases kept so existing rules read naturally; both resolve to the same
     single-boundary contract above. */
  --input-bg: var(--control-bg);
  --input-bg-focus: var(--control-bg-focus);
  --input-fg: var(--control-text);
  --input-border: var(--control-border-default);
  --input-border-hover: var(--control-border-hover);
  --input-border-focus: var(--control-border-focus);
  --input-placeholder: var(--control-placeholder);
  --input-disabled-bg: var(--control-bg-disabled);
  --input-radius: var(--control-radius);
  --input-height: var(--control-height-md);
  --input-height-sm: var(--control-height-sm);
  --input-label-color: var(--control-label);

  /* -------------------------------------------------------------- cards --- */
  --card-bg: var(--surface-primary);
  --card-bg-soft: var(--surface-secondary);
  --card-border: var(--border-subtle);
  --card-border-hover: var(--border-strong);
  --card-radius: var(--radius-lg);
  --card-padding: var(--sp-6);
  --card-shadow: var(--shadow-sm);

  /* -------------------------------------------- dialogs, menus, popovers --- */
  --dialog-bg: var(--surface-elevated);
  --dialog-border: var(--border-default);
  --dialog-radius: var(--radius-2xl);
  --dialog-shadow: var(--shadow-modal);
  --dialog-overlay: var(--scrim);
  --popover-bg: var(--surface-elevated);
  --popover-border: var(--border-default);
  --popover-radius: var(--radius-xl);
  --popover-shadow: var(--shadow-lg);
  --menu-item-hover-bg: var(--surface-menu-hover);

  /* ------------------------------------------------------------- tables --- */
  --table-header-bg: var(--surface-secondary);
  --table-header-fg: var(--text-primary);
  --table-row-bg: var(--surface-primary);
  --table-row-hover-bg: var(--surface-hover);
  --table-row-selected-bg: var(--surface-selected);
  --table-row-border: var(--border-subtle);
  --table-border: var(--border-default);

  /* ------------------------------------------------- appointment status ---
     The calendar and every status chip read from these, so "Confirmed" is one
     colour decision made once rather than per surface. */
  --appointment-confirmed: var(--status-success);
  --appointment-confirmed-soft: var(--status-success-soft);
  --appointment-confirmed-ink: var(--status-success-ink);
  --appointment-pending: var(--status-warning);
  --appointment-pending-soft: var(--status-warning-soft);
  --appointment-pending-ink: var(--status-warning-ink);
  --appointment-cancelled: var(--status-danger);
  --appointment-cancelled-soft: var(--status-danger-soft);
  --appointment-cancelled-ink: var(--status-danger-ink);

  /* ----------------------------------------------------- auth (Login) ---
     The split sign-in composition: a brand/visual panel beside a focused form.
     The proportions are tokens so the two panels can never drift apart. */
  --auth-visual-width: 54%;
  --auth-form-max: 460px;
  --auth-card-radius: var(--radius-xl);
  --auth-card-padding: 36px;
  --auth-panel-bg: var(--surface-tertiary);
  --auth-card-bg: var(--surface-elevated);

  /* --------------------------------------------------------- scrollbars --- */
  --scrollbar-thumb: var(--border-default);
  --scrollbar-thumb-hover: var(--border-strong);
}

/* Two aliases genuinely change ROLE between themes.

   1. Tertiary buttons: light lifts them onto the secondary surface, but in dark
      --surface-secondary is what a dialog is made of, so a tertiary button
      inside a dialog would vanish. Dark uses the hover step instead.
   2. The navbar sits on the page's own surface in dark so the bar and the
      workspace read as one continuous dark field, separated by the border
      alone — the reference's border-separated bar, translated. */
[data-theme="dark"],
.app-root.theme-dark {
  --button-tertiary-bg: var(--surface-hover);
  --button-tertiary-hover-bg: var(--surface-selected);
  --navbar-bg: var(--surface-primary);
  --navbar-border: var(--border-default);
}