/* Theme tokens, shared by the public page and the workspace.
   A theme (office/public_themes.py, rendered inline by base.html) sets the base colours on [data-theme];
   everything else is mixed from them here. */
body{
  --s-bg:#faf8f4;--s-ink:#18202e;--s-hero:#141c2b;--s-hero-ink:#fff;--s-accent:#d97a2b;--s-accent-ink:#fff;--s-em:#d97a2b;
  --s-hero-accent:var(--s-accent);--s-hero-accent-ink:var(--s-accent-ink);
  --s-heading:Inter,-apple-system,sans-serif;--s-heading-weight:700;--s-heading-track:-.035em;--s-em-style:normal;--s-radius:6px;--s-radius-lg:12px;
}
body,[data-theme]{
  --s-paper:color-mix(in srgb,#fff 75%,var(--s-bg));--s-tint:color-mix(in srgb,var(--s-ink) 5%,var(--s-bg));
  --s-text:color-mix(in srgb,var(--s-ink) 82%,var(--s-bg));--s-muted:color-mix(in srgb,var(--s-ink) 58%,var(--s-bg));
  --s-line:color-mix(in srgb,var(--s-ink) 12%,var(--s-bg));--s-field:color-mix(in srgb,var(--s-ink) 22%,var(--s-bg));
  --s-hero-bg:var(--s-hero);--s-hero-muted:color-mix(in srgb,var(--s-hero-ink) 74%,var(--s-hero));--s-hero-line:color-mix(in srgb,var(--s-hero-ink) 30%,var(--s-hero));
  --s-accent-hover:color-mix(in srgb,var(--s-accent) 85%,#000);--s-accent-soft:color-mix(in srgb,var(--s-accent) 16%,var(--s-paper));
  --s-step:var(--s-ink);--s-step-ink:var(--s-bg);--s-footer-bg:var(--s-ink);--s-footer-ink:color-mix(in srgb,var(--s-bg) 65%,var(--s-ink));--s-footer-strong:var(--s-bg);
}
body[data-theme=nacht]{--s-hero-bg:radial-gradient(900px 500px at 85% 0%,#2b3a5c 0%,transparent 60%),linear-gradient(180deg,#141c2b,#1e2940)}
body[data-theme=werf]{--s-step:#f5c400;--s-step-ink:#111}

/* The workspace's own names for the same colours. */
body{
  --ink:var(--s-ink);--dark:color-mix(in srgb,var(--s-ink) 80%,#000);--cream:var(--s-bg);--white:#fff;
  --line:var(--s-line);--muted:var(--s-muted);--lime:var(--s-accent);--accent-ink:var(--s-accent-ink);
  --paper:var(--s-paper);--accent-soft:var(--s-accent-soft);--radius:var(--s-radius);--radius-lg:var(--s-radius-lg);
}

/* Theme page in the workspace. Each card carries its own data-theme, so it previews that theme's colours. */
.theme-savebar{position:sticky;top:12px;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 18px;margin-bottom:28px}
.theme-savebar p{margin:0}
.theme-group h2{font-size:15px;font-weight:600;letter-spacing:0;margin:0 0 12px}
.theme-group+.theme-group{margin-top:28px}
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.theme-card{position:relative;display:block;cursor:pointer;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;padding:8px;transition:border-color .15s,box-shadow .15s}
.theme-card:hover{border-color:color-mix(in srgb,var(--ink) 35%,#fff)}
.theme-card input{position:absolute;opacity:0;pointer-events:none}
.theme-card:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.theme-card:has(input:focus-visible){outline:3px solid var(--lime);outline-offset:3px}
.theme-card-preview{display:block;border-radius:var(--s-radius);overflow:hidden;border:1px solid color-mix(in srgb,#000 8%,transparent)}
.theme-card-hero{display:flex;flex-direction:column;gap:5px;padding:14px 12px;background:var(--s-hero-bg);height:74px}
.theme-card-hero i{display:block;height:7px;width:70%;border-radius:2px;background:var(--s-hero-ink)}
.theme-card-hero i+i{width:45%;background:var(--s-em)}
.theme-card-hero b{display:block;margin-top:auto;width:38%;height:12px;border-radius:3px;background:var(--s-hero-accent)}
.theme-card-body{display:flex;gap:6px;padding:10px 12px;background:var(--s-bg)}
.theme-card-body i{flex:1;height:22px;border-radius:3px;background:var(--s-paper);border:1px solid var(--s-line)}
.theme-card-body i:first-child{flex:0 0 22px;background:var(--s-accent-soft);border-color:transparent}
.theme-card-name{display:block;padding:9px 4px 3px;font-size:12px;font-weight:600;color:var(--ink)}
.theme-card-name small{font-weight:400;color:var(--muted);margin-left:4px}