/* Shared visual system. Base colours remain editable through the existing palette.
   Use semantic roles here; never lighten a dark surface with a hard-coded white. */
:root {
  --ink: var(--text);
  --blue: var(--accent);
  --surface: var(--card);
  --surface-muted: color-mix(in srgb, var(--card) 60%, var(--bg));
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--card));
  --accent-contrast: var(--accent-text);
  --border-color: var(--border);
  --success: #18734d;
  --warning: #865c08;
  --error: #b52d3b;
  --info: #245caa;
  --violet: #7750ac;
  --ui-control-radius: 12px;
  --ui-card-radius: 20px;
  --ui-hero-radius: 26px;
  --ui-hairline: color-mix(in srgb, var(--border) 88%, var(--text) 12%);
  --ui-surface: var(--card);
  --ui-soft: var(--accent-soft);
  --ui-shadow: 0 2px 4px rgb(16 23 38 / .025), 0 12px 32px rgb(16 23 38 / .045);
  --ui-shadow-float: 0 16px 48px rgb(16 23 38 / .16);
  --ui-ease: cubic-bezier(.2,.7,.2,1);
  --ui-action: var(--accent);
  --ui-link: var(--accent);
}
/* The editable brand hue is kept; its text/action role needs more contrast on light surfaces. */
html:root[data-theme="light"] {
  --accent: color-mix(in srgb,var(--brand-accent) 60%,var(--text));
  --warm-accent: var(--accent);
  --text-sub: color-mix(in srgb,var(--palette-text-sub) 88%,var(--text));
}
:root[data-theme="dark"] {
  --ui-action: var(--accent);
  --ui-link: var(--accent);
  --success: #75d5a4;
  --warning: #edc676;
  --error: #ff9da7;
  --info: #99bfff;
  --violet: #c9adff;
  --ui-shadow: 0 2px 4px rgb(0 0 0 / .08), 0 14px 36px rgb(0 0 0 / .18);
  --ui-shadow-float: 0 20px 55px rgb(0 0 0 / .4);
}
html { scrollbar-color: var(--border) var(--bg); scroll-padding-top: calc(var(--site-header-height) + 20px); }
body {
  background: radial-gradient(ellipse 85% 550px at 10% 0, color-mix(in srgb,var(--accent) 6%,transparent), transparent), var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--accent-text); }
html a { color: var(--ui-link); }
html:root[data-theme] :is(.home-kicker,.section-kicker,.page-kicker,.admin-kicker) { color: var(--ui-link); }
html :is(h1,h2,h3) { letter-spacing: -.025em; text-wrap: balance; }
html :is(.page-sub,.field-hint,.form-help,.help-text) { color: var(--text-sub); }

/* Shared surfaces; enough specificity to override the old per-page variants. */
html :is(.card,.admin-panel,.real-admin-card,.meeting-card,.forum-section-card,
  .discover-card,.public-club-card,.club-category-card,.profile-collapsible,
  .notification-card,.health-card,.protection-card,.community-pulse-main,
  .community-spotlight,.side-widget,.post,.thread-row,.member-card,.listing-card) {
  background-color: var(--ui-surface);
  color: var(--text);
  border-color: var(--ui-hairline);
  border-radius: var(--ui-card-radius);
  box-shadow: var(--ui-shadow);
}
html .forum-section-card { border-top-width: 1px; }
html[data-theme] .forum-category-card {
  background: var(--surface-muted);
  border-color: var(--ui-hairline);
  border-radius: 15px;
  color: var(--text);
  box-shadow: none;
}
html[data-theme] .forum-category-copy strong { color: var(--text); }
html .forum-section-card .cat-icon-box {
  background: color-mix(in srgb,var(--section-accent,var(--accent)) 15%,var(--card));
  border: 1px solid color-mix(in srgb,var(--section-accent,var(--accent)) 22%,var(--border));
}
html :is(.forum-section-card h3,.community-stat strong) { color: var(--text); }
html .community-stat { border-color: var(--ui-hairline); box-shadow: none; }

/* Hero: a photographic frame motif, with no filter applied to members' images. */
html .community-hero {
  padding: clamp(24px,4vw,48px);
  margin-top: 4px;
  gap: 32px;
  border-radius: var(--ui-hero-radius);
  border-color: color-mix(in srgb,var(--accent) 25%,var(--border));
  background: radial-gradient(ellipse at 95% 0,color-mix(in srgb,var(--accent) 15%,transparent),transparent 65%), var(--card);
  box-shadow: var(--ui-shadow);
}
html .community-hero::after {
  content: ''; width: 230px; height: 230px; right: -80px; bottom: -100px;
  border: 1px solid color-mix(in srgb,var(--accent) 20%,transparent);
  border-radius: 50%; box-shadow: 0 0 0 35px color-mix(in srgb,var(--accent) 4%,transparent), 0 0 0 70px color-mix(in srgb,var(--accent) 3%,transparent);
}
html .community-hero .page-title { font-size: clamp(1.85rem,3.1vw,2.65rem); line-height: 1.13; letter-spacing: -.045em; }
html .community-hero-note { align-self: center; padding: 22px; background: color-mix(in srgb,var(--card) 82%,transparent); border-color: var(--ui-hairline); border-radius: 18px; }
html .community-hero-note strong { line-height: 1.4; }
html .community-spotlight { background: linear-gradient(145deg,var(--accent-soft),var(--card) 80%); }
html .activity-row { padding-block: 14px; border-color: var(--ui-hairline); }
html .site-footer { padding-block: 26px; border-top: 1px solid var(--ui-hairline); line-height: 1.9; }

