/*
 * YBO shared design system. This is the only source of theme palette values.
 * Load before Tailwind and page styles; do not redefine these roles in views.
 *
 * Surfaces: --background, --surface, --surface-muted, --foreground,
 *           --text-muted, --border, --border-strong.
 * Actions:  --action-primary, --action-primary-hover, --action-on-primary.
 * Links:    --link / --link-hover (readable in both themes).
 * Brand:    --brand-coral / --brand-on-coral (decorative highlights).
 * Legacy:   --accent / --accent-light alias PRIMARY ACTION backgrounds.
 *           .text-accent and its hover variants use LINK colors instead.
 *
 * Buttons: .ybo-btn + .ybo-btn-primary|secondary|ghost|danger.
 *          Optional .ybo-btn-sm|lg|block|icon. Use native disabled on buttons,
 *          aria-busy="true" for a loading spinner. Disabled links also need
 *          href removed by their caller; CSS cannot disable keyboard actions.
 * Shoelace sl-button variants share the same sizing, roles and focus ring.
 */

@font-face {
  font-family: 'Bricolage Fallback';
  src: local('Segoe UI'), local('-apple-system'), local('BlinkMacSystemFont'), local('sans-serif');
  size-adjust: 100%;
  ascent-override: 90%;
  descent-override: 20%;
  line-gap-override: 0%;
}

:root,
[data-theme="light"] {
  color-scheme: light;
  --font-bricolage: 'Bricolage Grotesque', 'Bricolage Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --background-rgb: 242 240 227;
  --foreground-rgb: 46 46 46;
  --surface-rgb: 255 254 250;
  --surface-muted-rgb: 234 230 216;
  --card-hover-rgb: 247 244 234;
  --text-muted: #666357;
  --border-rgb: 46 46 46;
  --border-opacity: 0.16;
  --border-strong: #8b8779;

  /* Primary #B74732 and hover #9F3826 both exceed 4.5:1 with white text. */
  --action-primary-rgb: 183 71 50;
  --action-primary-hover-rgb: 159 56 38;
  --action-on-primary: #ffffff;
  --link-rgb: 159 56 38;
  --link-hover-rgb: 126 41 27;
  --brand-coral-rgb: 247 111 83;
  --brand-on-coral: #2e2e2e;
  --action-soft: rgb(var(--action-primary-rgb) / 0.08);
  --action-soft-hover: rgb(var(--action-primary-rgb) / 0.13);
  --focus-ring: #9f3826;

  --success-rgb: 31 111 67;
  --success-bg: rgb(var(--success-rgb) / 0.08);
  --success-border: rgb(var(--success-rgb) / 0.28);
  --success-solid: #246f44;
  --on-success: #ffffff;
  --info-rgb: 36 83 164;
  --info-bg: rgb(var(--info-rgb) / 0.08);
  --info-border: rgb(var(--info-rgb) / 0.28);
  --warning-rgb: 129 86 19;
  --warning-bg: rgb(var(--warning-rgb) / 0.09);
  --warning-border: rgb(var(--warning-rgb) / 0.28);
  --warning-solid: #815613;
  --on-warning: #ffffff;
  --error-rgb: 167 42 42;
  --error-bg: rgb(var(--error-rgb) / 0.08);
  --error-border: rgb(var(--error-rgb) / 0.28);
  --error-solid: #a72a2a;
  --error-solid-hover: #8e2323;
  --on-error: #ffffff;

  /* Category colors retain their independent meaning. */
  --purple: #a855f7;
  --purple-hover: #9333ea;
  --teal: #14b8a6;
  --teal-hover: #0d9488;
  --indigo: #6366f1;
  --indigo-hover: #4f46e5;
  --pink: #ec4899;
  --pink-hover: #db2777;

  --modal-backdrop: rgb(24 22 18 / 0.6);
  --modal-bg: var(--surface);
  --modal-border: var(--border);
  --media-overlay-rgb: 0 0 0;
  --media-overlay: rgb(var(--media-overlay-rgb) / 0.5);
  --media-overlay-strong: rgb(var(--media-overlay-rgb) / 0.75);
  --media-on-overlay: var(--action-on-primary);
  --media-backdrop: rgb(var(--media-overlay-rgb) / 0.85);
  --media-control-bg: var(--action-on-primary);
  --media-control-text: var(--brand-on-coral);
  --media-control-surface: var(--brand-on-coral);
  --media-highlight: var(--brand-coral);
  /* Provider identity is separate from the site's purchase action palette. */
  --provider-whatsapp-rgb: 37 211 102;
  --provider-whatsapp: rgb(var(--provider-whatsapp-rgb));
  --provider-whatsapp-hover: #1fb85a;
  --provider-on-whatsapp: #12341e;
  --shadow-color: 46 35 25;
  --button-radius: 0.75rem;
  --button-height: 2.75rem;
  --button-height-sm: 2.5rem;
  --button-height-lg: 3.25rem;
}

