/* ============================================================================
   NexSpace · Ink & Ember theme (v2.9.1)
   Loaded after styles.css + polish.css. Remaps the existing design tokens to the
   Ink & Ember identity (deep navy brand + ember accent, warm neutrals) and swaps
   the UI face to Hanken Grotesk with Bricolage Grotesque for display headings.
   Fully removable: delete the <link> in index.html to revert.
   ========================================================================== */

/* --- Fonts (self-hosted) --------------------------------------------------- */
@font-face{font-family:"Bricolage Grotesque";font-weight:700;font-style:normal;font-display:swap;src:url("/assets/fonts/bricolage-700.woff2") format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-style:normal;font-display:swap;src:url("/assets/fonts/bricolage-800.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url("/assets/fonts/hanken-400.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url("/assets/fonts/hanken-500.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:600;font-style:normal;font-display:swap;src:url("/assets/fonts/hanken-600.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url("/assets/fonts/hanken-700.woff2") format("woff2")}

/* --- Light tokens ---------------------------------------------------------- */
:root{
  --bg:#F4F3EF;--surface:#FFFFFF;--surface-2:#EDEBE4;--surface-3:#E3E0D7;
  --ink:#16233F;--ink-2:#333A48;--muted:#5C6172;--line:#DEDBD1;
  --navy:#101A34;--blue:#1F335A;--blue-2:#33507D;--purple:#22406F;--indigo:#1A2A4D;
  --cyan:#2F6E78;--green:#2C7A56;--orange:#CF5A31;--red:#BB362F;
  --ring:0 0 0 4px rgba(31,51,90,.12);
  --ember:#CF5A31;--ember-tint:#F5E4DB;--brand-tint:#E5E9F0;
  font-family:"Hanken Grotesk","PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* --- Night tokens ---------------------------------------------------------- */
html[data-theme="night"]{
  --bg:#12151C;--surface:#181C24;--surface-2:#20242E;--surface-3:#282D39;
  --ink:#EEF0F4;--ink-2:#D3D7DF;--muted:#969BA8;--line:#2C313D;
  --navy:#0A1122;--blue:#7C9BDA;--blue-2:#9FB6E4;--purple:#8AA3DE;--indigo:#7C9BDA;
  --cyan:#5FB2BE;--green:#4CAE7C;--orange:#E27A4F;--red:#DC5D57;
  --ring:0 0 0 4px rgba(124,155,218,.16);
  --ember:#E27A4F;--ember-tint:#2B1B12;--brand-tint:#1A2234;
}

/* --- Display headings (Bricolage on the larger titles only) ---------------- */
.boot strong,.side-brand,.page-title h1,.section-title h2,
.home-greeting-row h2,.home-card-title h2,.home-section-line h2,
.feed-title,.post-title,.modal-head h2,.login h1,.login-hero h1,
.profile-name,.space-title,.detail-hero h1{
  font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  font-weight:800;letter-spacing:-.03em;
}

/* --- Accent hygiene: retire stray bright-blue / purple / pink -------------- */
/* Sidebar active item → navy wash + ember rail */
.nav-item.active{background:linear-gradient(100deg,rgba(31,51,90,.42),rgba(31,51,90,.16));box-shadow:inset 0 0 0 1px rgba(31,51,90,.28)}
.nav-item.active:before{background:var(--ember)}
html[data-theme="night"] .nav-item.active{background:linear-gradient(100deg,rgba(124,155,218,.26),rgba(124,155,218,.08));box-shadow:inset 0 0 0 1px rgba(124,155,218,.20)}
/* Notification / nav counts → ember */
.nav-count{background:var(--ember)}
/* Home compose-type tiles → navy / ember tints (were blue/purple/pink) */
.compose-type.purple span{background:var(--brand-tint);color:var(--blue)}
.compose-type.blue span{background:var(--brand-tint);color:var(--blue)}
.compose-type.orange span{background:var(--ember-tint);color:var(--ember)}
.home-title-icon.target,.home-title-icon.calendar{background:var(--brand-tint);color:var(--blue)}
.home-title-icon.people{background:var(--brand-tint);color:var(--blue)}
.home-title-icon.heart{background:var(--ember-tint);color:var(--ember)}
.home-profile-button i{background:var(--ember)}
.home-next-event span{color:var(--blue)}
.home-next-event{background:linear-gradient(135deg,var(--brand-tint),var(--surface-2));border-color:var(--line)}
html[data-theme="night"] .home-next-event{background:linear-gradient(135deg,#1a2234,#151a26)}
html[data-theme="night"] .mobile-nav button.active{color:var(--ember)}

/* --- Primary CTA: navy (was hardcoded blue→purple in polish.css) ----------- */
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue-2));box-shadow:0 6px 16px rgba(31,51,90,.22)}
.btn-primary:hover{box-shadow:0 10px 24px rgba(31,51,90,.28)}
html[data-theme="night"] .btn-primary{background:linear-gradient(135deg,#2A4472,#1F335A);box-shadow:0 8px 20px rgba(0,0,0,.4)}

/* --- Login hero panel: Ink & Ember (was hardcoded blue→purple) ------------- */
.login-art{background:radial-gradient(circle at 82% 12%,rgba(207,90,49,.5),transparent 42%),linear-gradient(150deg,#0E1830,#1F335A 62%,#22406F)}
html[data-theme="night"] .login-art{background:radial-gradient(circle at 82% 12%,rgba(226,122,79,.42),transparent 44%),linear-gradient(150deg,#0A1122,#16233F 62%,#1F335A)}

/* --- Media placeholders → Ink & Ember gradient (were warm pink/purple) ----- */
.pulse-media.warm{background:radial-gradient(circle at 82% 14%,rgba(207,90,49,.85),transparent 42%),linear-gradient(135deg,#101A34,#1F335A)}
.pulse-media.purple{background:radial-gradient(circle at 82% 14%,rgba(207,90,49,.6),transparent 44%),linear-gradient(135deg,#101A34,#22406F)}
.pulse-actions button:first-child{color:var(--ember)}

/* ============================================================================
   Design-parity polish (increment 2): ports the prototype's signature texture,
   empty-state design and press feedback onto the existing components.
   ========================================================================== */

/* --- Retire remaining pink accents → ember --------------------------------- */
.mobile-nav .nav-count{background:var(--ember)}
.voice-pulse{background:rgba(207,90,49,.12);color:var(--ember)}
html[data-theme="night"] .voice-pulse{background:rgba(226,122,79,.14);color:var(--ember)}

/* --- Signature grain on decorative brand surfaces -------------------------- */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.login-art::after,.pulse-media::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:170px 170px;mix-blend-mode:soft-light;opacity:.5;pointer-events:none;z-index:0}
.login-art>*{position:relative;z-index:1}

/* --- Empty states → Ink & Ember (icon tile + Bricolage title) -------------- */
.empty{padding:40px 22px}
.empty .icon{width:24px;height:24px;padding:14px;box-sizing:content-box;background:var(--surface-2);border-radius:16px;color:var(--muted);margin:0 auto 14px;display:block}
.empty strong{font-family:"Bricolage Grotesque","Hanken Grotesk",sans-serif;font-size:15px;letter-spacing:-.02em;color:var(--ink);margin-bottom:6px}
.empty p{font-size:12px;line-height:1.5}

/* --- Press feedback on interactive chrome ---------------------------------- */
.btn,.nav-item,.compose-type,.mobile-nav button{transition:transform .12s ease,background .14s ease,box-shadow .14s ease}
.btn:active,.nav-item:active,.compose-type:active,.mobile-nav button:active{transform:translateY(1px)}
@media(prefers-reduced-motion:reduce){.btn,.nav-item,.compose-type,.mobile-nav button{transition:none}.btn:active,.nav-item:active,.compose-type:active,.mobile-nav button:active{transform:none}}