/* palette.css: the ONE colour file of albertocampigotto.com, light and dark theme.
   Active palette: P6 Acid (approved by AL, 10 Oct 2026); 14 Oct 2026: demo surfaces, ok/warn chips, lime pill in dark. Dark theme approved by AL, 10 Oct 2026 (design/comp-v2/dark/dark.md).
   Every literal colour of the site lives in this file, except the theme-color meta of each HTML head, which repeat
   the --bg of the light theme (#FFFFFF); the toggle sets them to the --bg of the dark one (#171819). site.css only uses var(--…) and color-mix() of these tokens.
   Order, keep it: 1 the light tokens and their two scopes (the FIRST root block of the file: build_assets.py reads it);
   2 the dark tokens, for the toggle only. The dark block is screen-only, so printing and "Save as PDF" always use the light tokens.
   To switch to P4 Vermilion: replace this whole file with design/tokens/palette-p4.css, set the dark --bg to #131313, bump ?v= in every HTML file, then run: python3 design/assets-src/build_assets.py */
:root {
  color-scheme: light;
  /* theme toggle: show the icon and label of the theme it switches TO (light: moon, "Dark theme") */
  --i-moon: block;
  --i-sun: none;
  /* page */
  --bg: #FFFFFF;
  --paper: #FFFFFF;   /* the ground of a product photo: stays white in both themes */
  --ink: #1C1E21;
  --ink-2: #383B40;
  --meta: #4A4E54;
  --line: #73777D;
  --rule: #DADCDF;
  /* the one accent, and what sits on it */
  --accent: #D2F53C;
  --signal: #D2F53C;
  --on-signal: #1C1E21;
  --mark: #D2F53C;
  --on-mark: #1C1E21;
  --mark-top: 58%;
  --mark-bot: 92%;
  /* browser surfaces */
  --sel-bg: #D2F53C;
  --sel-fg: #1C1E21;
  --focus: #1C1E21;
  --link-ul: color-mix(in srgb, currentColor 55%, transparent);
  /* regions */
  --rank: #383B40;
  --hero-bg: #FFFFFF;
  --panel-bg: #D2F53C;
  --panel-bd: transparent;
  --panel-solid: #D2F53C;
  --panel-bw: 1.5px;
  --panel-px: 1;
  --panel-pb: 1;
  --close-bg: #D2F53C;
  --close-rule: 0 solid transparent;
  --nav-bg: #FFFFFF;
  --nav-bd: color-mix(in srgb, #1C1E21 14%, transparent);
  --btn-bg: #1C1E21;
  --btn-fg: #D2F53C;
  --btn-hover: #34373B;
  --r-panel: 6px;
  --r-bubble: 3px 14px 14px 14px;
  /* demo surfaces and the two outcome colours (ok = lime family, warn = amber, «da controllare») */
  --surface: #F3F4F5;
  /* the closing contact band: dark in both themes, a step darker than the page in the dark one */
  --band-bg: #141516;
  --band-ink: #F4F5F6;
  --band-ink-2: #C9CCD0;
  --band-meta: #A9ADB2;
  --band-btn-bg: #D2F53C;
  --band-btn-fg: #141516;
  --band-rule: transparent;
  --surface-2: #FFFFFF;
  --bubble-out: #EAF6C5;
  --line-soft: #E3E5E8;
  --ok-bg: #E8F6B0;
  --ok-ink: #2B3500;
  --warn: #A35F00;
  --warn-bg: #FFF0D2;
  --warn-ink: #6E4000;
  --shadow: 0 28px 56px -32px rgba(28, 30, 33, .30);
  /* the hero phone: its body stays dark in both themes; the soft shadow under its base sets it on the page */
  --phone-body: #0E0F10;
  --phone-edge: #3A3C40;
  --phone-ground: rgba(28, 30, 33, .34);
  /* brand mark: ring of the acid dot (graphite on white; none visible in dark) */
  --mk-ring: #1C1E21;
}
/* the pattern panel: one acid block */
.fig0 {
  --ink-2: #2B2E32;
  --meta: #2B2E32;
  --signal: #1C1E21;
  --on-signal: #D2F53C;
  --panel-solid: #D2F53C;
}
/* the closing band and the footer: the acid field */
.close, .foot {
  --ink-2: #2B2E32;
  --meta: #33363A;
  --line: #5A5F2E;
  --sel-bg: #1C1E21;
  --sel-fg: #D2F53C;
}
/* ---- dark theme: only when the visitor chooses it with the toggle (the default is light, whatever the system prefers; screen only: print stays light) ---- */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    /* theme toggle: the sun and "Light theme" */
    --i-moon: none;
    --i-sun: block;
    /* page */
    --bg: #171819;
    --ink: #EAEBEC;
    --ink-2: #C8CBCE;
    --meta: #ADB1B5;
    --line: #7E8389;
    --rule: #313337;
    /* the one accent, and what sits on it */
    --accent: #C9EA3F;
    --mk-ring: #C9EA3F;
    --signal: #C9EA3F;
    --on-signal: #1C1E21;
    --mark: #C9EA3F;
    --on-mark: #1C1E21;
    --mark-top: 0%;
    --mark-bot: 100%;
    /* browser surfaces */
    --sel-bg: #C9EA3F;
    --sel-fg: #1C1E21;
    --focus: #C9EA3F;
    --link-ul: color-mix(in srgb, currentColor 55%, transparent);
    /* regions */
    --rank: #C8CBCE;
    --hero-bg: #171819;
    --panel-bg: #C9EA3F;
    --panel-bd: transparent;
    --panel-solid: #C9EA3F;
    --close-bg: #C9EA3F;
    --close-rule: 0 solid transparent;
    --nav-bg: #212224;
    --nav-bd: color-mix(in srgb, #EAEBEC 13%, transparent);
    --btn-bg: #C9EA3F;
    --btn-fg: #15160F;
    --btn-hover: #D8F26A;
    --r-panel: 6px;
    --r-bubble: 3px 14px 14px 14px;
    /* demo surfaces and the two outcome colours */
    --surface: #202124;
    --band-bg: #0E0F10;
    --band-rule: #2A2C2F;
    --surface-2: #2A2C2F;
    --bubble-out: #2D3320;
    --line-soft: #2E3033;
    --ok-bg: #2F3818;
    --ok-ink: #D9F27A;
    --warn: #F2B544;
    --warn-bg: #3A311C;
    --warn-ink: #F6C868;
    --shadow: none;
    --phone-edge: #4A4D52;
    --phone-ground: rgba(0, 0, 0, .6);
  }
  :root[data-theme="dark"] .fig0 {
    --ink: #1C1E21;
    --ink-2: #2B2E32;
    --meta: #2B2E32;
    --line: #565B2B;
    --signal: #1C1E21;
    --on-signal: #C9EA3F;
    --sel-bg: #1C1E21;
    --sel-fg: #C9EA3F;
    --focus: #1C1E21;
    --link-ul: color-mix(in srgb, currentColor 55%, transparent);
    --panel-solid: #C9EA3F;
  }
  :root[data-theme="dark"] .close, :root[data-theme="dark"] .foot {
    --ink: #1C1E21;
    --ink-2: #2B2E32;
    --meta: #33363A;
    --line: #565B2B;
    --sel-bg: #1C1E21;
    --sel-fg: #C9EA3F;
    --focus: #1C1E21;
    --link-ul: color-mix(in srgb, currentColor 55%, transparent);
  }
}