/**
 * 悠悠草 YouYouCao — Base UI Components
 * Depends on tokens.css
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="light"] {
  color-scheme: light;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
}

/* ----- Brand wordmark ----- */
/* Fallback solid color first; gradient clip paints over when supported */
.brand-mark {
  font-family: var(--font-brand);
  font-weight: var(--font-weight-brand);
  letter-spacing: var(--tracking-brand);
  color: var(--text-brand-fallback);
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand-mark {
    background: none;
    -webkit-text-fill-color: unset;
    color: var(--text-brand-fallback);
  }
}

.brand-mark--lg {
  font-size: var(--text-hero);
}

.brand-mark--sm {
  font-size: var(--text-h3);
}

/* ----- Typography (type scale) ----- */
.heading-1,
.text-h1 {
  font-family: var(--font-display);
  font-size: var(--text-h1); /* 32 */
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
}

.heading-2,
.text-h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2); /* 24 */
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}

.heading-3,
.text-h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3); /* 20 */
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}

.text-body,
.body {
  font-family: var(--font-body);
  font-size: var(--text-body); /* 16 */
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}

.body-muted {
  color: var(--text-secondary);
  font-size: var(--text-body);
}

.text-small,
.caption {
  color: var(--text-tertiary);
  font-size: var(--text-small); /* 14 */
  font-weight: var(--font-weight-regular);
}

.text-micro {
  font-size: var(--text-micro); /* 12 */
  color: var(--text-tertiary);
  font-weight: var(--font-weight-regular);
}

.heading-display {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--text-on-primary);
}

.btn--primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  box-shadow: var(--glow-primary);
}

.btn--gradient {
  background: var(--brand-gradient);
  color: var(--text-inverse);
  font-weight: 600;
}

.btn--gradient:hover:not(:disabled) {
  box-shadow: var(--glow-brand);
  filter: brightness(1.05);
}

.btn--secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--color-primary-border);
}

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn--accent {
  background: var(--color-accent);
  color: #fff;
}

.btn--accent:hover:not(:disabled) {
  background: var(--color-accent-hover);
  box-shadow: var(--glow-accent);
}

.btn--lg {
  height: 48px;
  padding: 0 var(--space-8);
  font-size: var(--text-md);
}

.btn--sm {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
}

/* ----- Inputs ----- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.input,
.select,
.textarea {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--bg-sunken);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  outline: none;
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.textarea {
  height: auto;
  min-height: 96px;
  padding: var(--space-3);
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-tertiary);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--border-strong);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--color-primary-muted);
}

.input[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px var(--color-error-bg);
}

/* ----- Panels / Surfaces ----- */
.panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  padding: var(--space-6);
}

.panel--elevated {
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
}

.panel--tint-cyan {
  background: var(--bg-tint-cyan);
}

.panel--interactive {
  transition:
    border-color var(--duration-normal) var(--ease-out),
    background var(--duration-normal) var(--ease-out);
}

.panel--interactive:hover {
  border-color: var(--border-strong);
  background: var(--bg-overlay);
}

/* Prefer open sections over card grids for marketing pages.
   Use .panel only when it wraps an interaction or discrete module. */

/* ----- Nav ----- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  padding: 0 var(--space-6);
  background: color-mix(in srgb, var(--bg-base) 85%, transparent);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.nav__links {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--duration-fast) var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--text-primary);
}

.nav__link[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

/* ----- Tags / Chips ----- */
.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  background: var(--bg-overlay);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.tag--primary {
  background: var(--color-primary-muted);
  color: var(--color-primary);
  border-color: var(--color-primary-border);
}

.tag--accent {
  background: var(--color-accent-muted);
  color: var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.tag--warm {
  background: var(--color-warm-muted);
  color: var(--color-warm);
  border-color: color-mix(in srgb, var(--color-warm) 35%, transparent);
}

/* ----- Badges / Status ----- */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.status--success {
  color: var(--color-success);
}
.status--warning {
  color: var(--color-warning);
}
.status--error {
  color: var(--color-error);
}
.status--info {
  color: var(--color-info);
}

/* ----- Alerts ----- */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-sm);
}

.alert--info {
  background: var(--color-info-bg);
  border-color: color-mix(in srgb, var(--color-info) 30%, transparent);
  color: var(--color-info);
}

.alert--success {
  background: var(--color-success-bg);
  border-color: color-mix(in srgb, var(--color-success) 30%, transparent);
  color: var(--color-success);
}

.alert--warning {
  background: var(--color-warning-bg);
  border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);
  color: var(--color-warning);
}

.alert--error {
  background: var(--color-error-bg);
  border-color: color-mix(in srgb, var(--color-error) 30%, transparent);
  color: var(--color-error);
}

/* ----- Links ----- */
a.link {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a.link:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ----- Divider ----- */
.divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-8) 0;
}

/* ----- Focus ring utility ----- */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.btn:focus-visible,
.input:focus-visible {
  outline: none;
}

/* ----- Gradient rule (section accent) ----- */
.gradient-rule {
  height: 1px;
  border: none;
  background: var(--brand-gradient);
  opacity: 0.55;
}

/* ----- Hero atmosphere (marketing) ----- */
/* Atmosphere only — never put body/caption text directly on fog */
.hero-atmosphere {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, color-mix(in srgb, var(--brand-magenta) 18%, transparent), transparent 55%),
    radial-gradient(ellipse 70% 45% at 80% 10%, color-mix(in srgb, var(--brand-cyan) 14%, transparent), transparent 50%),
    radial-gradient(ellipse 60% 40% at 60% 80%, color-mix(in srgb, var(--brand-gold) 10%, transparent), transparent 55%),
    var(--bg-void);
}

[data-theme="light"] .hero-atmosphere {
  background:
    radial-gradient(ellipse 70% 45% at 15% 0%, color-mix(in srgb, var(--brand-magenta) 10%, transparent), transparent 55%),
    radial-gradient(ellipse 65% 40% at 85% 8%, color-mix(in srgb, var(--brand-mint) 12%, transparent), transparent 50%),
    radial-gradient(ellipse 50% 35% at 55% 90%, color-mix(in srgb, var(--brand-gold) 8%, transparent), transparent 55%),
    var(--bg-void);
}

/* Solid plate for readable copy / CTAs inside Hero */
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 40rem;
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
}

.hero-content p {
  margin: 0 0 var(--space-5);
  color: var(--text-secondary);
  font-size: var(--text-body);
  line-height: var(--leading-snug);
}

/* Logo chip — soft dark plate (not dead flat #000 square) */
.logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: #0e1014;
  border-radius: var(--radius-logo-chip);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .btn--gradient {
  color: #1c2623;
}

[data-theme="light"] .btn--primary {
  color: #f3f7f5;
}

[data-theme="light"] .nav {
  background: color-mix(in srgb, var(--bg-base) 88%, transparent);
}

/* ----- Toggle / Switch ----- */
.switch {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--bg-hover);
  border: 1px solid var(--border-default);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.switch[aria-checked="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-primary);
  transition: transform var(--duration-fast) var(--ease-out);
}

.switch[aria-checked="true"]::after {
  transform: translateX(20px);
  background: var(--text-on-primary);
}

/* ----- Table ----- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th {
  text-align: left;
  color: var(--text-tertiary);
  font-weight: 500;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
}

.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.table tr:hover td {
  background: var(--bg-hover);
  color: var(--text-primary);
}