/* ═══════════════════════════════════════════════════════════════
   Ai on Edge — Theme Core v3
   Maps ALL structural tokens onto ALL components.
   Frontend + Backend + Every content type.
   Colors come 100% from the tenant's Material color picker.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --t-shadow:none;
  --t-shadow-hover:none;
  --t-shadow-lg:none;
  --t-hover-scale:1;
  --t-speed:.15s;
  --t-ease:ease;
  --t-space:1;
  --t-body-lh:1.6;
  --t-heading-weight:700;
  --t-heading-spacing:-.03em;
  --t-label-transform:none;
  --t-label-spacing:0;
  --t-surface-blur:0;
  --t-grain:none;
  --t-divider-width:1px;
  --t-divider-style:solid;
  --t-glow:none;
}

/* ═══════════════════════════════════════════════════════════════
   SHADOW + TRANSITION on ALL card-like elements
   ═══════════════════════════════════════════════════════════════ */
article.card,
.post-item,.settings-group,.domain-card,.sh-post,.nw-card,
.fnl-step,.cal-event-form,.em-detail,.em-compose,.em-item,
.pricing-mini,.auth-box,.modal,.adv-card,.ob-step,.em-sig-card,
.compress-opts,.register-form,.dash-chart-wrap,.dash-card,
.ai-chat-box,.gp-invitation,.cp-invitation,.rp-origin,
.cm-item,.sp-card,.sp-episode,.sp-detail,
.pp-card,.toc-sidebar,.toc-nav,
.funnel-section,.author-card,
.sh-feed-post,.social-card,.social-post-card,
.chat-box,.member-card,.sub-card,.related-post{
  box-shadow:var(--t-shadow);
  transition:
    border-color var(--t-speed) var(--t-ease),
    box-shadow var(--t-speed) var(--t-ease),
    transform var(--t-speed) var(--t-ease),
    background var(--t-speed) var(--t-ease);
}

/* Hover on interactive cards */
article.card:hover,.adv-card:hover,.em-item:hover,
.sh-post:hover,.post-item:hover,.nw-card:hover,
.gp-invitation:hover,.rp-partner-post:hover,
.sp-card:hover,.pp-card:hover,.sh-feed-post:hover,
.social-card:hover,.related-post:hover{
  box-shadow:var(--t-shadow-hover);
  transform:scale(var(--t-hover-scale));
}

/* ═══════════════════════════════════════════════════════════════
   BORDER-RADIUS via var(--rad) on ALL components
   ═══════════════════════════════════════════════════════════════ */

/* Full --rad */
article.card,.auth-box,.cat-filter button,.funnel-hero,
.funnel-btn,.funnel-btn-next,.notif-badge,.sp-card,
.cm-emoji-tab,.vp-cc-menu,.ss-type,.sh-feed-post,
.social-card,.social-post-card,.toc-sidebar,.toc-nav,
.reaction-btn,.pp-card,.member-card,.sub-card,.related-post,
.summary-card,.sp-episode,.sp-detail,.cm-item,
.author-card,.funnel-section,.chat-box,.list-dropdown,
.nav-dd-menu,.list-dd-menu,.vp{
  border-radius:var(--rad);
}

/* Derived radius */
.sp-card-body .sp-type,.sp-sub-bar select,.sp-subtitle-text,.vp-speed{border-radius:calc(var(--rad) * 0.4)}
.cm-emoji-picker button,.vp-subtitle span{border-radius:calc(var(--rad) * 0.3)}
.vp-progress,.vp-prog-fill,.sp-audio-bar .sp-progress,.sp-audio-bar .sp-progress-fill{border-radius:calc(var(--rad) * 0.2)}
.body code,.sp-audio-wave,.cm-wave-canvas{border-radius:calc(var(--rad) * 0.25)}

/* Chat terminal tabs */
.chat-terminal-tab.ct-right{border-radius:var(--rad) 0 0 var(--rad)}
.chat-terminal-tab.ct-left{border-radius:0 var(--rad) var(--rad) 0}

/* ═══════════════════════════════════════════════════════════════
   HEADER / FOOTER / NAV — Themed transitions + dividers
   ═══════════════════════════════════════════════════════════════ */

/* Frontend header */
header[role=banner]{
  transition:background var(--t-speed) var(--t-ease),
    border-color var(--t-speed) var(--t-ease);
  border-bottom:var(--t-divider-width) var(--t-divider-style) var(--border-subtle);
}

/* Frontend footer */
footer[role=contentinfo]{
  transition:background var(--t-speed) var(--t-ease),
    border-color var(--t-speed) var(--t-ease);
  border-top:var(--t-divider-width) var(--t-divider-style) var(--border-subtle);
}

/* Frontend nav links */
header nav a,header nav[aria-label] a{
  transition:opacity var(--t-speed) var(--t-ease),
    border-color var(--t-speed) var(--t-ease),
    color var(--t-speed) var(--t-ease);
}

/* Nav dropdown menus */
.nav-dd-menu{
  border:1px solid var(--border-subtle);
  background:var(--card);
  border-radius:var(--rad);
  box-shadow:var(--t-shadow-lg);
}

