/* Shared visual system across landing, signed-in feed and privileged dashboard.
   Keep layout declarations intact. Avoid a second brand gradient on the feed. */
:root{--whiiso-coral:var(--brand-primary);--whiiso-coral-hover:var(--brand-primary-hover);--whiiso-ink:var(--brand-ink);--whiiso-canvas:var(--brand-canvas);--whiiso-card:var(--brand-surface);--whiiso-tint:var(--brand-soft);--whiiso-border:var(--brand-outline);--whiiso-font:var(--brand-font)}
:root,html,body{font-family:var(--brand-font)}
body,button,input,textarea,select,option{font-family:var(--brand-font)}
body{background-color:var(--brand-canvas);color:var(--brand-ink)}
.logo,.landing-nav .logo,.topbar .logo,.accent{color:var(--brand-primary)}
.primary,.post-actions .pill,.clean-composer .primary,.sidebar .mobile-create{
 background:var(--brand-primary);border-color:var(--brand-primary);color:#fff;
}
.primary:hover,.post-actions .pill:hover,.clean-composer .primary:hover,.sidebar .mobile-create:hover{
 background:var(--brand-primary-hover);border-color:var(--brand-primary-hover);color:#fff;
}
.post-actions .pill,.clean-composer .primary{box-shadow:0 6px 15px #24232824}
.post-actions .pill:focus-visible,.clean-composer .primary:focus-visible,.composer-tool:focus-visible{
 outline:2px solid var(--brand-primary);outline-offset:2px;
}
.clean-composer{border:1px solid var(--brand-outline);background:var(--brand-surface);box-shadow:0 5px 26px #2423280a}
.clean-composer textarea{background:var(--brand-soft)!important;border:1px solid var(--brand-outline)!important;color:var(--brand-ink)}
.app-shell:has(.clean-composer) .feed-heading h1{color:var(--brand-ink)}
.app-shell:has(.clean-composer) .app-main:before{background:radial-gradient(ellipse at 12% 5%,var(--brand-soft) 0,transparent 57%)}
.sidebar>a.active:not(.sidebar-cta),.sidebar>a.active{background:var(--brand-soft);color:var(--brand-primary)}
.paid-offer{background:var(--brand-soft);border-color:var(--brand-outline);color:var(--brand-ink)}
/* Composer action buttons previously introduced a purple second brand; use brand for each. */
.clean-composer .composer-tool,.clean-composer .composer-tool:nth-child(2),.clean-composer .composer-tool:nth-child(3){background:var(--brand-soft);border-color:var(--brand-outline);color:var(--brand-primary)}
.clean-composer .composer-tool .ui-icon,.clean-composer .composer-tool:nth-child(2) .ui-icon{color:var(--brand-primary)}
.clean-composer textarea::placeholder{color:var(--brand-secondary-ink)}
.clean-composer .composer-tool:hover,.post-actions button.liked{color:var(--brand-primary)}
/* Admin inherits exactly the landing-page font and brand; one shared palette. */
html:has(.dashboard),body:has(.dashboard){background:var(--brand-canvas);color:var(--brand-ink)}
.dashboard{background:var(--brand-canvas);color:var(--brand-ink);font-family:var(--brand-font)}
.dashboard :is(button,input,select,textarea,.brand,.nav-btn,.screen-heading,.panel,.stat,.pill,.role-badge){font-family:var(--brand-font)}
.dashboard .topbar,.dashboard .sidebar{background:var(--brand-surface);border-color:var(--brand-outline)}
.dashboard .main,.dashboard .nav-btn,.dashboard .screen-heading h1,.dashboard .row-name{color:var(--brand-ink)}
.dashboard .screen-heading p,.dashboard .row-desc,.dashboard .stat-name,.dashboard .stat-foot,.dashboard .date-button{color:var(--brand-secondary-ink)}
.dashboard .brand,.dashboard .panel-title svg,.dashboard .text-link{color:var(--brand-primary)}
.dashboard .stat,.dashboard .panel,.dashboard .list-page,.dashboard .report-row,.dashboard .creator-row,.dashboard .community-row,.dashboard .room-row,.dashboard .data-table td{
 background:var(--brand-surface);border-color:var(--brand-outline);
}
.dashboard .stat-icon,.dashboard .role-badge,.dashboard .nav-btn.active,.dashboard .pill.pink,.dashboard .btn-soft,.dashboard .data-table th{
 background:var(--brand-soft);
}
.dashboard .stat-icon,.dashboard .role-badge,.dashboard .nav-btn.active,.dashboard .pill.pink,.dashboard .btn-outline,.dashboard .btn-soft,.dashboard .community-rank{
 color:var(--brand-primary);
}
.dashboard .nav-btn.active:before,.dashboard .notification-dot,.dashboard .permission-toggle input:checked{background:var(--brand-primary)}
.dashboard .btn-main,.dashboard .live-pill,.dashboard .auth-card a{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}
.dashboard .btn-main:hover,.dashboard .auth-card a:hover{background:var(--brand-primary-hover);border-color:var(--brand-primary-hover)}
.dashboard .btn-outline{border-color:var(--brand-outline)}
.dashboard .data-table th{color:var(--brand-secondary-ink)}
.dashboard .global-search{background:var(--brand-soft);border:1px solid var(--brand-outline)}
.dashboard .global-search svg,.dashboard .global-search input,.dashboard .global-search input::placeholder{color:var(--brand-secondary-ink)}
.dashboard .date-button{background:var(--brand-surface);border-color:var(--brand-outline)}
.dashboard .screen-heading h1{letter-spacing:-.045em}
.dashboard .brand{letter-spacing:-.045em}
.dashboard .pill.blue,.dashboard .pill.yellow,.dashboard .pill.green{font-family:var(--brand-font)}
.dashboard .form-control,.record-body input,.record-body select,.record-body textarea{font-family:var(--brand-font);border-color:var(--brand-outline)}
.dashboard .view-preview-note{background:var(--brand-soft);border-color:var(--brand-outline)}
.dashboard .auth-gate{background:var(--brand-canvas)}
/* Colour is centralized; status meanings (green approved, amber under review) remain semantic. */

/* Accessible neutral actions: white text uses the dark member of the same brand family. */
.primary,.post-actions .pill,.clean-composer .primary,.sidebar .mobile-create,.dashboard .btn-main,.dashboard .live-pill,.dashboard .auth-card a {background:var(--brand-action);border-color:var(--brand-action);color:var(--brand-on-primary)}
.primary:hover,.post-actions .pill:hover,.clean-composer .primary:hover,.sidebar .mobile-create:hover,.dashboard .btn-main:hover,.dashboard .auth-card a:hover {background:var(--brand-focus);border-color:var(--brand-focus);color:var(--brand-on-primary)}
/* The landing hero keeps its original dark CTA; no layout or copy modifications. */
.social-hero .hero-ctas .primary{background:#242328;border-color:#242328}
.social-hero .hero-ctas .primary:hover{background:#101013;border-color:#101013}
/* Unified interactive focus treatment without the old magenta or violet outlines. */
:where(button,a,input,textarea,select):focus-visible{outline-color:var(--brand-focus)}

/* Approved understated landing-page theme: no reference background, hot-pink or violet brand accents. */

.social-hero{background:#fdebed}
body,html{font-family:var(--brand-font)}
.logo,.landing-nav .logo,.topbar .logo,.accent,.dashboard .brand,.dashboard .panel-title svg,.dashboard .text-link{color:var(--brand-ink)}
.primary,.post-actions .pill,.clean-composer .primary,.sidebar .mobile-create,.dashboard .btn-main,.dashboard .live-pill,.dashboard .auth-card a{background:var(--brand-action);border-color:var(--brand-action);color:#fff}
.primary:hover,.post-actions .pill:hover,.clean-composer .primary:hover,.sidebar .mobile-create:hover,.dashboard .btn-main:hover,.dashboard .auth-card a:hover{background:#17171a;border-color:#17171a;color:#fff}
.dashboard .nav-btn.active{background:var(--brand-soft);color:var(--brand-ink)}
.dashboard .nav-btn.active:before,.dashboard .notification-dot,.dashboard .permission-toggle input:checked{background:var(--brand-ink)}
.dashboard .stat-icon,.dashboard .role-badge,.dashboard .pill.pink,.dashboard .btn-soft,.dashboard .data-table th{background:var(--brand-soft)}
.dashboard .stat-icon,.dashboard .role-badge,.dashboard .pill.pink,.dashboard .btn-outline,.dashboard .btn-soft,.dashboard .community-rank{color:var(--brand-ink)}
.dashboard .btn-outline{border-color:var(--brand-outline)}
.sidebar>a.active:not(.sidebar-cta),.sidebar>a.active{background:var(--brand-soft);color:var(--brand-ink)}
.paid-offer{background:var(--brand-soft);border-color:var(--brand-outline)}
.clean-composer .composer-tool,.clean-composer .composer-tool:nth-child(2),.clean-composer .composer-tool:nth-child(3){background:var(--brand-soft);color:var(--brand-ink);border-color:var(--brand-outline)}
.clean-composer .composer-tool .ui-icon,.clean-composer .composer-tool:nth-child(2) .ui-icon{color:var(--brand-ink)}
.post-actions button.liked,.clean-composer .composer-tool:hover{color:var(--brand-ink)}
:where(button,a,input,textarea,select):focus-visible{outline-color:var(--brand-ink)}

/* Generic call-to-action variants used on authentication, composer and admin records. */
.landing-signup-link,.signup-button,.cta-button,.btn.primary,.btn-main,.role-btn.primary,.dashboard button.primary,.dashboard .btn-main{background:#242328;border-color:#242328;color:#fff}
.landing-signup-link:hover,.signup-button:hover,.cta-button:hover,.btn.primary:hover,.btn-main:hover{background:#17171a;border-color:#17171a;color:#fff}
.dashboard .role-btn,.dashboard .role-badge{color:#242328;background:#fdebed;border-color:#e8dddf}
.dashboard .link,.dashboard .nav-btn.active,.dashboard .stat-icon{color:#242328}