/* LAYOUT CONCEPT: one calm desktop (wallpaper + top bar + dock). Apps are windows that grow out of
   the dock; a project case study breaks out of the OS entirely and takes over the viewport.
   Neutral greys and pale blues. The only colour that is "yours" is --acc, set by the accent picker. */
:root{
  /* neutrals: cool paper, graphite ink */
  --paper:#e6eaf1; --surface:#f9fafc; --surface-2:#eef1f6; --ink:#1c1d21; --ink-2:rgba(28,29,33,.64);
  --ink-3:rgba(28,29,33,.46); --line:rgba(28,38,58,.11); --line-2:rgba(28,38,58,.2);
  --glass:rgba(246,248,252,.62); --glass-line:rgba(255,255,255,.6);
  /* accent (changed live by accent.js) */
  --acc:#1f9d55; --acc-2:#157a40; --acc-soft:rgba(31,157,85,.14); --on-acc:#ffffff;
  --shadow-win:0 1px 0 rgba(255,255,255,.7) inset,0 30px 80px -20px rgba(24,34,56,.36),0 8px 24px -8px rgba(24,34,56,.2);
  --shadow-win-dim:0 12px 40px -16px rgba(24,34,56,.3);
  --shade:24,34,56;
  /* type */
  --f-display:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --f-body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --f-mono:'DM Mono',ui-monospace,Menlo,Consolas,monospace;
  --f-gothic:'UnifrakturMaguntia','Old English Text MT',serif;
  /* sizes, overridden per breakpoint */
  --bar-h:34px; --dock-base:54px; --dock-reserve:112px;
  --spring:cubic-bezier(.2,1.1,.3,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#131418; --surface:#1d1e23; --surface-2:#26282e; --ink:#f2f3f6; --ink-2:rgba(242,243,246,.66);
    --ink-3:rgba(242,243,246,.46); --line:rgba(242,243,246,.11); --line-2:rgba(242,243,246,.2);
    --glass:rgba(34,36,42,.58); --glass-line:rgba(255,255,255,.12);
    --acc:#34d27b; --acc-2:#7be6a8; --acc-soft:rgba(52,210,123,.18); --on-acc:#04180c;
    --shadow-win:0 1px 0 rgba(255,255,255,.08) inset,0 30px 80px -20px rgba(0,0,0,.7),0 8px 24px -8px rgba(0,0,0,.5);
    --shadow-win-dim:0 12px 40px -16px rgba(0,0,0,.6);
    --shade:0,0,0;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#131418; --surface:#1d1e23; --surface-2:#26282e; --ink:#f2f3f6; --ink-2:rgba(242,243,246,.66);
  --ink-3:rgba(242,243,246,.46); --line:rgba(242,243,246,.11); --line-2:rgba(242,243,246,.2);
  --glass:rgba(34,36,42,.58); --glass-line:rgba(255,255,255,.12);
  --acc:#34d27b; --acc-2:#7be6a8; --acc-soft:rgba(52,210,123,.18); --on-acc:#04180c;
  --shadow-win:0 1px 0 rgba(255,255,255,.08) inset,0 30px 80px -20px rgba(0,0,0,.7),0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-win-dim:0 12px 40px -16px rgba(0,0,0,.6);
  --shade:0,0,0;
  color-scheme:dark;
}
@media (min-width:1500px){:root{--dock-base:62px;--dock-reserve:124px}}
@media (max-width:1100px){:root{--dock-base:50px}}
@media (max-width:700px){:root{--bar-h:30px;--dock-base:44px;--dock-reserve:84px}}