/* Medina Group dashboard — shared design system (glass on aurora).
   v3 2026-10-11: Tanatis-derived palette (blue #0170B9, sky #02A9E7, teal #029A85, green #48B768, lime #BAD678)
   + light/dark themes. Theme = <html data-theme="dark|light"> set by /brand/theme.js; falls back to the OS setting. */
@import url('https://fonts.googleapis.com/css2?family=Spectral:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  color-scheme: dark;
  /* brand */
  --t-blue:#0170B9; --t-sky:#02A9E7; --t-teal:#029A85; --t-green:#48B768; --t-lime:#BAD678;
  /* surfaces + text (dark) */
  --ink:#061522; --ink-2:#0A2033; --panel:#0b1a2e;
  --glass:rgba(255,255,255,.06); --glass-2:rgba(255,255,255,.10); --glass-hi:rgba(255,255,255,.14);
  --stroke:rgba(255,255,255,.12); --stroke-2:rgba(255,255,255,.22);
  --text:#EEF6FA; --text-2:#C3D3DE; --muted:#86A0B2;
  /* accents: --gold/--gold-hi kept as names for existing pages, now Tanatis sky */
  --gold:#02A9E7; --gold-hi:#8FDCF7; --accent-2:#48B768;
  --ok:#43C98A; --warn:#F2B84B; --bad:#EE6B63;
  --a:#02A9E7;                                  /* per-workspace accent, set by JS */
  --on-accent:#04202F;
  --serif:'Spectral', Georgia, serif; --sans:'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --r-lg:22px; --r-md:16px; --r-sm:11px;
  --blur:saturate(150%) blur(18px);
  --ease:cubic-bezier(.22,.8,.26,1);
  /* aurora */
  --aur-1:rgba(1,112,185,.55); --aur-2:rgba(2,154,133,.45);
  --blob-1:#0170B9; --blob-2:#48B768; --blob-3:#029A85; --blob-o:.5; --blob-2-o:.26;
  --dots:rgba(255,255,255,.035);
  --shadow:0 18px 50px -24px rgba(0,0,0,.6); --inset:inset 0 1px 0 rgba(255,255,255,.08);
  --tile-bg:linear-gradient(160deg,#fff,#EEF3F7); --tile-ring:inset 0 0 0 1px rgba(255,255,255,.6);
  /* faint fills (mixed with transparent) + readable status text */
  --wash:#FFFFFF;
  --tx-red:#FFB4AE; --tx-ok:#9FE6C2; --tx-warn:#F8D48A; --tx-warn2:#FFC98A; --tx-orange:#FFC59A; --tx-info:#BFE0FF; --tx-purple:#D9C4FF;
}
:root[data-theme="light"]{
  color-scheme: light;
  --ink:#EEF4F8; --ink-2:#E3EDF3; --panel:#FFFFFF;
  --glass:rgba(255,255,255,.62); --glass-2:rgba(255,255,255,.82); --glass-hi:rgba(255,255,255,.95);
  --stroke:rgba(1,60,100,.12); --stroke-2:rgba(1,60,100,.24);
  --text:#0A2233; --text-2:#33506A; --muted:#647F93;
  --gold:#0170B9; --gold-hi:#0170B9; --accent-2:#2E9D55;
  --ok:#1E9E62; --warn:#B7790F; --bad:#C8423A;
  --a:#0170B9; --on-accent:#FFFFFF;
  --aur-1:rgba(2,169,231,.22); --aur-2:rgba(72,183,104,.20);
  --blob-1:#7CCDF2; --blob-2:#BAD678; --blob-3:#7FD6C6; --blob-o:.45; --blob-2-o:.4;
  --dots:rgba(1,60,100,.06);
  --shadow:0 18px 44px -26px rgba(1,50,90,.35); --inset:inset 0 1px 0 rgba(255,255,255,.9);
  --tile-ring:inset 0 0 0 1px rgba(1,60,100,.10);
  --wash:#0B4A78;
  --tx-red:#B4372F; --tx-ok:#17784A; --tx-warn:#8A5A00; --tx-warn2:#9A5200; --tx-orange:#A1460F; --tx-info:#0B5C9E; --tx-purple:#6A3FB5;
}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;background:var(--ink);color:var(--text);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;transition:background .35s var(--ease), color .35s var(--ease)}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:6px}
::selection{background:color-mix(in srgb, var(--t-sky) 35%, transparent)}

/* ---- aurora background: three slow blobs over deep ink ---- */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
  radial-gradient(1200px 700px at 110% -10%, var(--aur-1), transparent 60%),
  radial-gradient(900px 600px at -10% 110%, var(--aur-2), transparent 60%), var(--ink)}