/* Controls: both the label and its nested elements follow the button role. */
html :is(.btn,.button) { border-radius: var(--ui-control-radius); font-weight: 650; }
html :is(.btn-primary,.button-primary),
html :is(.btn-primary,.button-primary):is(:hover,:focus-visible,:active) {
  background: var(--ui-action); border-color: var(--ui-action); color: var(--accent-text);
}
html :is(.btn-primary,.button-primary) :is(strong,b,small,span) { color: inherit; }
html :is(.btn-primary,.button-primary):hover { box-shadow: 0 7px 22px color-mix(in srgb,var(--accent) 28%,transparent); }
html .btn:not(.btn-primary):not(.btn-danger):not(.btn-success):hover { background: var(--accent-soft); color: var(--text); }
html :is(.pagination .current,.members-sort a.is-active,.admin-nav-links a.is-active,.display-customizer-toggle,.display-customizer-panel .display-done,.skip-link,.skip-link:focus) { color: var(--accent-text); }
html .mobile-nav-action-primary { color: var(--accent-text) !important; }
html .real-space-admin-menu.real-space-admin-modern .real-space-admin-primary a.is-active { color: var(--accent-text) !important; }
html .real-space-admin-menu.real-space-admin-modern .real-space-admin-primary a.is-active > span { color: inherit !important; }
html :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=button]),select,textarea) {
  background-color: var(--surface-muted); color: var(--text); border-color: var(--ui-hairline);
  caret-color: var(--accent); border-radius: var(--ui-control-radius);
}
html :is(input,textarea)::placeholder { color: var(--text-sub); opacity: .8; }
html :is(input,select,textarea):focus-visible { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }
html :is(input[type=checkbox],input[type=radio],progress) { accent-color: var(--accent); }
html :is(input,textarea):autofill { box-shadow: 0 0 0 1000px var(--card) inset; -webkit-text-fill-color: var(--text); }
html :is(button,.btn):disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Menus and floating panels stay opaque and legible in either theme. */
html :is(.event-preview-card,.modal-card,.display-menu-panel,.account-menu-panel,
  .mobile-account-menu-panel,.space-switcher-menu,.nav-dropdown-menu,.notif-dropdown,
  .global-search-results,.admin-nav-dropdown-panel,.real-space-admin-dropdown-panel,
  .guided-help-card,.cookie-consent,.display-customizer-panel,.report-details > form) {
  background: var(--card); color: var(--text); border-color: var(--ui-hairline); box-shadow: var(--ui-shadow-float);
}
html .event-preview-card :is(h2,strong) { color: var(--text); }
html .event-preview-description { background: var(--surface-muted); color: var(--text); }
html .display-theme-choices { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
html .display-theme-choices button { min-width: 0; padding-inline: 8px; white-space: nowrap; color: var(--text); background: var(--surface-muted); }
html :is(.display-theme-choices,.text-size-choices) button[aria-pressed=true] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
html .display-theme-choices button span { color: inherit; }
html .display-setting-icon { background: var(--accent-soft); color: var(--accent); }
html .site-banner-link, html .site-banner-link:hover { background: var(--ui-action); border-color: var(--ui-action); color: var(--accent-text); }
html .calendar-event-bar, html .calendar-event-bar:hover { background: var(--ui-action); border-color: var(--ui-action); color: var(--accent-text); }
html .calendar-event-bar span { color: inherit; }
html .forum-category-arrow { color: var(--ui-link); }
html .role-admin { color: var(--violet); background: color-mix(in srgb,var(--violet) 12%,var(--card)); }
html .post-space-icon { color: var(--ui-link); background: var(--accent-soft); }

/* Semantic feedback colours are paired with theme-aware surfaces. */
html :is(.admin-detail-status.is-ok,.real-admin-status.is-live,.invitation-status.is-accepted,.success-msg) { background: color-mix(in srgb,var(--success) 12%,var(--card)); color: var(--success); border-color: color-mix(in srgb,var(--success) 40%,var(--border)); }
html :is(.admin-detail-status.is-pending,.protection-countdown,.idea-column-building .idea-status,.invitation-status.is-pending,.critique-featured-badge) { background: color-mix(in srgb,var(--warning) 12%,var(--card)); color: var(--warning); border-color: color-mix(in srgb,var(--warning) 40%,var(--border)); }
html :is(.admin-detail-status.is-danger,.invitation-status.is-declined,.error-msg,.composer-upload-notice.is-error) { background: color-mix(in srgb,var(--error) 10%,var(--card)); color: var(--error); border-color: color-mix(in srgb,var(--error) 40%,var(--border)); }
html :is(.idea-column-planned .idea-status,.admin-private-note) { background: color-mix(in srgb,var(--violet) 10%,var(--card)); color: var(--violet); border-color: color-mix(in srgb,var(--violet) 32%,var(--border)); }
html .registration-mail-tip { background: color-mix(in srgb,var(--info) 9%,var(--card)); color: var(--text-sub); border-color: color-mix(in srgb,var(--info) 30%,var(--border)); }
html .registration-mail-tip strong { color: var(--info); }
html :is(.real-admin-status,.protection-countdown.is-permanent) { background: var(--surface-muted); color: var(--text-sub); }
html :is(.admin-private-note > span,.real-admin-page-head p,.real-admin-list em,.real-admin-tool-card p,.real-admin-idea-row p,.real-admin-callout) { color: var(--text-sub); }
html :is(.real-admin-count,.real-admin-tool-icon,.real-admin-action-grid a > span,.real-admin-action-grid em,.real-admin-tag-row summary em,.real-admin-stat-grid strong) { color: var(--accent); }
html :is(.real-admin-inline-edit,.real-admin-tag-list span,.real-admin-callout,.real-admin-count,.real-admin-tool-icon,.display-customizer-panel button,.protection-intro-note > span,.community-pending-banner) { background: var(--surface-muted); border-color: var(--ui-hairline); }
html .club-category-icon { background: color-mix(in srgb,var(--club-section-accent,var(--accent)) 12%,var(--card)); }
html .real-admin-inline-edit input[type=color] { background: var(--card); border-color: var(--ui-hairline); }
html .journal-icon-member { color: var(--success); }
html :is(.journal-icon-thread,.journal-icon-reply,.journal-icon-email,.journal-icon-email_auto) { color: var(--violet); }
html :is(.journal-icon-idea,.composer-hint-warn,.prompt-empty > span,.prompt-compose-banner > span,.profile-idea-status-building) { color: var(--warning); }
html .journal-icon-event { color: var(--info); }
html :is(.profile-idea-status-planned,.profile-idea-status-shipped,.idea-score.is-positive,.idea-status-shipped,.pola-admin-stats .is-positive strong) { color: var(--success); }
html .pola-admin-stats .is-negative strong { color: var(--error); }

/* Photo presentation: a quieter frame gives images space. */
html .gallery-grid { gap: 14px; }
html .gallery-tile { border-radius: 18px; border: 1px solid var(--ui-hairline); box-shadow: var(--ui-shadow); }
html .gallery-tile-overlay { padding: 24px 14px 12px; background: linear-gradient(transparent,rgb(0 0 0 / .82)); }
html .gallery-tile-overlay :is(strong,span,small) { color: #fff; }

/* Only interactive cards lift. Scrolling content is never hidden pending JS. */
@media (prefers-reduced-motion: no-preference) {
  html :is(.btn,.nav-link,.forum-category-card,.discover-card,.public-club-card,.gallery-tile,.activity-row,.spotlight-link,.display-theme-choices button) {
    transition: background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .25s ease,transform .3s var(--ui-ease);
  }
  html .gallery-tile img { transition: transform .65s var(--ui-ease); }
  html :is(.display-menu-panel:not([hidden]),.event-preview-modal:not([hidden]) .event-preview-card,details[open] > .account-menu-panel) { animation: ui-panel-in .18s var(--ui-ease); }
  @keyframes ui-panel-in { from { opacity: .6; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
}
@media (hover:hover) and (pointer:fine) {
  html :is(.forum-category-card,.discover-card,.public-club-card,.gallery-tile):hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--ui-shadow-float); text-decoration: none; }
  html :is(.activity-row,.spotlight-link):hover { background-color: var(--accent-soft); text-decoration: none; }
  html .gallery-tile:hover img { transform: scale(1.04); }
}
@media (max-width:760px) {
  html .community-hero { padding: 24px 20px; gap: 20px; }
  html .community-hero .page-title { font-size: clamp(1.75rem,6vw,2.2rem); }
  html .community-hero-note { padding: 17px; }
  html .gallery-grid { gap: 9px; }
  html .gallery-tile { border-radius: 13px; }
  html .display-theme-choices button { font-size: .82rem; }
  html .display-menu-panel { max-width: calc(100vw - 24px); }
}
@media (max-width:420px) {
  html .display-theme-choices button { flex-direction: column; gap: 4px; padding-block: 8px; }
}
@media (prefers-reduced-motion:reduce) {
  html :is(.gallery-tile,.forum-category-card,.discover-card,.public-club-card,.btn):hover { transform: none; }
  html .gallery-tile:hover img { transform: none; }
}
@media (forced-colors:active) {
  html :is(.btn,.card,.gallery-tile,.forum-category-card) { border: 1px solid CanvasText; }
}