/* ==========================================================================================================================
   DESIGN TOKENS: the one place where the look of the whole system is decided.

   Every stylesheet (index.html, blocks, apps, editor, core and the two UI skins) reads these tokens instead of hard-coding
   numbers, so a UI is just a different set of values:

     SHAPE      --r-1 … --r-9   corner radius steps        --r-pill  pills and capsules       --r-win / --r-ctl  windows, controls
     TYPE       --fs-0 … --fs-13  type scale               --fw-m / -b / -x   medium, bold, heavy weights
     SPACE      --u             one unit multiplier: every padding, margin and gap is  N * var(--u)  (1px = compact, 1.25px = airy)
     MOTION     --d-1 / -2 / -3 durations                  --ease (standard)  --ease-spring (overshoot)
     COLOUR     --bg --surface --surface2 --line --ink --ink2 --primary --on-primary --c1…c6 --danger --ok

   Material UI is the default and keeps the values the site shipped with (set on :root here and in index.html).
   Minimal UI (html[data-ui="minimal"]) is black and white, square, Swiss-typographic, roomy and quick.
   ========================================================================================================================== */
:root{
  --u:1px;
  --r-1:2px; --r-2:4px; --r-3:8px; --r-4:12px; --r-5:16px; --r-6:20px; --r-7:24px; --r-8:28px; --r-9:32px; --r-pill:99px;
  --r-win:var(--r-8); --r-win-max:var(--r-7); --r-ctl:var(--r-pill);
  --fs-0:10px; --fs-1:11px; --fs-2:12px; --fs-3:13px; --fs-4:14px; --fs-5:15px; --fs-6:16px; --fs-7:18px; --fs-8:20px; --fs-9:24px; --fs-10:28px; --fs-11:34px; --fs-12:44px; --fs-13:64px;
  --fw-m:600; --fw-b:700; --fw-x:800;
  --d-1:.12s; --d-2:.2s; --d-3:.32s;
  --ease:cubic-bezier(.2,0,0,1); --ease-spring:cubic-bezier(.34,1.3,.5,1);
  --danger:#D93025; --ok:#3DBE7A;
}

