/* Interfaz SaaS Framework v1.10.0 — dark theme and theme switch (docs/THEME.md).
   Opt-in: a product that loads this file + ix-theme.js supports dark mode. Light mode is
   untouched: every rule below is scoped to :root[data-ix-theme="dark"], except the toggle
   button and the switch transition. Load after ix-saas-shell.css, ix-motion.css, ix-data.css. */

/* ---- 1. Tokens ------------------------------------------------------------------------ */
:root{
  /* New semantic tokens (light values = what the framework already painted). */
  --ix-surface:#fff;            /* cards, fields, pills, tooltips */
  --ix-chip:#efefe9;            /* neutral fills: header capsule, close buttons, code */
  --ix-chip-hover:#e4e5df;
  --ix-on-ink:#fff;             /* text on an ink background (primary button, active pill) */
  --ix-glass:color-mix(in srgb,#fff 78%,transparent);
  --ix-glass-line:rgba(17,20,18,.1);
}
:root[data-ix-theme="dark"]{
  color-scheme:dark;
  --ix-bg:var(--ix-bg-dark,#0e1110);
  --ix-paper:#161a18;
  --ix-surface:#1a1f1d;
  --ix-ink:#eef0ec;
  --ix-muted:#99a09b;
  --ix-line:#2a302d;
  --ix-chip:#242a27;
  --ix-chip-hover:#2e3532;
  --ix-on-ink:#111412;
  --ix-accent-soft:color-mix(in srgb,var(--ix-accent) 20%,#1a1f1d);
  --ix-browser-theme:var(--ix-bg);
  --ix-shadow:0 24px 70px rgba(0,0,0,.45);
  --ix-glass:color-mix(in srgb,#1b201e 80%,transparent);
  --ix-glass-line:rgba(255,255,255,.08);
  /* Motion / goo */
  --ix-scrim:rgba(0,0,0,.55);
  --ix-goo-surface:#1a1f1d;
  --ix-goo-pill:#1a1f1d;
  --ix-goo-shadow:0 12px 22px rgba(0,0,0,.35),0 1px 1px rgba(0,0,0,.3);
  /* Data */
  --ix-data-2:#4f8f77;
  --ix-data-4:#2b312e;
  --ix-data-soft:#232926;
  --ix-lift:0 26px 50px -12px rgba(0,0,0,.6),0 8px 18px rgba(0,0,0,.35);
  /* Brand mark (ix-brand.js) */
  --brand-ink:#eef0ec;
  --brand-stem:#6d7470;
}

/* ---- 2. Shell ------------------------------------------------------------------------- */
:root[data-ix-theme="dark"] .ix-viewport::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
:root[data-ix-theme="dark"] .ix-topbar{border-color:var(--ix-glass-line);background:var(--ix-glass);box-shadow:0 10px 34px rgba(0,0,0,.35)}
:root[data-ix-theme="dark"] .ix-dock{--ix-goo-surface:#262c29;background:color-mix(in srgb,#262c29 90%,transparent);border:1px solid rgba(255,255,255,.07);box-shadow:0 12px 30px rgba(0,0,0,.45)}
:root[data-ix-theme="dark"] .ix-nav{background:var(--ix-chip)}
:root[data-ix-theme="dark"] .ix-nav a{color:var(--ix-muted)}
:root[data-ix-theme="dark"] .ix-nav a:hover,:root[data-ix-theme="dark"] .ix-nav a[aria-current="page"]{background:var(--ix-chip-hover);color:var(--ix-ink)}
:root[data-ix-theme="dark"] .ix-btn{color:var(--ix-on-ink)}
:root[data-ix-theme="dark"] .ix-btn-ghost{background:var(--ix-chip);color:var(--ix-ink)}
:root[data-ix-theme="dark"] .ix-btn-accent{color:#fff}
:root[data-ix-theme="dark"] .ix-social-btn,
:root[data-ix-theme="dark"] .ix-field input,:root[data-ix-theme="dark"] .ix-field select,:root[data-ix-theme="dark"] .ix-field textarea{background:var(--ix-surface);color:var(--ix-ink)}
:root[data-ix-theme="dark"] .ix-field label{color:var(--ix-muted)}
:root[data-ix-theme="dark"] .ix-field input:focus,:root[data-ix-theme="dark"] .ix-field select:focus,:root[data-ix-theme="dark"] .ix-field textarea:focus{border-color:color-mix(in srgb,var(--ix-accent) 60%,#888)}
/* Login modal (AUTH.md) */
:root[data-ix-theme="dark"] .ix-auth-backdrop{background:rgba(0,0,0,.6)}
:root[data-ix-theme="dark"] .ix-auth-dialog{background:var(--ix-paper);border-color:rgba(255,255,255,.08);box-shadow:0 34px 90px rgba(0,0,0,.6)}
:root[data-ix-theme="dark"] .ix-auth-copy{background:linear-gradient(145deg,#1c2220,#141816)}
:root[data-ix-theme="dark"] .ix-auth-modal-card{background:var(--ix-surface)}
:root[data-ix-theme="dark"] .ix-auth-close{background:var(--ix-chip);color:var(--ix-ink)}
:root[data-ix-theme="dark"] .ix-auth-close:hover{background:var(--ix-chip-hover)}
:root[data-ix-theme="dark"] .ix-auth-modal .ix-social-btn{border-color:var(--ix-line)}
:root[data-ix-theme="dark"] .ix-auth-modal .ix-social-btn:hover{box-shadow:0 8px 22px rgba(0,0,0,.4)}
:root[data-ix-theme="dark"] .ix-auth-divider{color:var(--ix-muted)}
:root[data-ix-theme="dark"] .ix-auth-divider::before,:root[data-ix-theme="dark"] .ix-auth-divider::after{background:var(--ix-line)}
:root[data-ix-theme="dark"] .ix-auth-modal .ix-field label{color:var(--ix-muted)}
:root[data-ix-theme="dark"] .ix-auth-notice{background:color-mix(in srgb,var(--ix-accent) 14%,var(--ix-surface));border-color:color-mix(in srgb,var(--ix-accent) 30%,transparent)}
:root[data-ix-theme="dark"] .ix-auth-notice.is-error{background:#3a1d1a;border-color:#6b2c25;color:#ffb4a8}
:root[data-ix-theme="dark"] .ix-auth-notice.is-success{background:#16301f;border-color:#285c39;color:#9fe0b2}
:root[data-ix-theme="dark"] .ix-auth-modal .ix-auth-help{background:var(--ix-chip)}

/* ---- 3. Motion (ix-motion.css) -------------------------------------------------------- */
:root[data-ix-theme="dark"] .ix-rail [data-ix-pill]{background:var(--ix-surface);color:var(--ix-ink);box-shadow:0 8px 20px rgba(0,0,0,.35)}
:root[data-ix-theme="dark"] [data-ix-pill].is-active,:root[data-ix-theme="dark"] .ix-rail [data-ix-pill][aria-current="page"]{color:var(--ix-on-ink)}
:root[data-ix-theme="dark"] .ix-handoff{box-shadow:0 18px 55px rgba(0,0,0,.4)}
:root[data-ix-theme="dark"] .ix-modal-card{box-shadow:0 30px 80px rgba(0,0,0,.6)}
:root[data-ix-theme="dark"] .ix-sheet-panel{box-shadow:0 18px 48px rgba(0,0,0,.5)}
:root[data-ix-theme="dark"] .ix-toast{background:#2b312e;color:#eef0ec;box-shadow:0 14px 34px rgba(0,0,0,.5)}
:root[data-ix-theme="dark"] .ix-toast.is-error{background:#7c2823;color:#fff}

/* ---- 4. Data (ix-data.css) ------------------------------------------------------------ */
:root[data-ix-theme="dark"] .ix-lift:hover{box-shadow:0 18px 34px -16px rgba(0,0,0,.7)}
:root[data-ix-theme="dark"] .ix-line-dot{fill:var(--ix-surface)}
:root[data-ix-theme="dark"] .ix-line-target,:root[data-ix-theme="dark"] .ix-line-cross{stroke:var(--ix-muted)}
:root[data-ix-theme="dark"] .ix-line-tip{background:var(--ix-surface);color:var(--ix-ink);box-shadow:0 14px 30px -10px rgba(0,0,0,.6)}
:root[data-ix-theme="dark"] .ix-seg.is-light .ix-seg-thumb{background:var(--ix-chip-hover)}
:root[data-ix-theme="dark"] .ix-board [data-ix-col].is-over{background:rgba(255,255,255,.05)}
:root[data-ix-theme="dark"] [data-ix-drop-bar].is-floating [data-ix-drop]{box-shadow:0 18px 40px -14px rgba(0,0,0,.7)}

/* ---- 4b. Ecosystem switcher and catalogue (ix-ecosystem.css) ----------------------------- */
:root[data-ix-theme="dark"] .ix-eco-sw-btn,:root[data-ix-theme="dark"] .ix-eco-sw-pop,:root[data-ix-theme="dark"] .ix-eco-card,
:root[data-ix-theme="dark"] .ix-eco-loclist li,:root[data-ix-theme="dark"] .ix-eco-item,:root[data-ix-theme="dark"] .ix-eco-sheet{background:var(--ix-surface);border-color:var(--ix-line);color:var(--ix-ink)}
:root[data-ix-theme="dark"] .ix-eco-sw-btn:hover,:root[data-ix-theme="dark"] .ix-eco-sw-item:hover{background:var(--ix-chip)}
:root[data-ix-theme="dark"] .ix-eco-sw-item.is-current,:root[data-ix-theme="dark"] .ix-eco-card.is-here{background:color-mix(in srgb,var(--ix-eco-tool) 12%,var(--ix-surface))}
:root[data-ix-theme="dark"] .ix-eco-sw-ic,:root[data-ix-theme="dark"] .ix-eco-card-ic,:root[data-ix-theme="dark"] .ix-eco-state.is-here{background:color-mix(in srgb,var(--ix-eco-tool) 22%,var(--ix-surface))}
:root[data-ix-theme="dark"] .ix-eco-sw-brand,:root[data-ix-theme="dark"] .ix-eco-sw-item small,:root[data-ix-theme="dark"] .ix-eco-brand span,:root[data-ix-theme="dark"] .ix-eco-intro,
:root[data-ix-theme="dark"] .ix-eco-desc,:root[data-ix-theme="dark"] .ix-eco-loclist li span,:root[data-ix-theme="dark"] .ix-eco-block header p,:root[data-ix-theme="dark"] .ix-eco-item-body small,
:root[data-ix-theme="dark"] .ix-eco-sheet-head a,:root[data-ix-theme="dark"] .ix-eco-price s{color:var(--ix-muted)}
:root[data-ix-theme="dark"] .ix-eco-state,:root[data-ix-theme="dark"] .ix-eco-item-body em,:root[data-ix-theme="dark"] .ix-eco-item-img,:root[data-ix-theme="dark"] .ix-eco-sheet-head button{background:var(--ix-chip);color:var(--ix-muted)}
:root[data-ix-theme="dark"] .ix-eco-state.is-on{background:#16301f;color:#7fd8a0}
:root[data-ix-theme="dark"] .ix-eco-pnav{background:rgba(255,255,255,.05)}
:root[data-ix-theme="dark"] .ix-eco-pnav a.is-current{background:var(--ix-chip-hover)}
:root[data-ix-theme="dark"] .ix-eco-sheet-head{border-color:var(--ix-line)}

/* ---- 5. Theme toggle (both themes) ---------------------------------------------------- */
.ix-theme-toggle{appearance:none;position:relative;display:inline-grid;place-items:center;width:40px;height:40px;flex:none;
  border:1px solid var(--ix-line);border-radius:50%;background:var(--ix-surface);color:var(--ix-ink);cursor:pointer;
  transition:background .25s,border-color .25s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.ix-theme-toggle:hover{background:var(--ix-chip)}
.ix-theme-toggle:active{transform:scale(.92)}
.ix-theme-toggle:focus-visible{outline:2px solid var(--ix-accent);outline-offset:2px}
.ix-theme-toggle svg{width:20px;height:20px;overflow:visible}
/* Sun: rays spin and shrink away; the disc grows into the moon, carved by a sliding mask. */
.ix-theme-toggle .ix-tt-disc{r:5px}.ix-theme-toggle .ix-tt-cut{cx:30px;cy:0px}
.ix-theme-toggle .ix-tt-rays{transform-origin:12px 12px;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .3s}
.ix-theme-toggle .ix-tt-disc{transition:r .5s cubic-bezier(.2,.8,.2,1)}
.ix-theme-toggle .ix-tt-cut{transition:cx .5s cubic-bezier(.2,.8,.2,1),cy .5s cubic-bezier(.2,.8,.2,1)}
:root[data-ix-theme="dark"] .ix-theme-toggle .ix-tt-rays{transform:rotate(-90deg) scale(.4);opacity:0}
:root[data-ix-theme="dark"] .ix-theme-toggle .ix-tt-disc{r:8.5px}
:root[data-ix-theme="dark"] .ix-theme-toggle .ix-tt-cut{cx:16.5px;cy:7.5px}
/* Segmented System / Light / Dark choice. */
.ix-theme-set{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--ix-chip)}
.ix-theme-set button{appearance:none;border:0;border-radius:999px;padding:7px 12px;background:transparent;color:var(--ix-muted);font:inherit;font-size:12px;font-weight:750;cursor:pointer;transition:background .25s,color .25s}
.ix-theme-set button[aria-pressed="true"]{background:var(--ix-surface);color:var(--ix-ink);box-shadow:0 2px 8px rgba(0,0,0,.08)}

/* ---- 6. Switch transition ------------------------------------------------------------- */
/* View Transitions: the old page stays still under the new one, which grows as a circle
   from the button (ix-theme.js animates its clip-path). */
.ix-theme-vt::view-transition-old(root),.ix-theme-vt::view-transition-new(root){animation:none;mix-blend-mode:normal}
.ix-theme-vt::view-transition-old(root){z-index:1}
.ix-theme-vt::view-transition-new(root){z-index:2}
/* Fallback without View Transitions: a short colour cross-fade. */
.ix-theme-fade,.ix-theme-fade *,.ix-theme-fade *::before,.ix-theme-fade *::after{
  transition:background-color .36s ease,color .36s ease,border-color .36s ease,fill .36s ease,stroke .36s ease,box-shadow .36s ease!important}
@media(prefers-reduced-motion:reduce){.ix-theme-toggle .ix-tt-rays,.ix-theme-toggle .ix-tt-disc,.ix-theme-toggle .ix-tt-cut{transition:none}}