/*
 * base.css — variabili (palette chiara "Luna" blu di Windows XP), tema scuro
 * "Royale Noir" (prefers-color-scheme e [data-theme="dark"]), reset, sfondo
 * del desktop, link, focus e tipografia dei testi (titoli, paragrafi).
 * Per cambiare un colore in entrambi i temi: modificare la variabile qui sotto
 * in :root e nei due blocchi del tema scuro.
 */

:root {
  --gold: #e0b23a;
  --gold-ink: #8a5a00;
  --accent: #e68b2c;
  --accent-hi: #ffc73c;
  --focus: #0b5bd3;
  --paper: #ffffff;
  --paper-2: #f7f6f0;
  --ink: #1c1f26;
  --head: #0c2c84;
  --muted: #545a66;
  --link: #0a49c2;
  --rule: #dcd9cd;
  --sea: #d4e7f3;
  --land: #efead8;
  --land-edge: #ad9f72;
  --mount: #f2efe6;
  --mount-ink: #3a3528;
  /* desktop (prato e cielo, solo sfumature) */
  --desk: #3a6fd6;
  --wall:
    radial-gradient(140% 55% at 22% 118%,#4f8f25 0,#6aaa32 48%,rgba(120,184,58,.0) 62%),
    radial-gradient(120% 50% at 85% 122%,#5c9d2b 0,#7cb940 46%,rgba(124,185,64,0) 60%),
    radial-gradient(60% 30% at 70% 18%,rgba(255,255,255,.35),transparent 70%),
    linear-gradient(180deg,#2560d0 0,#4d8ee6 38%,#9cc5f0 70%,#c9e1f7 100%);
  /* cornice e barra del titolo */
  --title-bg: linear-gradient(180deg,#0997ff 0,#0053ee 8%,#0050ee 40%,#0066ff 88%,#0066ff 93%,#005bff 95%,#003dd7 96%,#003dd7 100%);
  --title-sh: #0f1089;
  --frame: #0855dd;
  --frame-hi: #166aee;
  --frame-lo: #001ea0;
  --cap: radial-gradient(circle at 90% 90%,#0054e9 0,#2263d5 55%,#4479e4 70%,#a3bbec 90%,#fff 100%);
  --cap-edge: #fff;
  /* superfici "Luna" (beige) */
  --face: #ece9d8;
  --face-bar: linear-gradient(180deg,#fbfaf6 0,#f1efe4 55%,#e6e2d1 100%);
  --face-hi: #ffffff;
  --face-lo: #c9c4ae;
  --tab: linear-gradient(180deg,#ffffff 0,#fafaf9 26%,#f0f0ea 95%,#ecebe6 100%);
  --tab-edge: #919b9c;
  --tab-ink: #1c1f26;
  /* pulsanti */
  --btn: linear-gradient(180deg,#ffffff 0,#f6f5f0 40%,#ecebe6 86%,#d6d0c5 100%);
  --btn-edge: #003c74;
  --btn-ink: #000000;
  --hot-bg: linear-gradient(180deg,#fffcf3 0,#ffeec8 55%,#ffdf9e 100%);
  --hot-edge: #e9a94a;
  --push-bg: linear-gradient(180deg,#ffd994 0,#fcc36a 55%,#f7b04d 100%);
  --push-edge: #c9822a;
  --btn-down: linear-gradient(180deg,#cdcac3 0,#e3e3db 8%,#e5e5de 94%,#f2f2f1 100%);
  --tip: #ffffe1;
  --tip-ink: #000000;
  --tip-edge: #767676;
  /* selezione e passaggio del mouse */
  --sel: #316ac5;
  --sel-ink: #ffffff;
  --hov-bg: #eaf0fc;
  --hov-edge: #a9bfe8;
  /* riquadro attività (indice laterale) */
  --pane: linear-gradient(180deg,#7ba2e7 0,#6375d6 100%);
  --pane-top: #7ba2e7;
  --grp-head: linear-gradient(90deg,#ffffff 0,#c6d3f7 100%);
  --grp-ink: #215dc6;
  --grp-body: #d6dff7;
  --grp-edge: #ffffff;
  --grp-hov: #428eff;
  --grp-link: #1b4db3;
  --grp1-head: linear-gradient(90deg,#0a3fc0 0,#2f72e0 100%);
  --grp1-body: #eff3ff;
  /* schede, tabelle, campi */
  --card: #ffffff;
  --card-edge: #b7c3d6;
  --card-shadow: 0 1px 2px rgba(0,30,80,.10),0 2px 8px rgba(0,30,80,.06);
  --card-lift: 0 2px 4px rgba(0,30,80,.14),0 6px 16px rgba(0,40,120,.12);
  --th: linear-gradient(180deg,#ffffff 0,#f7f6f1 60%,#ebeadb 100%);
  --th-edge: #d6d2c2;
  --field: #ffffff;
  --field-edge: #7f9db9;
  --ph: #696e78;
  --mag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.4' fill='%23e4f0ff' stroke='%23215dc6' stroke-width='1.7'/%3E%3Cpath d='M10 10l4.2 4.2' stroke='%23215dc6' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --status: linear-gradient(180deg,#f4f2e8 0,#ece9d8 100%);
  --status-ink: #1c1f26;
  --status-sep: #c9c4ae;
  --status-hi: #ffffff;
  --ui: Tahoma, Verdana, "Segoe UI", system-ui, -apple-system, sans-serif;
  --cap-font: "Trebuchet MS", Tahoma, Verdana, sans-serif;
  --serif: Spectral, Georgia, "Times New Roman", serif;
  --hand: Caveat, "Comic Sans MS", cursive;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top,0px);
  padding-bottom: env(safe-area-inset-bottom,0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gold-ink: #f0c75a;
    --accent: #ff9a2e;
    --accent-hi: #ffc861;
    --focus: #ffb347;
    --paper: #1c1e22;
    --paper-2: #23262b;
    --ink: #e8e8e6;
    --head: #a9c8ff;
    --muted: #a9aeb7;
    --link: #8ab8ff;
    --rule: #363a41;
    --sea: #1b2c3e;
    --land: #39392f;
    --land-edge: #6d6748;
    --mount: #e9e4d6;
    --desk: #0c0d10;
    --wall:
      radial-gradient(140% 55% at 22% 118%,#1a2416 0,#141c12 48%,rgba(20,28,18,0) 62%),
      radial-gradient(120% 50% at 85% 122%,#18211a 0,#121813 46%,rgba(18,24,19,0) 60%),
      radial-gradient(70% 40% at 70% 10%,rgba(120,140,170,.12),transparent 70%),
      linear-gradient(180deg,#07080a 0,#121419 55%,#1a1d22 100%);
    --title-bg: linear-gradient(180deg,#6b6f76 0,#3a3d42 7%,#27292d 45%,#151618 55%,#1c1d20 88%,#2b2c30 94%,#050505 96%,#000 100%);
    --title-sh: #000;
    --frame: #1d1e21;
    --frame-hi: #4a4d53;
    --frame-lo: #000;
    --cap: radial-gradient(circle at 90% 90%,#202226 0,#34373c 55%,#4a4e55 70%,#7b8089 90%,#c9ccd1 100%);
    --cap-edge: #b9bcc2;
    --face: #2b2d31;
    --face-bar: linear-gradient(180deg,#3a3c41 0,#303236 55%,#27292d 100%);
    --face-hi: #45484e;
    --face-lo: #15161a;
    --tab: linear-gradient(180deg,#46494f 0,#3a3d42 50%,#303237 100%);
    --tab-edge: #5a5e65;
    --tab-ink: #e8e8e6;
    --btn: linear-gradient(180deg,#54575d 0,#43464c 40%,#36393e 86%,#2c2e33 100%);
    --btn-edge: #0a0a0b;
    --btn-ink: #f2f2f2;
    --hot-bg: linear-gradient(180deg,#5a4a33 0,#6b5432 55%,#7a5a2c 100%);
    --hot-edge: #c98a3a;
    --push-bg: linear-gradient(180deg,#8a5f26 0,#9c6a28 55%,#a8722c 100%);
    --push-edge: #e0a050;
    --btn-down: linear-gradient(180deg,#1f2124 0,#2a2c30 10%,#303236 100%);
    --tip: #34342a;
    --tip-ink: #f4f1dc;
    --tip-edge: #6d6c5c;
    --sel: #2f62c4;
    --sel-ink: #ffffff;
    --hov-bg: rgba(120,160,255,.13);
    --hov-edge: rgba(120,160,255,.38);
    --pane: linear-gradient(180deg,#33373e 0,#1e2125 100%);
    --pane-top: #33373e;
    --grp-head: linear-gradient(90deg,#50555e 0,#30343a 100%);
    --grp-ink: #ffffff;
    --grp-body: #25282d;
    --grp-edge: #4b5058;
    --grp-hov: #ffc861;
    --grp-link: #d6e0f2;
    --grp1-head: linear-gradient(90deg,#1f4fa8 0,#3a6fd0 100%);
    --grp1-body: #2a2e35;
    --card: #23262b;
    --card-edge: #3e434b;
    --card-shadow: 0 1px 2px rgba(0,0,0,.4);
    --card-lift: 0 2px 4px rgba(0,0,0,.45),0 6px 16px rgba(0,0,0,.35);
    --th: linear-gradient(180deg,#3b3e44 0,#2e3136 100%);
    --th-edge: #15161a;
    --field: #121316;
    --field-edge: #636c78;
    --ph: #949aa5;
    --mag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.4' fill='%23262a31' stroke='%23b9cff5' stroke-width='1.7'/%3E%3Cpath d='M10 10l4.2 4.2' stroke='%23b9cff5' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
    --status: linear-gradient(180deg,#303237 0,#26282c 100%);
    --status-ink: #e2e2e2;
    --status-sep: #15161a;
    --status-hi: #44474d;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --gold-ink: #f0c75a;
  --accent: #ff9a2e;
  --accent-hi: #ffc861;
  --focus: #ffb347;
  --paper: #1c1e22;
  --paper-2: #23262b;
  --ink: #e8e8e6;
  --head: #a9c8ff;
  --muted: #a9aeb7;
  --link: #8ab8ff;
  --rule: #363a41;
  --sea: #1b2c3e;
  --land: #39392f;
  --land-edge: #6d6748;
  --mount: #e9e4d6;
  --desk: #0c0d10;
  --wall:
    radial-gradient(140% 55% at 22% 118%,#1a2416 0,#141c12 48%,rgba(20,28,18,0) 62%),
    radial-gradient(120% 50% at 85% 122%,#18211a 0,#121813 46%,rgba(18,24,19,0) 60%),
    radial-gradient(70% 40% at 70% 10%,rgba(120,140,170,.12),transparent 70%),
    linear-gradient(180deg,#07080a 0,#121419 55%,#1a1d22 100%);
  --title-bg: linear-gradient(180deg,#6b6f76 0,#3a3d42 7%,#27292d 45%,#151618 55%,#1c1d20 88%,#2b2c30 94%,#050505 96%,#000 100%);
  --title-sh: #000;
  --frame: #1d1e21;
  --frame-hi: #4a4d53;
  --frame-lo: #000;
  --cap: radial-gradient(circle at 90% 90%,#202226 0,#34373c 55%,#4a4e55 70%,#7b8089 90%,#c9ccd1 100%);
  --cap-edge: #b9bcc2;
  --face: #2b2d31;
  --face-bar: linear-gradient(180deg,#3a3c41 0,#303236 55%,#27292d 100%);
  --face-hi: #45484e;
  --face-lo: #15161a;
  --tab: linear-gradient(180deg,#46494f 0,#3a3d42 50%,#303237 100%);
  --tab-edge: #5a5e65;
  --tab-ink: #e8e8e6;
  --btn: linear-gradient(180deg,#54575d 0,#43464c 40%,#36393e 86%,#2c2e33 100%);
  --btn-edge: #0a0a0b;
  --btn-ink: #f2f2f2;
  --hot-bg: linear-gradient(180deg,#5a4a33 0,#6b5432 55%,#7a5a2c 100%);
  --hot-edge: #c98a3a;
  --push-bg: linear-gradient(180deg,#8a5f26 0,#9c6a28 55%,#a8722c 100%);
  --push-edge: #e0a050;
  --btn-down: linear-gradient(180deg,#1f2124 0,#2a2c30 10%,#303236 100%);
  --tip: #34342a;
  --tip-ink: #f4f1dc;
  --tip-edge: #6d6c5c;
  --sel: #2f62c4;
  --sel-ink: #ffffff;
  --hov-bg: rgba(120,160,255,.13);
  --hov-edge: rgba(120,160,255,.38);
  --pane: linear-gradient(180deg,#33373e 0,#1e2125 100%);
  --pane-top: #33373e;
  --grp-head: linear-gradient(90deg,#50555e 0,#30343a 100%);
  --grp-ink: #ffffff;
  --grp-body: #25282d;
  --grp-edge: #4b5058;
  --grp-hov: #ffc861;
  --grp-link: #d6e0f2;
  --grp1-head: linear-gradient(90deg,#1f4fa8 0,#3a6fd0 100%);
  --grp1-body: #2a2e35;
  --card: #23262b;
  --card-edge: #3e434b;
  --card-shadow: 0 1px 2px rgba(0,0,0,.4);
  --card-lift: 0 2px 4px rgba(0,0,0,.45),0 6px 16px rgba(0,0,0,.35);
  --th: linear-gradient(180deg,#3b3e44 0,#2e3136 100%);
  --th-edge: #15161a;
  --field: #121316;
  --field-edge: #636c78;
  --ph: #949aa5;
  --mag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='4.4' fill='%23262a31' stroke='%23b9cff5' stroke-width='1.7'/%3E%3Cpath d='M10 10l4.2 4.2' stroke='%23b9cff5' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --status: linear-gradient(180deg,#303237 0,#26282c 100%);
  --status-ink: #e2e2e2;
  --status-sep: #15161a;
  --status-hi: #44474d;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

html {
  scroll-padding-top: env(safe-area-inset-top,0px);
}

/* desktop: cielo e colline alla "Bliss", solo sfumature */
body {
  color: var(--ink);
  font-family: var(--ui);
  font-size: 13px;
  background-color: var(--desk);
  background-image: var(--wall);
  background-attachment: fixed;
  display: flow-root;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--link);
  text-underline-offset: .15em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

::selection {
  background: var(--sel);
  color: var(--sel-ink);
}

h1, h2, h3 {
  font-family: var(--cap-font);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .45em;
  color: var(--head);
}

h1 {
  font-size: 2rem;
  letter-spacing: -.01em;
}

h2 {
  font-size: 1.35rem;
  margin-top: 1.5em;
  padding-bottom: 4px;
  background: linear-gradient(90deg,var(--accent) 0,var(--accent) 48px,var(--rule) 48px,transparent 100%) left bottom/100% 2px no-repeat;
}

h2 a {
  text-decoration: none;
}

h2 a:hover {
  text-decoration: underline;
}

h3 {
  font-size: 1.08rem;
  margin-top: 1.2em;
}

p, li.t {
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.62;
  max-width: 70ch;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
  }
}