/*
 * Family theme
 * Shared visual layer for the website, administration and both mobile PWAs.
 * The neutral photo-frame player deliberately does not load this stylesheet.
 */
:root {
  color-scheme: light;
  --brand-primary: #ef6a5b !important;
  --brand-accent: #263746 !important;
  --family-cream: #fff8f1;
  --family-cream-deep: #f8eee5;
  --family-white: #ffffff;
  --family-coral: #ef6a5b;
  --family-coral-dark: #d95649;
  --family-coral-soft: #fff0eb;
  --family-mint: #dff5eb;
  --family-mint-dark: #287b65;
  --family-sun: #f5c95e;
  --family-ink: #263746;
  --family-muted: #5f6b73;
  --family-line: #eadfd6;
  --family-shadow: 0 18px 48px rgba(90, 66, 52, .10);
  --family-shadow-soft: 0 9px 26px rgba(90, 66, 52, .08);

  --bg: var(--family-cream);
  --bg-soft: #fffdf9;
  --bg-deep: var(--family-cream-deep);
  --hanni-bg: var(--family-cream);
  --hanni-bg-soft: #fffdf9;
  --hanni-surface: var(--family-white);
  --hanni-surface-strong: var(--family-white);
  --hanni-surface-hover: var(--family-coral-soft);
  --hanni-border: var(--family-line);
  --hanni-text: var(--family-ink);
  --hanni-text-muted: var(--family-muted);
  --hanni-purple: var(--family-coral);
  --hanni-purple-soft: #f59a7c;
  --purple: var(--family-coral);
  --purple-soft: #f59a7c;
  --accent: var(--family-sun);
  --text: var(--family-ink);
  --text-soft: #41515e;
  --text-muted: var(--family-muted);
  --glass: rgba(255, 255, 255, .82);
  --glass-strong: #ffffff;
  --glass-border: var(--family-line);
  --card: var(--family-white);
  --ink: var(--family-ink);
  --muted: var(--family-muted);
  --line: var(--family-line);
  --soft: var(--family-coral-soft);
  --shadow-glow: 0 0 46px rgba(239, 106, 91, .15);
  --shadow-card: var(--family-shadow);
}

html { background: var(--family-cream); }

body,
body.public-body,
body.mobile-body {
  color: var(--family-ink) !important;
  background:
    radial-gradient(circle at 9% 2%, rgba(245, 201, 94, .21), transparent 24%),
    radial-gradient(circle at 92% 6%, rgba(223, 245, 235, .82), transparent 27%),
    linear-gradient(145deg, #fffdf9 0%, var(--family-cream) 55%, #fdf4ec 100%) !important;
}

body.public-body::before,
body:not(.frame-body)::before {
  background:
    linear-gradient(120deg, transparent 0 37%, rgba(239, 106, 91, .055) 47%, transparent 61%),
    linear-gradient(155deg, transparent 0 55%, rgba(245, 201, 94, .08) 66%, transparent 78%) !important;
}

body.public-body::after,
body:not(.frame-body)::after {
  opacity: .35;
  background-image:
    radial-gradient(circle at 22% 22%, rgba(239, 106, 91, .25) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 18%, rgba(40, 123, 101, .22) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 58%, rgba(245, 201, 94, .30) 0 1px, transparent 2px) !important;
}

a { color: var(--family-coral-dark); }

/* Shared controls */
.hanni-btn-primary,
.primary-btn,
.public-cta,
.btn:not(.secondary-btn):not(.ghost-btn):not(.danger-btn),
.submit-btn,
.install-card button {
  border-color: var(--family-coral) !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--family-coral), var(--family-coral-dark)) !important;
  box-shadow: 0 10px 24px rgba(217, 86, 73, .22) !important;
}

.hanni-btn-secondary,
.secondary-btn,
.ghost-btn,
.ghost,
.public-secondary {
  border-color: var(--family-line) !important;
  color: var(--family-ink) !important;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: none !important;
}

.hanni-btn:hover,
.primary-btn:hover,
.secondary-btn:hover,
.ghost-btn:hover,
.btn:hover,
.public-cta:hover,
.submit-btn:hover {
  transform: translateY(-1px);
  filter: saturate(1.06);
}

input,
select,
textarea,
.public-login-card input,
.public-login-card select,
.contact-form textarea {
  border-color: var(--family-line) !important;
  color: var(--family-ink) !important;
  background: #fff !important;
  box-shadow: inset 0 1px 2px rgba(90, 66, 52, .04) !important;
}

