/* ============================================================
   Yaru Design Tokens — Ubuntu Desktop
   Aubergine, warm orange, canonical greys
   ============================================================ */
:root{
  /* Yaru core */
  --yaru-aubergine:#2c001e;
  --yaru-aubergine-light:#3d0a2e;
  --yaru-purple:#77216f;
  --yaru-purple-light:#90397f;
  --yaru-orange:#e95420;
  --yaru-orange-light:#f26b3a;
  --yaru-orange-dark:#c34113;
  --yaru-warm-grey:#aea79f;
  --yaru-cool-grey:#9a9996;
  --yaru-dark-grey:#3d3d3d;
  --yaru-light-grey:#f7f7f7;
  --yaru-white:#ffffff;
  --yaru-black:#111111;
  --yaru-red:#ed333b;
  --yaru-green:#2ec27e;
  --yaru-yellow:#f5c211;
  --yaru-blue:#1c71d8;

  /* Accent — overridable via Settings */
  --accent:var(--yaru-orange);
  --accent-hover:var(--yaru-orange-light);
  --accent-active:var(--yaru-orange-dark);

  /* Theme controls */
  --bg:var(--yaru-aubergine);
  --bg-window:#3a3236;
  --bg-window-alt:#332d30;
  --bg-input:#2e272a;
  --bg-hover:rgba(255,255,255,.06);
  --bg-active:rgba(255,255,255,.1);
  --bg-overlay:rgba(20,10,16,.78);
  --text:#f5f5f5;
  --text-secondary:rgba(245,245,245,.72);
  --text-disabled:rgba(245,245,245,.38);
  --border:rgba(255,255,255,.1);
  --border-strong:rgba(255,255,255,.18);
  --shadow-window:0 12px 40px -8px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
  --shadow-popover:0 6px 20px rgba(0,0,0,.45);
  --shadow-topbar:0 2px 6px rgba(0,0,0,.35);

  --radius:12px;
  --radius-sm:8px;
  --radius-xs:4px;

  --font-family:-apple-system,"Ubuntu","Cantarell","Noto Sans",BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"Ubuntu Mono","DejaVu Sans Mono","Menlo","Consolas",monospace;

  --topbar-h:38px;
  --dock-w:64px;

  --cubic:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);

  --toast-w:340px;
}

[data-theme="light"]{
  --bg:#ece8e3;
  --bg-window:#f7f5f2;
  --bg-window-alt:#efece7;
  --bg-input:#ffffff;
  --bg-hover:rgba(0,0,0,.06);
  --bg-active:rgba(0,0,0,.1);
  --bg-overlay:rgba(230,225,218,.78);
  --text:#2a1f1a;
  --text-secondary:rgba(42,31,26,.68);
  --text-disabled:rgba(42,31,26,.36);
  --border:rgba(0,0,0,.08);
  --border-strong:rgba(0,0,0,.14);
  --shadow-window:0 12px 40px -8px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.12);
  --shadow-popover:0 6px 20px rgba(0,0,0,.18);
  --shadow-topbar:0 2px 6px rgba(0,0,0,.12);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;width:100%;overflow:hidden}
body{
  font-family:var(--font-family);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  user-select:none;
  overflow:hidden;
}
input,textarea,button,select{font-family:inherit;color:inherit;font-size:inherit}
button{background:none;border:0;cursor:pointer;outline:none;display:inline-flex;align-items:center}
input,textarea{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);outline:none}
input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(233,84,32,.18)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
img{display:block;max-width:100%}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.3)}

.hidden{display:none !important}

/* Generic transitions */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes scaleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes scaleOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.92)}}
@keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes urgency{0%,100%{background-color:var(--accent)}50%{background-color:var(--yaru-orange-light)}}
@keyframes boot-spin{to{stroke-dashoffset:-200}}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toast-out{to{opacity:0;transform:translateY(-8px) scale(.96)}}

.btn{
  background:var(--bg-hover);color:var(--text);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:7px 16px;font-weight:600;
  transition:background .15s var(--cubic),transform .1s var(--cubic);
}
.btn:hover{background:var(--bg-active)}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--accent);border-color:transparent;color:#fff}
.btn.primary:hover{background:var(--accent-hover)}
.btn.primary:active{background:var(--accent-active)}
.btn.danger{background:var(--yaru-red);color:#fff;border-color:transparent}
.btn.flat{background:transparent;border-color:transparent}
.btn.flat:hover{background:var(--bg-hover)}

.toggle{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle span{position:absolute;inset:0;background:var(--border-strong);border-radius:22px;transition:.2s}
.toggle span::before{content:"";position:absolute;height:16px;width:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.toggle input:checked + span{background:var(--accent)}
.toggle input:checked + span::before{transform:translateX(16px)}

/* SVG icon helper — colored by current color */
.svg-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.svg-icon svg{width:100%;height:100%}