/* atmospheres.css — generated by tools/atmos_contrast.py.
  Source: data/atmos_palettes.json   Keys: default,kozmos,zem,pamat,ukrajina,papier */


/* Register all eight palette variables so the 400ms navigation fade interpolates
   colours smoothly (Chromium 85+ / Safari 15.4+).  Every consumer in style.css
   reads from the same var names; initial-values here are only a fallback and
   get overridden by the :root defaults in style.css in practice. */
@property --bg        { syntax: '<color>';  inherits: true;  initial-value: #0e0e0e; }
@property --bg-soft   { syntax: '<color>';  inherits: true;  initial-value: #151515; }
@property --bg-raised { syntax: '<color>';  inherits: true;  initial-value: #1b1b1b; }
@property --text      { syntax: '<color>';  inherits: true;  initial-value: #ecebe6; }
@property --text-dim  { syntax: '<color>';  inherits: true;  initial-value: #9d9c96; }
@property --line      { syntax: '<color>';  inherits: true;  initial-value: #2a2a28; }
@property --accent    { syntax: '<color>';  inherits: true;  initial-value: #c8b89a; }
@property --focus     { syntax: '<color>';  inherits: true;  initial-value: #e0c98f; }

:root { --atmos-grain: none; --atmo-detail: none; }

@media (prefers-reduced-motion: no-preference) {
  /* Calm mode (html[data-calm='1'] — shared contract) disables the 400ms fade. */
  :root:not([data-calm='1']) {
    transition: --bg .4s ease, --bg-soft .4s ease, --bg-raised .4s ease,
                --text .4s ease, --text-dim .4s ease,
                --line .4s ease, --accent .4s ease, --focus .4s ease;
  }
}

/* -------------------------------------------------------------
   Palettes (one block per key x mode). Loading AFTER style.css
   redefines: --bg --bg-soft --bg-raised --text --text-dim --line
   --accent  --focus  — every consumer in style.css picks these up.
-------------------------------------------------------------- */
:root[data-atmos='default'][data-theme='dark'] {
  --bg:            #0e0e0e;
  --bg-soft:       #151515;
  --bg-raised:     #1b1b1b;
  --text:          #ecebe6;
  --text-dim:      #9d9c96;
  --line:          #2a2a28;
  --accent:        #c8b89a;
  --focus:         #e0c98f;
}
:root[data-atmos='default'][data-theme='light'] {
  --bg:            #f6f5f1;
  --bg-soft:       #efeee9;
  --bg-raised:     #ffffff;
  --text:          #151515;
  --text-dim:      #6b6a64;
  --line:          #dcdbd4;
  --accent:        #8a7550;
  --focus:         #7a6234;
}
:root[data-atmos='kozmos'][data-theme='dark'] {
  --bg:            #0b1220;
  --bg-soft:       #10172a;
  --bg-raised:     #15203a;
  --text:          #e8ecf5;
  --text-dim:      #a2abc6;
  --line:          #273253;
  --accent:        #9db4ff;
  --focus:         #b7c8ff;
}
:root[data-atmos='kozmos'][data-theme='light'] {
  --bg:            #e7ecf7;
  --bg-soft:       #dbe3f3;
  --bg-raised:     #ffffff;
  --text:          #152038;
  --text-dim:      #4a5a7e;
  --line:          #acbcd9;
  --accent:        #3357c8;
  --focus:         #2b4bb5;
}
:root[data-atmos='zem'][data-theme='dark'] {
  --bg:            #15110c;
  --bg-soft:       #1b150f;
  --bg-raised:     #221a11;
  --text:          #ece6da;
  --text-dim:      #a6987f;
  --line:          #3a2f1e;
  --accent:        #c9a26b;
  --focus:         #d8b87e;
}
:root[data-atmos='zem'][data-theme='light'] {
  --bg:            #efe9db;
  --bg-soft:       #e6dcc5;
  --bg-raised:     #fdfbf7;
  --text:          #241d11;
  --text-dim:      #6b5d47;
  --line:          #cfc0a3;
  --accent:        #7a5620;
  --focus:         #6b4a1a;
}
:root[data-atmos='pamat'][data-theme='dark'] {
  --bg:            #0f0f0f;
  --bg-soft:       #151515;
  --bg-raised:     #1c1c1c;
  --text:          #ecebe6;
  --text-dim:      #a6a5a1;
  --line:          #2e2e2c;
  --accent:        #b3342b;
  --focus:         #cf4436;
}
:root[data-atmos='pamat'][data-theme='light'] {
  --bg:            #edecea;
  --bg-soft:       #e2e1de;
  --bg-raised:     #ffffff;
  --text:          #191917;
  --text-dim:      #4c4b48;
  --line:          #d2d1ce;
  --accent:        #a02c24;
  --focus:         #b8382f;
}
:root[data-atmos='pamat'] { --atmos-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); }
:root[data-atmos='ukrajina'][data-theme='dark'] {
  --bg:            #0e0e0e;
  --bg-soft:       #121212;
  --bg-raised:     #1d1d1d;
  --text:          #ecebe6;
  --text-dim:      #9d9c96;
  --line:          #2c2c2c;
  --accent:        #3a6fd8;
  --focus:         #4d80e0;
}
:root[data-atmos='ukrajina'][data-theme='light'] {
  --bg:            #eef0f4;
  --bg-soft:       #e6e9f1;
  --bg-raised:     #ffffff;
  --text:          #14161a;
  --text-dim:      #454b57;
  --line:          #c6cbd8;
  --accent:        #2b57c8;
  --focus:         #264aae;
}
:root[data-atmos='ukrajina'][data-theme='dark']  { --atmo-detail: #e0b92a; }
:root[data-atmos='ukrajina'][data-theme='light'] { --atmo-detail: #caa417; }
:root[data-atmos='papier'][data-theme='dark'] {
  --bg:            #1a1814;
  --bg-soft:       #211f19;
  --bg-raised:     #29261f;
  --text:          #ddd5c4;
  --text-dim:      #8f877a;
  --line:          #4a4437;
  --accent:        #a99672;
  --focus:         #bdb092;
}
:root[data-atmos='papier'][data-theme='light'] {
  --bg:            #efe9dc;
  --bg-soft:       #e7e0cf;
  --bg-raised:     #fbf9f4;
  --text:          #1b1a17;
  --text-dim:      #57544a;
  --line:          #d3cab6;
  --accent:        #6b5b45;
  --focus:         #5c4d34;
}

/* Body-level grain (pamät only) — static (zero animation) per spec. */
body { background-image: var(--atmos-grain, none); background-repeat: repeat; }

/* Ukrajina — thin 2px gold detail line just under the page title.  It is
   decorative (not text), so it is intentionally exempt from the 3:1 rule;
   drawn as a full-width rule at the very top of the content area (i.e. under
   the topbar/page-title band) rather than recolouring large fields. */
[data-atmos='ukrajina'] main#content { position: relative; }
[data-atmos='ukrajina'] main#content::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--atmo-detail, none);
}


/* End of atmospheres.css */