/* ---------------------------------------------- MINIMAL UI ("Index"): shape, type, space, motion ---------------------------------------------- */
/* Black and white, smooth, bold and spacious. Planes (tonal fills + soft shadow) instead of outlines; pictures are never filtered. */
:root[data-ui="minimal"]{
  --u:1.2px;
  --r-1:6px; --r-2:8px; --r-3:10px; --r-4:12px; --r-5:16px; --r-6:20px; --r-7:24px; --r-8:28px; --r-9:32px; --r-pill:999px;
  --r-win:24px; --r-win-max:24px; --r-ctl:999px;
  --fs-0:10px; --fs-1:11px; --fs-2:12px; --fs-3:13px; --fs-4:14px; --fs-5:15px; --fs-6:16px; --fs-7:18px; --fs-8:21px; --fs-9:28px; --fs-10:36px; --fs-11:52px; --fs-12:68px; --fs-13:80px;
  --fw-m:600; --fw-b:700; --fw-x:700;
  --d-1:.16s; --d-2:.32s; --d-3:.6s;
  --ease:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.16,1,.3,1);
  --font:"Geist","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,Consolas,monospace;
  --danger:#0A0A0A; --ok:#0A0A0A;
  /* layout units the wallpaper grid and the desktop tiles share */
  --m:28px; --bar:52px; --dock:64px; --tile:112px; --gap:14px;
  --float:0 1px 2px rgba(10,10,10,.05),0 8px 24px -8px rgba(10,10,10,.10);
  --lift:0 0 0 1px rgba(10,10,10,.035),0 2px 6px rgba(10,10,10,.05),0 20px 48px -12px rgba(10,10,10,.16),0 48px 96px -32px rgba(10,10,10,.26);
  --lift-dim:0 0 0 1px rgba(10,10,10,.03),0 12px 32px -12px rgba(10,10,10,.14);
  --ring:color-mix(in srgb,var(--ink) 30%,transparent);
  --tint:color-mix(in srgb,var(--ink) 7%,transparent);
}
/* ---------------------------------------------- MINIMAL UI : colour (black, white and greys only) ---------------------------------------------- */
:root[data-ui="minimal"],[data-sample="minimal"]{
  --bg:#E8E8E8; --w1:#F3F3F3; --w2:#EAEAEA; --w3:#E0E0E0; --w4:#F8F8F8;
  --surface:#FFFFFF; --surface2:#F3F3F3; --surface3:#E8E8E8; --line:rgba(10,10,10,.07);
  --ink:#0A0A0A; --ink2:#6A6A6A; --ink3:#A3A3A3; --primary:#0A0A0A; --on-primary:#FFFFFF;
  --c1:#F6F6F6; --c2:#EBEBEB; --c3:#DCDCDC; --c4:#C8C8C8; --c5:#929292; --c6:#0A0A0A;
  --glyph:#0A0A0A; --icbg:#F3F3F3; --ik:#0A0A0A; --igy:#6A6A6A; --on-c6:#FFFFFF;
  --shadow:0 0 0 1px rgba(10,10,10,.035),0 2px 6px rgba(10,10,10,.05),0 20px 48px -12px rgba(10,10,10,.16),0 48px 96px -32px rgba(10,10,10,.26);
}
@media (prefers-color-scheme:dark){
  :root[data-ui="minimal"]:not([data-theme="light"]),:root:not([data-theme="light"]) [data-sample="minimal"]{
    --bg:#0B0B0B; --w1:#0E0E0E; --w2:#171717; --w3:#222222; --w4:#0A0A0A;
    --surface:#161616; --surface2:#202020; --surface3:#2B2B2B; --line:rgba(255,255,255,.08);
    --ink:#F5F5F5; --ink2:#A2A2A2; --ink3:#626262; --primary:#F5F5F5; --on-primary:#0A0A0A;
    --c1:#1D1D1D; --c2:#292929; --c3:#373737; --c4:#4D4D4D; --c5:#8E8E8E; --c6:#F5F5F5;
    --glyph:#F5F5F5; --icbg:#202020; --ik:#F5F5F5; --igy:#A2A2A2; --on-c6:#0A0A0A;
    --float:0 1px 2px rgba(0,0,0,.4),0 8px 24px -8px rgba(0,0,0,.6);
    --lift:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(255,255,255,.05),0 24px 56px -12px rgba(0,0,0,.7),0 56px 112px -32px rgba(0,0,0,.8);
    --lift-dim:inset 0 1px 0 rgba(255,255,255,.04),0 0 0 1px rgba(255,255,255,.04),0 16px 40px -16px rgba(0,0,0,.7);
    --shadow:var(--lift);
  }
}
:root[data-ui="minimal"][data-theme="dark"],:root[data-theme="dark"] [data-sample="minimal"]{
  --bg:#0B0B0B; --w1:#0E0E0E; --w2:#171717; --w3:#222222; --w4:#0A0A0A;
  --surface:#161616; --surface2:#202020; --surface3:#2B2B2B; --line:rgba(255,255,255,.08);
  --ink:#F5F5F5; --ink2:#A2A2A2; --ink3:#626262; --primary:#F5F5F5; --on-primary:#0A0A0A;
  --c1:#1D1D1D; --c2:#292929; --c3:#373737; --c4:#4D4D4D; --c5:#8E8E8E; --c6:#F5F5F5;
  --glyph:#F5F5F5; --icbg:#202020; --ik:#F5F5F5; --igy:#A2A2A2; --on-c6:#0A0A0A;
  --float:0 1px 2px rgba(0,0,0,.4),0 8px 24px -8px rgba(0,0,0,.6);
  --lift:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(255,255,255,.05),0 24px 56px -12px rgba(0,0,0,.7),0 56px 112px -32px rgba(0,0,0,.8);
  --lift-dim:inset 0 1px 0 rgba(255,255,255,.04),0 0 0 1px rgba(255,255,255,.04),0 16px 40px -16px rgba(0,0,0,.7);
  --shadow:var(--lift);
}

/* ---------------------------------------------- Settings picker previews (each UI drawn in its own tokens) ---------------------------------------------- */
[data-sample="material"]{
  --bg:#E9EEF8; --surface:#FAFBFF; --surface2:#E8EDF6; --line:#D3DAE8; --ink:#1A1C20; --ink2:#454A55; --primary:#0B57D0;
  --shadow:0 12px 40px rgba(20,35,80,.18),0 2px 6px rgba(20,35,80,.10);
  --font:"Google Sans Flex",Figtree,Roboto,system-ui,sans-serif; --r-win:28px; --r-ctl:99px; --r-pill:99px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-sample="material"]{--bg:#0E1117;--surface:#1C1F26;--surface2:#292D36;--line:#3A3F4A;--ink:#E4E6EE;--ink2:#C2C6D2;--primary:#A8C7FA;--shadow:0 18px 50px rgba(0,0,0,.55)}}
:root[data-theme="dark"] [data-sample="material"]{--bg:#0E1117;--surface:#1C1F26;--surface2:#292D36;--line:#3A3F4A;--ink:#E4E6EE;--ink2:#C2C6D2;--primary:#A8C7FA;--shadow:0 18px 50px rgba(0,0,0,.55)}
[data-sample="minimal"]{--font:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;--r-win:20px;--r-ctl:999px;--r-pill:999px}