.aurora i{position:absolute;border-radius:50%;filter:blur(90px);opacity:var(--blob-o);will-change:transform}
.aurora i:nth-child(1){width:46vw;height:46vw;left:-8vw;top:-12vw;background:var(--blob-1);animation:drift1 26s var(--ease) infinite alternate}
.aurora i:nth-child(2){width:38vw;height:38vw;right:-6vw;top:18vh;background:var(--blob-2);opacity:var(--blob-2-o);animation:drift2 32s var(--ease) infinite alternate}
.aurora i:nth-child(3){width:42vw;height:42vw;left:28vw;bottom:-20vw;background:var(--blob-3);opacity:.4;animation:drift3 29s var(--ease) infinite alternate}
.aurora::after{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--dots) 1px, transparent 1px);background-size:22px 22px;mask-image:linear-gradient(180deg,#000,transparent 85%)}
@keyframes drift1{to{transform:translate(12vw,8vh) scale(1.12)}}
@keyframes drift2{to{transform:translate(-10vw,10vh) scale(.9)}}
@keyframes drift3{to{transform:translate(-8vw,-12vh) scale(1.08)}}

/* ---- glass ---- */
.glass{background:linear-gradient(160deg, var(--glass-2), var(--glass) 60%);border:1px solid var(--stroke);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:var(--inset), var(--shadow)}

/* ---- logos ---- */
.mg{display:block;flex:none}
.logo-tile{flex:none;display:grid;place-items:center;background:var(--tile-bg);border-radius:12px;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.45), var(--tile-ring);overflow:hidden}
.logo-tile img{width:78%;height:78%;object-fit:contain}
.logo-tile .mono{font-family:var(--serif);font-weight:700;color:#0C1A2E;letter-spacing:.3px}
.logo-tile.s28{width:28px;height:28px;border-radius:8px}.logo-tile.s28 .mono{font-size:10px}
.logo-tile.s36{width:36px;height:36px;border-radius:10px}.logo-tile.s36 .mono{font-size:12px}
.logo-tile.s44{width:44px;height:44px}.logo-tile.s44 .mono{font-size:14px}
.logo-tile.s56{width:56px;height:56px;border-radius:15px}.logo-tile.s56 .mono{font-size:18px}
.logo-tile.s72{width:72px;height:72px;border-radius:19px}.logo-tile.s72 .mono{font-size:22px}
.logo-tile.clear{background:none;box-shadow:none;border-radius:0;overflow:visible}
.logo-tile.clear img{width:100%;height:100%;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--sans);padding:10px 16px;border-radius:999px;cursor:pointer;
  border:1px solid var(--stroke);background:var(--glass);color:var(--text-2);text-decoration:none;transition:background .2s, color .2s, border-color .2s}
.btn:hover{background:var(--glass-hi);color:var(--text);border-color:var(--stroke-2)}

/* ---- theme toggle (theme.js) ---- */
.theme-toggle{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--stroke);
  background:var(--glass);color:var(--text-2);cursor:pointer;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.theme-toggle:hover{color:var(--text);border-color:var(--stroke-2);background:var(--glass-hi)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:block}
:root[data-theme="dark"] .theme-toggle .moon{display:none}

/* ---- company globe (brand.js MGBrand.globe) ---- */
.globe{position:relative;width:var(--g,156px);height:var(--g,156px);margin:0 auto}
.globe::before{content:"";position:absolute;inset:-22px;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--t-sky) 32%, transparent), transparent 65%);filter:blur(8px)}
.globe .sphere{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--t-sky) 45%, transparent), color-mix(in srgb, var(--t-blue) 30%, transparent) 45%, color-mix(in srgb, var(--t-teal) 22%, transparent) 75%, transparent 100%);
  box-shadow:inset -10px -14px 30px rgba(0,0,0,.25), inset 6px 8px 18px rgba(255,255,255,.18), 0 0 0 1px var(--stroke)}
:root[data-theme="light"] .globe .sphere{box-shadow:inset -10px -14px 30px rgba(1,60,100,.12), inset 6px 8px 18px rgba(255,255,255,.7), 0 0 0 1px var(--stroke)}
.globe svg.grid{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.globe svg.grid ellipse{fill:none;stroke:color-mix(in srgb, var(--t-sky) 55%, var(--text) 10%);stroke-width:.8;opacity:.45}
.globe .pin{position:absolute;left:50%;top:50%;width:var(--p,44px);height:var(--p,44px);margin:calc(var(--p,44px) / -2) 0 0 calc(var(--p,44px) / -2);
  border-radius:50%;background:#fff;display:grid;place-items:center;will-change:transform,opacity;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.55), inset 0 0 0 1px rgba(1,60,100,.10)}
.globe .pin img{width:70%;height:70%;object-fit:contain}

/* ---- motion ---- */
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.rise{animation:rise .6s var(--ease) both}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s;animation-timing-function:var(--ease)}
@media (prefers-reduced-motion: reduce){
  .aurora i{animation:none}
  .rise{animation:none}
  *{transition-duration:0s !important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---- hover zoom on buttons (2026-10-11) ---- */
html :is(.btn,.iconbtn,.primary,.ghost,.chip,.subtabs a,nav.tabs a,.theme-toggle){transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .22s var(--ease)}
html :is(.btn,.iconbtn,.primary,.ghost,.chip,.theme-toggle):hover:not(:disabled){transform:scale(1.06)}
html :is(.subtabs a,nav.tabs a):hover{transform:scale(1.05)}
html :is(.btn,.iconbtn,.primary,.ghost,.chip,.subtabs a,nav.tabs a,.theme-toggle):active:not(:disabled){transform:scale(.96)}
@media (prefers-reduced-motion: reduce){
  html :is(.btn,.iconbtn,.primary,.ghost,.chip,.subtabs a,nav.tabs a,.theme-toggle):is(:hover,:active){transform:none}
}