[data-theme="dark"] {
  color-scheme: dark;
  --background-rgb: 31 31 31;
  --foreground-rgb: 241 237 224;
  --surface-rgb: 42 42 40;
  --surface-muted-rgb: 51 51 47;
  --card-hover-rgb: 57 56 51;
  --text-muted: #bbb6a7;
  --border-rgb: 241 237 224;
  --border-opacity: 0.18;
  --border-strong: #8b877b;
  --link-rgb: 255 173 147;
  --link-hover-rgb: 255 200 179;
  --action-soft: rgb(var(--brand-coral-rgb) / 0.12);
  --action-soft-hover: rgb(var(--brand-coral-rgb) / 0.19);
  --focus-ring: #ffad93;
  --success-rgb: 126 215 163;
  --success-bg: rgb(var(--success-rgb) / 0.1);
  --success-border: rgb(var(--success-rgb) / 0.3);
  --info-rgb: 147 186 250;
  --info-bg: rgb(var(--info-rgb) / 0.1);
  --info-border: rgb(var(--info-rgb) / 0.3);
  --warning-rgb: 238 197 121;
  --warning-bg: rgb(var(--warning-rgb) / 0.1);
  --warning-border: rgb(var(--warning-rgb) / 0.3);
  --error-rgb: 246 170 163;
  --error-bg: rgb(var(--error-rgb) / 0.1);
  --error-border: rgb(var(--error-rgb) / 0.3);
  --modal-backdrop: rgb(0 0 0 / 0.75);
  --shadow-color: 0 0 0;
}

/* Resolve aliases on each theme scope so nested body theme changes work too. */
:root,
[data-theme] {
  --background: rgb(var(--background-rgb));
  --foreground: rgb(var(--foreground-rgb));
  --surface: rgb(var(--surface-rgb));
  --surface-muted: rgb(var(--surface-muted-rgb));
  --card-bg: var(--surface);
  --card-hover: rgb(var(--card-hover-rgb));
  --border: rgb(var(--border-rgb) / var(--border-opacity));
  --action-primary: rgb(var(--action-primary-rgb));
  --action-primary-hover: rgb(var(--action-primary-hover-rgb));
  --action-primary-active: var(--action-primary-hover);
  --link: rgb(var(--link-rgb));
  --link-hover: rgb(var(--link-hover-rgb));
  --brand-coral: rgb(var(--brand-coral-rgb));
  --accent-rgb: var(--action-primary-rgb);
  --accent-light-rgb: var(--action-primary-hover-rgb);
  --accent: var(--action-primary);
  --accent-light: var(--action-primary-hover);
  --success: rgb(var(--success-rgb));
  --info: rgb(var(--info-rgb));
  --warning: rgb(var(--warning-rgb));
  --error: rgb(var(--error-rgb));

  /* Shoelace consumes the same roles; no separate component palette. */
  --sl-font-sans: var(--font-bricolage);
  --sl-color-primary-50: var(--action-soft);
  --sl-color-primary-100: var(--action-soft-hover);
  --sl-color-primary-200: var(--action-soft-hover);
  --sl-color-primary-300: var(--brand-coral);
  --sl-color-primary-400: var(--action-primary);
  --sl-color-primary-500: var(--action-primary);
  --sl-color-primary-600: var(--action-primary);
  --sl-color-primary-700: var(--action-primary-hover);
  --sl-color-primary-800: var(--action-primary-hover);
  --sl-color-primary-900: var(--action-primary-hover);
  --sl-color-primary-950: var(--action-primary-hover);
  --sl-color-primary-text: var(--action-on-primary);
  --sl-color-success-600: var(--success-solid);
  --sl-color-danger-600: var(--error-solid);
  --sl-color-danger-700: var(--error-solid-hover);
  --sl-color-neutral-0: var(--surface);
  --sl-color-neutral-50: var(--surface);
  --sl-color-neutral-100: var(--surface-muted);
  --sl-color-neutral-200: var(--border);
  --sl-color-neutral-300: var(--border-strong);
  --sl-color-neutral-500: var(--text-muted);
  --sl-color-neutral-600: var(--text-muted);
  --sl-color-neutral-700: var(--foreground);
  --sl-color-neutral-900: var(--foreground);
  --sl-color-neutral-1000: var(--foreground);
  --sl-panel-background-color: var(--surface);
  --sl-panel-border-color: var(--border);
  --sl-input-background-color: var(--surface);
  --sl-input-background-color-hover: var(--surface);
  --sl-input-color: var(--foreground);
  --sl-input-border-color: var(--border-strong);
  --sl-input-border-color-focus: var(--focus-ring);
  --sl-focus-ring-color: var(--focus-ring);
  --sl-focus-ring-width: 3px;
  --sl-focus-ring-offset: 3px;
  --sl-border-radius-medium: var(--button-radius);
  --sl-input-height-small: var(--button-height-sm);
  --sl-input-height-medium: var(--button-height);
  --sl-input-height-large: var(--button-height-lg);
}