/* Backend dividers */
.stab-nav,.content-tabs,.cal-sub-nav,.em-folders{
  border-bottom-width:var(--t-divider-width);
  border-bottom-style:var(--t-divider-style);
}
/* Backend header/footer */
header{
  border-bottom-width:var(--t-divider-width);
  border-bottom-style:var(--t-divider-style);
}
footer{
  border-top-width:var(--t-divider-width);
  border-top-style:var(--t-divider-style);
}

.stab-nav button.active{border-bottom-color:var(--txt)}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS — Transitions on ALL button types
   ═══════════════════════════════════════════════════════════════ */
.btn,.btn-sm,.btn-alt,.btn-danger,.btn-sub,.btn-ot,
.funnel-btn,.funnel-btn-next,.pp-buy-btn,.cm-ai-btn,
nav button[role=tab],.stab-nav button,.content-tabs button,
.cal-sub-nav button,.em-folders button,.cal-nav button,
.cal-nav-btn,.cal-view-switch button,.mode-toggle button{
  transition:
    background var(--t-speed) var(--t-ease),
    color var(--t-speed) var(--t-ease),
    border-color var(--t-speed) var(--t-ease),
    opacity var(--t-speed) var(--t-ease),
    transform var(--t-speed) var(--t-ease);
}

/* ═══════════════════════════════════════════════════════════════
   INPUTS
   ═══════════════════════════════════════════════════════════════ */
input,textarea,select{
  transition:
    border-color var(--t-speed) var(--t-ease),
    box-shadow var(--t-speed) var(--t-ease),
    background var(--t-speed) var(--t-ease);
}

/* ═══════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════ */
.modal-bg,.feat-modal-overlay,.auth-overlay{
  transition:opacity var(--t-speed) var(--t-ease);
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════ */
body{line-height:var(--t-body-lh)}
h1,h2,h3,.sec-h,.cal-header h2{
  letter-spacing:var(--t-heading-spacing);
  font-weight:var(--t-heading-weight);
}

/* ═══════════════════════════════════════════════════════════════
   FRONTEND COMPONENTS — Default border/bg using CSS vars
   These provide the BASE styling that individual themes
   can override with their unique look.
   ═══════════════════════════════════════════════════════════════ */

/* Comments */
.cm-item{
  border:1px solid var(--border-subtle);
  border-radius:var(--rad);
  padding:clamp(.8rem,1.5vw,1.2rem);
  background:var(--card);
}

/* Social Hub Posts */
.sh-feed-post,.social-post-card{
  border:1px solid var(--border-subtle);
  border-radius:var(--rad);
  padding:clamp(1rem,2vw,1.5rem);
  background:var(--card);
}
.sh-post-author{font-weight:600}
.sh-post-body{cursor:pointer}
.sh-post-media{width:100%;border-radius:var(--rad)}
.sh-post-meta{display:flex;gap:1rem;opacity:.5}

/* Streaming */
.sp-card{
  border:1px solid var(--border-subtle);
  border-radius:var(--rad);
  overflow:hidden;background:var(--card);
}
.sp-episode{
  border:1px solid var(--border-subtle);
  border-radius:var(--rad);
  background:var(--card);
}

/* TOC / Summary Sidebar */
.toc-sidebar,.toc-nav{
  border:1px solid var(--border-subtle);
  border-radius:var(--rad);
  background:var(--card);
  padding:clamp(.8rem,1.5vw,1.2rem);
}

/* Product Cards */
.pp-card{
  border:1px solid var(--border-subtle);
  border-radius:var(--rad);
  overflow:hidden;background:var(--card);
}

/* Video Player */
.vp{
  border-radius:var(--rad);
  overflow:hidden;
  border:1px solid var(--border-subtle);
}
.vp-bar{
  background:var(--ac1);
  border-top:1px solid var(--border-subtle);
}

/* Author Card */
.author-card{
  border:1px solid var(--border-subtle);
  border-radius:var(--rad);
  background:var(--card);
}

/* Funnel */
.funnel-section{border-radius:var(--rad)}

/* Hero section */
.hero{
  transition:padding var(--t-speed) var(--t-ease);
}

/* ═══════════════════════════════════════════════════════════════
   GRAIN / GLOW / BLUR HOOKS
   ═══════════════════════════════════════════════════════════════ */
body::after{
  content:var(--t-grain);position:fixed;inset:0;
  pointer-events:none;z-index:9998;opacity:.03;
  mix-blend-mode:overlay;
}

article.card::before,.auth-box::before,.pricing-mini::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;
  background:var(--t-glow);z-index:-1;opacity:0;
  transition:opacity var(--t-speed) var(--t-ease);pointer-events:none;
}
article.card:hover::before,.pricing-mini:hover::before{opacity:1}
article.card,.auth-box,.pricing-mini{position:relative}

article.card,.modal,.auth-box,.ai-chat-box,.sh-post,.nw-card,
.em-detail,.em-compose,.settings-group,.domain-card,
.sp-card,.pp-card,.toc-sidebar,.cm-item,.chat-box{
  -webkit-backdrop-filter:blur(var(--t-surface-blur));
  backdrop-filter:blur(var(--t-surface-blur));
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL ANIMATION
   ═══════════════════════════════════════════════════════════════ */
.t-scroll-reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .6s ease,transform .6s ease;
}
.t-scroll-reveal.t-visible{opacity:1;transform:translateY(0)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .t-scroll-reveal{opacity:1!important;transform:none!important}
}