/*
 * Shared visual layer for CC town pages outside cc-phone.
 * This file intentionally avoids layout rewrites. It only pulls legacy pages
 * toward the same light liquid-glass language used by the PWA home/chat views.
 */

:root {
  --cc-page-bg: #faf9f7;
  --cc-text: #342f2b;
  --cc-text-soft: #706861;
  --cc-text-faint: #a19991;
  --cc-line: rgba(125, 106, 92, 0.14);
  --cc-red: #c96f5f;
  --cc-blue: #5f8fb7;
  --cc-green: #769d7b;
  --cc-gold: #b9935d;
  --cc-glass: rgba(255, 255, 255, 0.28);
  --cc-glass-soft: rgba(255, 255, 255, 0.18);
  --cc-glass-warm: rgba(255, 250, 246, 0.32);
  --cc-glass-border: rgba(255, 255, 255, 0.55);
  --cc-shadow: 0 18px 48px rgba(111, 88, 72, 0.09);
  --cc-inner: inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

html {
  background: var(--cc-page-bg) !important;
}

body {
  color: var(--cc-text) !important;
  background:
    radial-gradient(circle at 16% 8%, rgba(225, 116, 94, 0.13), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(104, 145, 188, 0.12), transparent 30%),
    radial-gradient(circle at 58% 84%, rgba(194, 157, 105, 0.15), transparent 34%),
    linear-gradient(145deg, #fffaf6 0%, #faf9f7 44%, #f5f7f5 100%) !important;
}

a {
  color: inherit;
}

:where(h1, h2, h3, .title, .book-title, .task-title, .section-title, .bucket-title, .card-title) {
  color: var(--cc-text) !important;
}

:where(.muted, .subtitle, .desc, .meta, .hint, .empty, .book-meta, .task-meta, .chapter-meta, .small, .timestamp, .stat-label) {
  color: var(--cc-text-soft) !important;
}

:where(.page-kicker, .eyebrow, .label, .tab-label, .section-label) {
  color: var(--cc-text-faint) !important;
  letter-spacing: 0.08em !important;
}

:where(
  .card,
  .panel,
  .box,
  .module-card,
  .bucket-row,
  .memory-card,
  .search-box,
  .search-bar,
  .search-bar input,
  .filter-btn,
  .book-item,
  .book-card,
  .chapter-item,
  .quote-card,
  .reader-card,
  .task-card,
  .timer-bar,
  .stuck-item,
  .material-card,
  .plan-card,
  .modal,
  .bottom-nav,
  .tabs,
  .tab,
  .again,
  .tube
) {
  background: linear-gradient(145deg, var(--cc-glass), var(--cc-glass-soft)) !important;
  border-color: var(--cc-glass-border) !important;
  box-shadow: var(--cc-inner), var(--cc-shadow) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
}

:where(.card, .panel, .box, .book-item, .book-card, .task-card, .chapter-item, .modal, .bottom-nav, .bucket-row) {
  border-radius: 16px !important;
}

:where(hr, .divider, .sep, .line, .row, .item, .chapter-item, .task-card, .book-item) {
  border-color: var(--cc-line) !important;
}

:where(button, .btn, .again, .filter-btn, .tab, .nav-item, .action-btn) {
  color: var(--cc-text) !important;
}

:where(button.primary, .btn.primary, .primary, .active, .tab.active, .filter-btn.active) {
  background: linear-gradient(145deg, rgba(201, 111, 95, 0.18), rgba(255, 255, 255, 0.18)) !important;
  border-color: rgba(201, 111, 95, 0.26) !important;
  color: var(--cc-red) !important;
}

:where(input, textarea, select) {
  background: rgba(255, 255, 255, 0.26) !important;
  border-color: var(--cc-glass-border) !important;
  color: var(--cc-text) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
}

:where(input::placeholder, textarea::placeholder) {
  color: var(--cc-text-faint) !important;
}

:where(.icon, .card-icon, .book-icon, .task-icon, .nav-icon, svg) {
  color: var(--cc-red) !important;
  stroke: currentColor;
}

:where(.card:nth-of-type(2n), .book-item:nth-of-type(2n), .task-card:nth-of-type(2n), .bucket-row:nth-of-type(2n)) :where(.icon, .card-icon, .book-icon, .task-icon, svg) {
  color: var(--cc-blue) !important;
}

:where(.card:nth-of-type(3n), .book-item:nth-of-type(3n), .task-card:nth-of-type(3n), .bucket-row:nth-of-type(3n)) :where(.icon, .card-icon, .book-icon, .task-icon, svg) {
  color: var(--cc-green) !important;
}

:where(.fortune-title, .draw-title, .result-title, .sign-title, .poem, .quote-title) {
  color: var(--cc-red) !important;
}

:where(.fortune-meta, .draw-meta, .sign-meta) {
  color: var(--cc-gold) !important;
}

:where(.progress, .progress-bar, .fill) {
  background: linear-gradient(90deg, rgba(201, 111, 95, 0.78), rgba(95, 143, 183, 0.68)) !important;
}