html { background: var(--background); }
body { background: var(--background); color: var(--foreground); }
::selection { background: var(--action-primary); color: var(--action-on-primary); }

/* Legacy utility compatibility, including readable text on dark surfaces. */
.text-accent, .hover\:text-accent:hover, .group:hover .group-hover\:text-accent { color: var(--link); }
.text-accent-light, .hover\:text-accent-light:hover { color: var(--link-hover); }
.bg-accent { background-color: var(--action-primary); }
.bg-accent-light, .hover\:bg-accent-light:hover { background-color: var(--action-primary-hover); }
.bg-accent.text-background, .bg-accent-light.text-background { color: var(--action-on-primary); }
.bg-brand-coral { background-color: var(--brand-coral); }
.text-on-coral { color: var(--brand-on-coral); }
.text-muted { color: var(--text-muted); }
.bg-surface { background-color: var(--surface); }
.bg-surface-muted { background-color: var(--surface-muted); }
.border-strong { border-color: var(--border-strong); }
.ybo-link { color: var(--link); text-decoration: underline; text-underline-offset: 0.2em; }
.ybo-link:hover { color: var(--link-hover); }

.ybo-btn {
  --button-background: transparent;
  --button-foreground: var(--foreground);
  --button-border: transparent;
  --button-hover-background: var(--card-hover);
  --button-hover-border: var(--button-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--button-height);
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--button-border);
  border-radius: var(--button-radius);
  background: var(--button-background);
  color: var(--button-foreground);
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.ybo-btn-primary {
  --button-background: var(--action-primary);
  --button-foreground: var(--action-on-primary);
  --button-border: var(--action-primary);
  --button-hover-background: var(--action-primary-hover);
  --button-hover-border: var(--action-primary-hover);
}
.ybo-btn-secondary {
  --button-background: var(--surface);
  --button-foreground: var(--link);
  --button-border: var(--border-strong);
  --button-hover-background: var(--action-soft);
  --button-hover-border: var(--link);
}
.ybo-btn-ghost {
  --button-foreground: var(--link);
  --button-hover-background: var(--action-soft);
}
.ybo-btn-danger {
  --button-background: var(--error-solid);
  --button-foreground: var(--on-error);
  --button-border: var(--error-solid);
  --button-hover-background: var(--error-solid-hover);
  --button-hover-border: var(--error-solid-hover);
}
.ybo-btn-selected {
  --button-background: var(--action-soft);
  --button-border: var(--link);
  --button-hover-border: var(--link);
}
.ybo-btn-media {
  --button-background: var(--media-overlay);
  --button-foreground: var(--media-on-overlay);
  --button-hover-background: var(--media-overlay-strong);
}
.ybo-btn:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
  background: var(--button-hover-background);
  border-color: var(--button-hover-border);
  color: var(--button-foreground);
}
.ybo-btn:active:not(:disabled):not([aria-disabled="true"]) { box-shadow: inset 0 2px 4px rgb(var(--shadow-color) / 0.16); }
.ybo-btn:focus-visible, .btn-icon:focus-visible, .ybo-link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
.ybo-btn:disabled, .ybo-btn[aria-disabled="true"], sl-button[disabled]::part(base) {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.ybo-btn[aria-disabled="true"] { pointer-events: none; }
.ybo-btn[aria-busy="true"], .ybo-btn.is-loading { pointer-events: none; cursor: progress; }
.ybo-btn[aria-busy="true"]::after, .ybo-btn.is-loading::after {
  content: '';
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ybo-button-spin 0.8s linear infinite;
}
.ybo-btn-sm { min-height: var(--button-height-sm); padding: 0.5rem 1rem; font-size: 0.875rem; }
.ybo-btn-lg { min-height: var(--button-height-lg); padding: 0.875rem 1.5rem; font-size: 1.0625rem; }
.ybo-btn-block { display: flex; width: 100%; }
.ybo-btn-icon { width: var(--button-height); padding: 0.5rem; flex-shrink: 0; }
.ybo-btn-icon.ybo-btn-sm { width: var(--button-height-sm); }
.ybo-btn-icon.ybo-btn-lg { width: var(--button-height-lg); }
.ybo-btn > svg { flex-shrink: 0; }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--button-height-sm);
  height: var(--button-height-sm);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--surface);
  color: var(--foreground);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.btn-icon:hover { border-color: var(--link); color: var(--link); background: var(--action-soft); }

