/* Shoelace (vendor/shoelace) in Ruko Visuals' colours, shared by the website and the booking app.
   Loaded after shoelace/themes/light.css. Primary = the enji accent; neutrals are warm (cream to espresso),
   so Shoelace's cool greys never show. Sizes here suit the website; the app sets its own field height and radius. */
:root, :host, .sl-theme-light {
  --sl-font-sans: Geist, "Helvetica Neue", system-ui, sans-serif;
  --sl-font-mono: "Geist Mono", ui-monospace, Consolas, monospace;

  --sl-color-primary-50: #fbf1f3; --sl-color-primary-100: #f5e0e4; --sl-color-primary-200: #eac0c8; --sl-color-primary-300: #da97a4;
  --sl-color-primary-400: #c56c7f; --sl-color-primary-500: #af5066; --sl-color-primary-600: #9b4155; --sl-color-primary-700: #823546;
  --sl-color-primary-800: #6b2d3b; --sl-color-primary-900: #5a2833; --sl-color-primary-950: #33141b;

  --sl-color-neutral-0: #fdfaf4; --sl-color-neutral-50: #fbf7ef; --sl-color-neutral-100: #f3ecdd; --sl-color-neutral-200: #e6dccb;
  --sl-color-neutral-300: #d4c6b0; --sl-color-neutral-400: #a89683; --sl-color-neutral-500: #8a7466; --sl-color-neutral-600: #6a564c;
  --sl-color-neutral-700: #54433b; --sl-color-neutral-800: #3a2a23; --sl-color-neutral-900: #2e211c; --sl-color-neutral-950: #18110e;
  --sl-color-neutral-1000: #0f0a08;

  --sl-color-danger-50: #fbf1f3; --sl-color-danger-100: #f5e0e4; --sl-color-danger-200: #eac0c8; --sl-color-danger-300: #da97a4;
  --sl-color-danger-400: #c56c7f; --sl-color-danger-500: #af5066; --sl-color-danger-600: #9b4155; --sl-color-danger-700: #823546;
  --sl-color-danger-800: #6b2d3b; --sl-color-danger-900: #5a2833; --sl-color-danger-950: #33141b;
  --sl-color-success-50: #f1f7ef; --sl-color-success-100: #e1edde; --sl-color-success-200: #c3dbbe; --sl-color-success-300: #98bf90;
  --sl-color-success-400: #6a9b62; --sl-color-success-500: #4a7d46; --sl-color-success-600: #33683f; --sl-color-success-700: #2a5534;
  --sl-color-success-800: #23452b; --sl-color-success-900: #1d3924; --sl-color-success-950: #0f2014;
  --sl-color-warning-50: #fdf5ec; --sl-color-warning-100: #f7e4cf; --sl-color-warning-200: #efc9a0; --sl-color-warning-300: #e2a56b;
  --sl-color-warning-400: #cc7f3f; --sl-color-warning-500: #b06223; --sl-color-warning-600: #95480f; --sl-color-warning-700: #7a3b0d;
  --sl-color-warning-800: #63300c; --sl-color-warning-900: #51280b; --sl-color-warning-950: #2d1505;

  --sl-panel-background-color: #fbf7ef;
  --sl-panel-border-color: #e6dccb;
  --sl-overlay-background-color: rgba(24, 17, 14, .55);
  --sl-tooltip-background-color: #2e211c;
  --sl-tooltip-color: #fbf7ef;
  --sl-tooltip-font-size: .8rem;
  --sl-tooltip-border-radius: 8px;

  --sl-input-height-medium: 48px;
  --sl-input-font-size-medium: 1rem;
  --sl-input-border-radius-medium: 12px;
  --sl-input-background-color: #fbf7ef;
  --sl-input-background-color-hover: #fbf7ef;
  --sl-input-background-color-focus: #fbf7ef;
  --sl-input-border-color: #e0d4bf;
  --sl-input-border-color-hover: #c9b89f;
  --sl-input-border-color-focus: #9b4155;
  --sl-input-color: #2e211c;
  --sl-input-placeholder-color: #7a6558; /* 5.1:1 on the field */
  --sl-input-label-font-size-medium: .9rem;
  --sl-input-label-color: #2e211c;
  --sl-input-help-text-font-size-medium: .82rem;
  --sl-input-help-text-color: #6a564c;
  --sl-input-focus-ring-color: rgba(155, 65, 85, .18);
  --sl-focus-ring-color: #9b4155;
  --sl-border-radius-medium: 10px;
  --sl-border-radius-large: 14px;
  --sl-transition-fast: 120ms;
  --sl-transition-medium: 220ms;
}

/* every field: label weight to match the pages' own labels */
sl-input::part(form-control-label), sl-select::part(form-control-label), sl-textarea::part(form-control-label) { font-weight: 500; margin-bottom: 7px; }
/* a field flagged by the page's own validation (aria-invalid) */
/* a field's own error, said right under it */
sl-input[aria-invalid="true"]::part(form-control-help-text), sl-textarea[aria-invalid="true"]::part(form-control-help-text) { color: var(--sl-color-danger-700); font-weight: 500; }
sl-input[aria-invalid="true"]::part(base), sl-select[aria-invalid="true"]::part(combobox), sl-textarea[aria-invalid="true"]::part(base) { border-color: var(--sl-color-danger-600); box-shadow: inset 0 0 0 1px var(--sl-color-danger-600); }
/* pill buttons, the pages' button shape */
sl-button::part(base) { border-radius: 999px; font-weight: 500; }
/* buttons: the same space at both ends and a fixed gap to any icon (Shoelace splits it between the box and the label,
   so a button with an icon came out lopsided) */
sl-button::part(base) { padding: 0 var(--sl-spacing-medium); }
sl-button[size="large"]::part(base) { padding: 0 var(--sl-spacing-large); }
sl-button[size="small"]::part(base) { padding: 0 var(--sl-spacing-small); }
sl-button::part(label), sl-button::part(prefix), sl-button::part(suffix) { padding: 0; }
/* the gap only where there is an icon: Shoelace keeps the empty icon slots in place */
sl-button:has(> [slot="prefix"])::part(prefix) { margin-inline-end: 10px; }
sl-button:has(> [slot="suffix"])::part(suffix) { margin-inline-start: 10px; }
sl-alert::part(base) { border-radius: 12px; }
sl-dialog::part(panel), sl-drawer::part(panel) { background: var(--bg, #f3ecdd); }