/*
 * shadcn/ui-compatible semantic design layer for the native Hugo frontend.
 * The project does not ship a React runtime, so these owned primitives mirror
 * shadcn's token and variant model in server-rendered HTML.
 */
:root {
  --font-sans: "DejaVu Serif", "Noto Sans CJK SC", serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --background: #ead1b3;
  --foreground: #514462;
  --card: rgba(255, 248, 238, 0.7);
  --card-foreground: #514462;
  --popover: rgba(255, 250, 244, 0.96);
  --popover-foreground: #514462;
  --primary: #ce806a;
  --primary-foreground: #fffaf5;
  --secondary: rgba(223, 231, 232, 0.72);
  --secondary-foreground: #554961;
  --muted: rgba(236, 222, 215, 0.76);
  --muted-foreground: #71657a;
  --accent: rgba(235, 213, 225, 0.78);
  --accent-foreground: #58465f;
  --destructive: #b94a62;
  --destructive-foreground: #fff8f8;
  --border: rgba(113, 86, 104, 0.22);
  --input: rgba(113, 86, 104, 0.28);
  --ring: rgba(115, 84, 128, 0.62);

  --radius: 0.75rem;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);

  --control-sm: 2rem;
  --control: 2.25rem;
  --control-lg: 2.5rem;
  --content-sm: 40rem;
  --content-md: 48rem;
  --content-lg: 70rem;
  --content-xl: 73.75rem;

  --shadow-xs: 0 1px 2px rgba(66, 45, 58, 0.06);
  --shadow-sm: 0 2px 8px rgba(66, 45, 58, 0.08);
  --shadow-card: 0 18px 58px rgba(66, 45, 58, 0.14);
  --transition-ui: 160ms cubic-bezier(0.2, 0, 0, 1);
}

body {
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

small {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.ui-button {
  display: inline-flex;
  min-height: var(--control);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-ui), background var(--transition-ui), border-color var(--transition-ui), box-shadow var(--transition-ui), transform var(--transition-ui);
}

.ui-button:focus-visible,
.ui-tabs-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 34%, transparent);
}

.ui-button:disabled,
.ui-button[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.5;
}

.ui-button.ui-button-primary {
  color: var(--primary-foreground);
  background: var(--primary);
  box-shadow: var(--shadow-xs);
}

.ui-button.ui-button-primary:hover {
  background: color-mix(in srgb, var(--primary) 90%, var(--foreground));
  box-shadow: var(--shadow-sm);
}

.ui-button.ui-button-secondary {
  color: var(--secondary-foreground);
  background: var(--secondary);
}

.ui-button.ui-button-secondary:hover {
  background: color-mix(in srgb, var(--secondary) 86%, white);
}

.ui-button.ui-button-outline {
  color: var(--foreground);
  border-color: var(--border);
  background: color-mix(in srgb, var(--card) 72%, transparent);
  box-shadow: var(--shadow-xs);
}

.ui-button.ui-button-outline:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}

.ui-button.ui-button-ghost {
  color: var(--foreground);
  background: transparent;
}

.ui-button.ui-button-ghost:hover {
  background: color-mix(in srgb, var(--accent) 72%, transparent);
  color: var(--accent-foreground);
}

.ui-button.ui-button-sm {
  min-height: var(--control-sm);
  padding-inline: var(--space-3);
  font-size: var(--text-xs);
}

.ui-button.ui-button-lg {
  min-height: var(--control-lg);
  padding-inline: var(--space-6);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
}

.ui-button.ui-button-icon {
  width: var(--control);
  padding: 0;
}

.ui-card {
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.ui-card.ui-card-compact {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.ui-card.ui-card-muted {
  background: color-mix(in srgb, var(--secondary) 58%, var(--card));
}

.ui-tabs {
  display: inline-flex;
  min-height: var(--control-lg);
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--muted) 82%, transparent);
  color: var(--muted-foreground);
}

.ui-tabs-trigger {
  display: inline-flex;
  min-height: var(--control-sm);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-lg);
  color: inherit;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-tight);
  cursor: pointer;
  transition: color var(--transition-ui), background var(--transition-ui), box-shadow var(--transition-ui);
}

.ui-tabs-trigger:hover {
  color: var(--foreground);
}

.ui-tabs-trigger[aria-selected="true"] {
  color: var(--foreground);
  background: color-mix(in srgb, var(--popover) 88%, transparent);
  box-shadow: var(--shadow-sm);
}

.ui-badge {
  display: inline-flex;
  min-height: 1.5rem;
  align-items: center;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  background: color-mix(in srgb, var(--muted) 74%, transparent);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
}

.ui-separator {
  flex: none;
  background: var(--border);
}

@media (prefers-reduced-motion: reduce) {
  .ui-button,
  .ui-tabs-trigger {
    transition: none;
  }
}