.ybo-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--button-height);
  padding: 0.75rem 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: var(--button-radius) var(--button-radius) 0 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.ybo-tab:hover { background: var(--card-hover); color: var(--link); }
.ybo-tab-active { background: var(--action-soft); color: var(--link); border-bottom-color: var(--link); }
.ybo-tab:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.ybo-menu-option { display: block; width: 100%; min-height: var(--button-height-sm); padding: 0.5rem 0.75rem; border-radius: var(--button-radius); background: transparent; color: var(--foreground); font-size: 0.875rem; text-align: left; cursor: pointer; }
.ybo-menu-option:hover { background: var(--action-soft); color: var(--link); }
.ybo-menu-option:focus-visible, .ybo-pagination-dot:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.ybo-pagination-dot { display: grid; place-items: center; width: var(--button-height-sm); height: var(--button-height-sm); background: transparent; border: 0; border-radius: 50%; cursor: pointer; }
.ybo-pagination-dot::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--border-strong); }
.ybo-pagination-dot.is-active::before { background: var(--action-primary); }

sl-button::part(base) { font-family: var(--font-bricolage); font-weight: 600; border-radius: var(--button-radius); transition: background-color 160ms ease, border-color 160ms ease; }
sl-button:not([variant])::part(base), sl-button[variant="default"]::part(base) { background: var(--surface); color: var(--link); border-color: var(--border-strong); }
sl-button:not([variant]):hover::part(base), sl-button[variant="default"]:hover::part(base) { background: var(--action-soft); border-color: var(--link); }
sl-button[variant="primary"]::part(base) { background: var(--action-primary); color: var(--action-on-primary); border-color: var(--action-primary); }
sl-button[variant="primary"]:hover::part(base) { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }
sl-button[variant="text"]::part(base) { background: transparent; border-color: transparent; color: var(--link); }
sl-button[variant="text"]:hover::part(base) { background: var(--action-soft); }
sl-button[variant="danger"]::part(base) { background: var(--error-solid); color: var(--on-error); border-color: var(--error-solid); }
sl-button[variant="danger"]:hover::part(base) { background: var(--error-solid-hover); border-color: var(--error-solid-hover); }
sl-button[outline]::part(base) { background: transparent; color: var(--link); border-color: var(--link); }
sl-button[outline]:hover::part(base) { background: var(--action-soft); }
sl-button[outline][variant="danger"]::part(base) { color: var(--error); border-color: var(--error); }
sl-button:focus-within::part(base) { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
sl-button[loading]::part(base) { cursor: progress; }

@keyframes ybo-button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ybo-btn, sl-button::part(base) { transition: none; }
  .ybo-btn[aria-busy="true"]::after, .ybo-btn.is-loading::after { animation-duration: 1.6s; }
}