/* Theme: office (category "kontoret") - light, clean and professional: cool grey with a
 * corporate blue accent, a thin brand bar along the top, fine concentric arcs in the top-right
 * corner and a fading dot grid in the bottom-left. Deliberately calm: no animation. */

html[data-ordleg-theme="office"] {
  --bg: radial-gradient(ellipse 55% 50% at 100% 0%, rgba(63, 128, 214, 0.14) 0%, rgba(63, 128, 214, 0) 100%),
        radial-gradient(ellipse 50% 45% at 0% 100%, rgba(40, 150, 190, 0.1) 0%, rgba(40, 150, 190, 0) 100%),
        linear-gradient(160deg, #f6f8fb 0%, #eaeff5 100%);
  --fg: #142030;
  --fg-muted: #435163;
  --accent: #1d5bb8;
  --accent-fg: #ffffff;
  --card: rgba(255, 255, 255, 0.78);
  --card-strong: rgba(255, 255, 255, 0.98);
  --card-border: rgba(20, 32, 48, 0.11);
  --taboo: #b42318;
  --taboo-bg: rgba(180, 35, 24, 0.07);
  --timer-ok: #1d5bb8;
  --timer-warn: #c2340d;
  --ok: #137045;
  --bad: #b42318;
  --subtle: rgba(20, 32, 48, 0.09);
  --selected-bg: rgba(255, 255, 255, 0.96);
  --selected-ring: rgba(29, 91, 184, 0.25);
  --overlay: rgba(14, 22, 34, 0.5);
}

/* --- Brand bar along the top edge --- */
html[data-ordleg-theme="office"] .theme-deco .deco-a {
  left: 0;
  right: 0;
  top: 0;
  height: clamp(4px, 0.55vh, 12px);
  background: linear-gradient(90deg, #163f86 0%, #1d5bb8 45%, #2b8fd0 80%, #3fb0d6 100%);
}

/* --- Fine concentric arcs, top-right corner --- */
html[data-ordleg-theme="office"] .theme-deco .deco-b {
  top: 0;
  right: 0;
  width: clamp(260px, 34vw, 1300px);
  aspect-ratio: 1;
  background: repeating-radial-gradient(circle at 100% 0, rgba(29, 91, 184, 0) 0 clamp(26px, 2.6vw, 96px), rgba(29, 91, 184, 0.17) clamp(26px, 2.6vw, 96px) calc(clamp(26px, 2.6vw, 96px) + 2px));
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000 20%, transparent 70%);
  mask-image: radial-gradient(circle at 100% 0, #000 20%, transparent 70%);
}
/* a solid accent quarter-disc tucked into the corner */
html[data-ordleg-theme="office"] .theme-deco .deco-b::before {
  content: "";
  position: absolute;
  top: calc(-1 * clamp(40px, 4vw, 150px));
  right: calc(-1 * clamp(40px, 4vw, 150px));
  width: clamp(80px, 8vw, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(225deg, rgba(43, 143, 208, 0.35), rgba(29, 91, 184, 0.2));
}

/* --- Dot grid fading out from the bottom-left corner --- */
html[data-ordleg-theme="office"] .theme-deco .deco-c {
  left: 0;
  bottom: 0;
  width: clamp(240px, 30vw, 1150px);
  aspect-ratio: 4 / 3;
  background: radial-gradient(circle, rgba(29, 91, 184, 0.28) 0 1.6px, rgba(29, 91, 184, 0) 2.2px) 0 0 / clamp(16px, 1.3vw, 50px) clamp(16px, 1.3vw, 50px) repeat;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 0 100%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 100% 100% at 0 100%, #000 10%, transparent 75%);
}