input::placeholder,
textarea::placeholder,
.public-login-card input::placeholder { color: #879198 !important; }

input:focus,
select:focus,
textarea:focus,
.public-login-card input:focus,
.contact-form textarea:focus {
  border-color: var(--family-coral) !important;
  outline: 3px solid rgba(239, 106, 91, .13) !important;
}

select option { color: var(--family-ink) !important; background: #fff !important; }

.flash,
.public-flash { border-color: var(--family-line) !important; color: var(--family-ink) !important; background: #fff !important; }
.flash.success,
.public-flash.success { border-color: #a9dbc9 !important; background: #effaf6 !important; }
.flash.error,
.public-flash.error { border-color: #f2b8b0 !important; background: #fff2f0 !important; }

/* Public website */
.hanni-public-nav.public-topbar,
.public-topbar {
  border-color: rgba(234, 223, 214, .88) !important;
  background: rgba(255, 253, 249, .88) !important;
  box-shadow: 0 12px 34px rgba(90, 66, 52, .07) !important;
  backdrop-filter: blur(18px);
}

.public-center-nav a,
.public-login-link,
.public-nav a,
.public-footer a { color: var(--family-muted) !important; }
.public-center-nav a:hover,
.public-login-link:hover,
.public-nav a:hover,
.public-footer a:hover { color: var(--family-coral-dark) !important; }
.hanni-menu-toggle span { background: var(--family-ink) !important; }

.hanni-kicker,
.hero-pill,
.made-in-denmark,
.pill,
.plan-badge {
  border-color: #f3c5b9 !important;
  color: var(--family-coral-dark) !important;
  background: var(--family-coral-soft) !important;
}

.hanni-hero h1,
.hanni-section-head h2,
.hanni-portal-copy h2,
.public-page-hero h1,
.market-hero h1,
.product-card h2,
.platform-band h2,
.public-price-card h2,
.public-login-card h1,
.public-login-card h2,
.auth-copy-panel h1 { color: var(--family-ink) !important; text-shadow: none !important; }

.hanni-hero h1::first-line { color: var(--family-coral-dark) !important; }
.hanni-platforms span {
  border-color: var(--family-line) !important;
  color: var(--family-muted) !important;
  background: rgba(255, 255, 255, .78) !important;
}
.hanni-hero-copy p,
.hanni-section-head p,
.hanni-portal-copy p,
.public-page-hero p,
.market-hero-copy p,
.product-card p,
.public-price-card p,
.auth-copy-panel p,
.public-login-card p { color: var(--family-muted) !important; }

.hanni-tv-card,
.hanni-floating-card,
.hanni-mobile-preview,
.hanni-universe-card,
.hanni-platform-core,
.hanni-proof-stack article,
.hanni-connect-card,
.hanni-login-card,
.public-login-card,
.public-panel,
.public-price-card,
.product-card,
.download-card,
.public-bottom-grid blockquote,
.family-card-public {
  border-color: var(--family-line) !important;
  color: var(--family-ink) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: var(--family-shadow) !important;
}

.hanni-floating-card small,
.hanni-universe-card p,
.hanni-universe-card li,
.hanni-proof-stack span,
.hanni-connect-card p,
.download-card small,
.public-bottom-grid cite { color: var(--family-muted) !important; }
.hanni-mobile-preview a { color: #fff !important; background: var(--family-coral) !important; }
.hanni-universe-card h2,
.hanni-proof-stack strong,
.hanni-connect-card h3,
.download-card strong,
.public-bottom-grid blockquote p { color: var(--family-ink) !important; }

.hanni-platform-core,
.platform-band,
.public-download-band {
  border-color: var(--family-line) !important;
  background: linear-gradient(135deg, #fff, #fff7ef) !important;
}
.hanni-node,
.hanni-device { border-color: var(--family-line) !important; color: var(--family-ink) !important; background: #fff !important; }
.hanni-core-logo { border-color: #f3c5b9 !important; background: var(--family-coral-soft) !important; box-shadow: 0 0 48px rgba(239, 106, 91, .16) !important; }
.hanni-footer.public-footer { border-color: var(--family-line) !important; color: var(--family-muted) !important; background: #fff !important; }
.hanni-footer-brand span,
.hanni-footer-col strong,
.hanni-footer-cta strong { color: var(--family-ink) !important; }
.hanni-footer-cta { border-color: var(--family-line) !important; background: var(--family-mint) !important; }

/* Logged-in website */
.app-shell {
  background:
    radial-gradient(circle at 34% 0%, rgba(245, 201, 94, .13), transparent 27%),
    linear-gradient(145deg, #fffdf9, var(--family-cream)) !important;
}

.sidebar {
  border-color: var(--family-line) !important;
  background: rgba(255, 253, 249, .94) !important;
  box-shadow: var(--family-shadow) !important;
}
.sidebar::before { background: linear-gradient(180deg, rgba(223, 245, 235, .50), rgba(255, 255, 255, .10)) !important; }
.brand { border-color: var(--family-line) !important; color: var(--family-ink) !important; background: #fff !important; }
.brand strong,
.brand small { color: var(--family-ink) !important; }
.brand small { opacity: .62; }
.nav-group { border-color: transparent !important; background: transparent !important; }
.nav-group > span { color: #8b7d73 !important; }
.side-nav a { color: var(--family-muted) !important; }
.side-nav a i { color: var(--family-coral-dark) !important; background: var(--family-coral-soft) !important; }
.side-nav a:hover,
.side-nav a.active {
  border-color: #f1c7bc !important;
  color: var(--family-coral-dark) !important;
  background: var(--family-coral-soft) !important;
  box-shadow: inset 3px 0 0 var(--family-coral) !important;
}
.nav-advanced { border-top-color: var(--family-line) !important; }
.nav-advanced > summary { color: #8b7d73 !important; }
.nav-advanced > summary:hover,
.nav-advanced[open] > summary { color: var(--family-ink) !important; background: var(--family-mint) !important; }
.pro-card { border-color: #bfe6d8 !important; color: var(--family-ink) !important; background: var(--family-mint) !important; box-shadow: none !important; }
.pro-card small,
.logout-link,
.version-tag { color: var(--family-muted) !important; }
.pro-card a { color: #fff !important; background: var(--family-mint-dark) !important; }

.topbar {
  border-color: var(--family-line) !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: var(--family-shadow-soft) !important;
}
.mode-switch,
.hanni-context-switch { border-color: var(--family-line) !important; background: var(--family-cream) !important; }
.mode-switch span,
.mode-switch a,
.hanni-context-switch span { color: var(--family-muted) !important; }
.mode-switch .active,
.hanni-context-switch .active { color: #fff !important; background: var(--family-coral) !important; }
.icon-btn { border-color: var(--family-line) !important; color: var(--family-ink) !important; background: #fff !important; }
.user-chip { color: var(--family-ink) !important; }
.user-chip small { color: var(--family-muted) !important; }

.panel,
.card,
.surface-card,
.stat-card,
.frame-card,
.concept-panel,
.screen-list-panel,
.screen-settings-panel,
.create-screen-panel,
.preview-panel,
.metric-card,
.quick-actions-panel,
.light-card,
.family-overview {
  border-color: var(--family-line) !important;
  color: var(--family-ink) !important;
  background: #fff !important;
  box-shadow: var(--family-shadow-soft) !important;
}

.dashboard-hero h2,
.panel h1, .panel h2, .panel h3, .panel h4,
.card h1, .card h2, .card h3, .card h4,
.light-card h3,
.family-overview h3,
.metric-card strong,
.stat-card strong,
.frame-card h3,
.concept-card-grid strong,
.screen-type-picker strong { color: var(--family-ink) !important; }

.dashboard-hero p,
.metric-card small,
.metric-card span,
.panel p, .panel small,
.card p, .card small,
.light-card p, .light-card small,
.family-overview small,
.screen-row small, .screen-row em,
.soft-row small,
.fit-help-list,
.delete-note,
.muted { color: var(--family-muted) !important; }

.quick-action-grid a,
.light-card-action,
.screen-row,
.family-metrics div,
.concept-card-grid article,
.screen-type-picker label,
.technical-details,
.fit-help-list,
.display-device-card,
.soft-row,
.check-tile,
.album-tile {
  border-color: var(--family-line) !important;
  color: var(--family-ink) !important;
  background: #fffaf5 !important;
}
.quick-action-grid a:hover,
.light-card-action:hover,
.screen-row:hover,
.album-tile:hover { border-color: #f1c7bc !important; box-shadow: var(--family-shadow-soft) !important; }
.user-chip > span,
.wave-mark,
.metric-icon,
.quick-action-grid span,
.family-metrics span { color: #fff !important; background: linear-gradient(135deg, var(--family-coral), #f59a7c) !important; }
.metric-card.highlight { border-color: #f1c7bc !important; box-shadow: var(--family-shadow), var(--shadow-glow) !important; }
.status-pill,
.pill,
.frame-meta span { border-color: var(--family-line) !important; color: var(--family-muted) !important; background: #fffaf5 !important; }
.screen-thumb { background: linear-gradient(135deg, var(--family-mint), var(--family-coral) 58%, var(--family-sun)) !important; }
.advanced-settings-group { border-color: var(--family-line) !important; background: #fffaf5 !important; }
.advanced-settings-group > summary span,
.advanced-content-summary strong { color: var(--family-ink) !important; }
.advanced-settings-group > summary small,
.advanced-content-summary small { color: var(--family-muted) !important; }
.advanced-settings-group > summary::after,
.advanced-content-summary::after { color: var(--family-coral-dark) !important; background: var(--family-coral-soft) !important; }
.advanced-panel-body,
.advanced-content-body { border-top-color: var(--family-line) !important; }
.danger-zone { border-color: #f2b8b0 !important; background: #fff2f0 !important; }
.danger-zone p { color: var(--family-muted) !important; }

/* Mobile home PWA */
.mobile-shell { color: var(--family-ink); }
.mobile-hero {
  border: 1px solid var(--family-line);
  color: var(--family-ink) !important;
  background: linear-gradient(145deg, #fff, #fff4e9) !important;
  box-shadow: var(--family-shadow) !important;
}
.mobile-hero h1 { color: var(--family-ink) !important; }
.mobile-hero p { color: var(--family-muted) !important; }
.mobile-kicker { color: var(--family-coral-dark) !important; }
.install-card { border-color: #bfe6d8 !important; color: var(--family-ink) !important; background: var(--family-mint) !important; box-shadow: var(--family-shadow-soft) !important; }
.install-card p,
.ios-hint { color: var(--family-muted) !important; }
.action-card,
.mobile-album-list a,
.empty-state {
  border-color: var(--family-line) !important;
  color: var(--family-ink) !important;
  background: #fff !important;
  box-shadow: var(--family-shadow-soft) !important;
}
.action-card.primary { border-color: #f1c7bc !important; background: var(--family-coral-soft) !important; }
.action-card strong,
.mobile-album-list strong,
.mobile-section h2 { color: var(--family-ink) !important; }
.action-card small,
.mobile-album-list small { color: var(--family-muted) !important; }
.recent-grid img { border-color: #fff !important; box-shadow: var(--family-shadow-soft) !important; }
.mobile-bottom-nav {
  border-top-color: var(--family-line) !important;
  background: rgba(255, 253, 249, .94) !important;
  box-shadow: 0 -8px 28px rgba(90, 66, 52, .08) !important;
}
.mobile-bottom-nav a { color: var(--family-muted) !important; }
.mobile-bottom-nav a:active { color: var(--family-coral-dark) !important; background: var(--family-coral-soft) !important; }

/* Focused upload PWA */
body > .app-shell > .topbar .brand { background: transparent !important; }
.hero-card,
.upload-card,
.help-card {
  border-color: var(--family-line) !important;
  color: var(--family-ink) !important;
  background: #fff !important;
  box-shadow: var(--family-shadow-soft) !important;
}
.hero-card { background: linear-gradient(145deg, #fff, #fff4e9) !important; }
.hero-card h1,
.albums h2,
.preview-head h2,
.help-card h2 { color: var(--family-ink) !important; }
.hero-card p,
.albums p,
.help-card li { color: var(--family-muted) !important; }
.picker-card,
.album-chip,
.empty,
.preview-grid {
  border-color: var(--family-line) !important;
  color: var(--family-ink) !important;
  background: #fffaf5 !important;
}
.picker-card:hover,
.album-chip:has(input:checked) { border-color: var(--family-coral) !important; background: var(--family-coral-soft) !important; }
.picker-card strong,
.album-chip span { color: var(--family-ink) !important; }
.picker-card small,
.empty-preview { color: var(--family-muted) !important; }

:focus-visible { outline: 3px solid rgba(239, 106, 91, .28) !important; outline-offset: 3px; }

@media (max-width: 780px) {
  .hanni-public-nav.public-topbar { background: rgba(255, 253, 249, .96) !important; }
  body.hanni-menu-open .public-center-nav a,
  body.hanni-menu-open .public-nav a,
  body.hanni-menu-open .public-login-link { border-color: var(--family-line) !important; background: #fff !important; }
}