/*
  HARU Claude Design Layer v1
  Purpose: let design owners tune the HARU visual language without touching
  auth, credits, generation, gallery, video, SNS, or API logic.
*/

:root {
  --haru-design-mint: #7fffd4;
  --haru-design-mint-strong: #2db896;
  --haru-design-mint-soft: #e9fff8;
  --haru-design-ink: #18342d;
  --haru-design-muted: #6e8f86;
  --haru-design-line: rgba(69, 179, 148, 0.18);
  --haru-design-surface: rgba(255, 255, 255, 0.88);
  --haru-design-surface-solid: #ffffff;
  --haru-design-bg: #f7fffb;
  --haru-design-shadow: 0 18px 46px rgba(25, 76, 63, 0.10);
  --haru-design-shadow-hover: 0 22px 56px rgba(25, 76, 63, 0.15);
  --haru-design-radius-card: 18px;
  --haru-design-radius-soft: 14px;
  --haru-design-radius-pill: 999px;
  --haru-design-page-pad: clamp(16px, 3vw, 36px);
  --haru-design-section-gap: clamp(18px, 3vw, 34px);
}

html {
  text-rendering: optimizeLegibility;
}

body {
  color: var(--haru-design-ink);
  background-color: var(--haru-design-bg);
}

:where(.haru-topbar, .topbar, .site-nav, .nav-shell, .navbar, nav) {
  border-color: var(--haru-design-line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

:where(.haru-topbar, .topbar, .site-nav, .nav-shell, .navbar) :where(a, button) {
  border-radius: var(--haru-design-radius-pill);
}

:where(.page-shell, .page-wrap, .page-container, .main-shell, main) {
  scroll-margin-top: 84px;
}

:where(.panel, .card, .gcard, .gallery-card, .video-card, .character-card, .result-card, .admin-card, .stat-card, .queue-card, .my-haru-card) {
  border-color: var(--haru-design-line);
  border-radius: var(--haru-design-radius-card);
  box-shadow: var(--haru-design-shadow);
}

:where(.panel, .card, .gcard, .gallery-card, .video-card, .character-card, .result-card, .admin-card, .stat-card, .queue-card, .my-haru-card):where(:hover, :focus-within) {
  box-shadow: var(--haru-design-shadow-hover);
}

:where(.hero-panel, .gallery-hero, .video-hero, .character-hero, .admin-hero, .my-haru-hero) {
  border: 1px solid var(--haru-design-line);
  border-radius: clamp(22px, 3vw, 34px);
  background:
    radial-gradient(circle at 0 0, rgba(127, 255, 212, 0.30), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.94), rgba(248,255,252,0.86));
  box-shadow: var(--haru-design-shadow);
}

:where(.eyebrow, .badge, .pill, .tag, .status-pill, .filter-chip) {
  border-color: rgba(45, 184, 150, 0.24);
  border-radius: var(--haru-design-radius-pill);
}

:where(button, .btn, .button, .cta, .primary-btn, .secondary-btn, .ghost-btn, .action-btn, .link-button, input[type="button"], input[type="submit"]) {
  border-radius: var(--haru-design-radius-pill);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

:where(button, .btn, .button, .cta, .primary-btn, .action-btn, .link-button):where(:hover, :focus-visible):not(:disabled) {
  transform: translateY(-1px);
}

:where(input, textarea, select) {
  border-color: var(--haru-design-line);
  border-radius: var(--haru-design-radius-soft);
}

:where(input, textarea, select):focus {
  border-color: var(--haru-design-mint-strong);
  box-shadow: 0 0 0 4px rgba(127, 255, 212, 0.22);
  outline: none;
}

:where(img, video) {
  max-width: 100%;
}

:where(.gallery-grid, .video-grid, .character-grid, .cards-grid) {
  gap: clamp(12px, 2vw, 22px);
}

:where(.gallery-card img, .gcard img, .character-card img, .video-card video, .video-card img) {
  border-radius: inherit;
}

:where(.empty-state, .loading-state, .notice, .toast, .modal, dialog) {
  border-color: var(--haru-design-line);
  border-radius: var(--haru-design-radius-card);
  box-shadow: var(--haru-design-shadow);
}

@media (max-width: 760px) {
  :root {
    --haru-design-page-pad: 14px;
    --haru-design-section-gap: 18px;
    --haru-design-radius-card: 16px;
  }

  :where(body) {
    overflow-x: hidden;
  }

  :where(.hero-panel, .gallery-hero, .video-hero, .character-hero, .admin-hero, .my-haru-hero) {
    border-radius: 20px;
  }

  :where(.hero-panel h1, .gallery-hero h1, .video-hero h1, .character-hero h1, .admin-hero h1, .my-haru-hero h1) {
    font-size: clamp(30px, 9vw, 44px);
    line-height: 1.14;
  }

  :where(.hero-panel p, .gallery-hero p, .video-hero p, .character-hero p, .admin-hero p, .my-haru-hero p) {
    font-size: clamp(14px, 3.9vw, 16px);
    line-height: 1.7;
  }

  :where(button, .btn, .button, .cta, .primary-btn, .secondary-btn, .ghost-btn, .action-btn, .link-button) {
    min-height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(*, *::before, *::after) {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}