/* Cloud Dark — the fifth visitor theme: Cloud on a charcoal ground (Telemetry's #0b0c0e lifted 10%).
 *
 * Everything Cloud is (cloud.css: the floating rounded header, big-cornered cards with wide soft
 * shadows, the system face, two-tone headlines, spaced grey eyebrows, the one action blue) stays as it
 * is, and so do the icon colours. Only the light grounds turn dark: a charcoal page (Telemetry's ground
 * lifted 10% towards white), slightly lighter charcoal cards, light ink. studio-redesign.js sets data-final="cloud" + data-cloud="dark", so cloud.css
 * still applies in full and this file, loaded after it, recolours it. Subtrees marked data-st-own
 * (aircode.html, air-router.html) carry their own Cloud Dark tokens.
 *
 * Every rule is scoped to html[data-final="cloud"][data-cloud="dark"] (tests/cloud-theme.test.js). */

/* ── 1. Palette (consumed by the Studio adapter; AA-checked in the test) ───────────────────────── */
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"] {
  color-scheme: dark;
  --st-paper: #232426;  --studio-rgb-paper: 35 36 38;       /* the ground: Telemetry's #0b0c0e lifted 10% */
  --st-soft: #2c2e32;   --studio-rgb-soft: 44 46 50;        /* raised panels: a lighter charcoal card */
  --st-sky: #27292c;    --studio-rgb-sky: 39 41 44;
  --st-ink: #ffffff;    --studio-rgb-ink: 255 255 255;
  --st-text: #e6e7eb;   --studio-rgb-text: 230 231 235;
  --st-mid: #cfd1d8;    --studio-rgb-mid: 207 209 216;
  --st-muted: #b4b7c0;  --studio-rgb-muted: 180 183 192;
  --st-line: #3a3c41;   --studio-rgb-line: 58 60 65;
  --st-line2: #4a4c52;  --studio-rgb-line2: 74 76 82;
  --st-blue: #9ccbff;   --studio-rgb-blue: 156 203 255;     /* link blue, lifted for the charcoal */
  --st-blue2: #b3bcff;  --studio-rgb-blue2: 179 188 255;
  --st-hover: #b8d9ff;  --studio-rgb-hover: 184 217 255;
  --st-focus: #4da3ff;  --studio-rgb-focus: 77 163 255;
  --st-control: #8b8e99; --studio-rgb-control: 139 142 153;
  --st-green: #7ee2b8;  --studio-rgb-green: 126 226 184;
  --st-red: #ffadb5;    --studio-rgb-red: 255 173 181;
  --st-amber: #ffcb7a;  --studio-rgb-amber: 255 203 122;
  --st-onAccent: #0b0c10; --studio-rgb-onAccent: 11 12 16;
  --st-band: #27292c;
  --surface: #2c2e32; --surface-2: #2c2e32; --panel: #2c2e32; --glass: #2c2e32; --surface-solid: #2c2e32;
  --panel-2: #27292c; --raised: #2c2e32; --raised2: #27292c; --surface-sunken: #27292c;
  --invert: #17181b; --invert-2: #1c1d20; --invert-ink: #ffffff; --invert-mid: #e4e6ec; --invert-mute: #b9bcc7; --invert-line: #34363b;
}

/* ── 2. Cloud's tokens, in charcoal ─────────────────────────────────────────────────────────────── */
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"] {
  --cl-page: #232426; --cl-surface: #2c2e32; --cl-inset: #27292c;
  --cl-line: rgb(255 255 255 / .08); --cl-line-2: rgb(255 255 255 / .14);
  --cl-ink: #ffffff; --cl-mid: #a9acb6; --cl-muted: #a9acb6;
  --cl-shadow: 0 20px 55px rgb(0 0 0 / .34);
  --cl-shadow-hover: 0 27px 62px rgb(0 0 0 / .46);
  --cl-shadow-lg: 0 32px 70px rgb(0 0 0 / .48);
  --cl-shadow-btn: 0 16px 34px rgb(10 132 255 / .3);
  --cl-shadow-btn-hover: 0 21px 42px rgb(10 132 255 / .38);
  --cl-key: #36383d;
  --st-screen: var(--cl-surface);
}

/* ── 3. Ground: the tone bands are a whisper lighter, ruled by a hairline ────────────────────── */
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] [data-st-band="tone"] {
  background-color: rgb(255 255 255 / .025) !important;
}

/* ── 4. Header: the floating bar in charcoal ────────────────────────────────────────────────────── */
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] :is(nav#header, nav.site) {
  background-color: rgb(44 46 50 / .9) !important; border-color: rgb(255 255 255 / .07) !important;
  box-shadow: 0 18px 54px rgb(0 0 0 / .36), 0 1px 2px rgb(0 0 0 / .25) !important;
}
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] nav#header.site-glass.scrolled { box-shadow: 0 18px 54px rgb(0 0 0 / .4), 0 1px 2px rgb(0 0 0 / .25) !important; }
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] :is(nav#header, nav.site) :is(a, button):not(.hdr-cta):not(.hdr-login):not(.cta):not([class^="bg-"]):not([class*=" bg-"]):not(.site-grad):not(.dn-opt) { color: #cfd1d8 !important; }
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] :is(nav#header, nav.site) :is(a, button):not(.hdr-cta):not(.hdr-login):not(.cta):not([class^="bg-"]):not([class*=" bg-"]):not(.site-grad):not(.dn-opt):hover { color: #ffffff !important; }
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] :is(nav#header .site-dropdown > div, nav#header .site-dropdown > .site-glass, nav.site .dd-menu, nav.site [role="menu"]) {
  background-color: rgb(48 50 55 / .97) !important; border-color: rgb(255 255 255 / .08) !important;
  box-shadow: 0 24px 60px rgb(0 0 0 / .4), 0 2px 6px rgb(0 0 0 / .2) !important;
}
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] :is(nav#header #mobile-menu, #mmenu) { background-color: rgb(44 46 50 / .85) !important; }

/* The wordmark with light lettering, as on Night (Cloud uses the dark-lettered one). */
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"] img[src$="airllm_logo_dark.svg"],
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"] img[src$="airllm_logo_light.svg"] { content: url('images/airllm_logo_dark.svg'); }

/* ── 5. Secondary keys: a lighter charcoal key with a hairline ─────────────────────────────── */
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] :is(a, button):is(.glass-panel, .glass-card, .btn-ghost),
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] :is(a, button)[class*="border"]:is([class~="bg-white/3"], [class~="bg-white/5"], [class~="bg-white/10"], [class~="bg-white/20"], [class~="bg-white/[0.02]"]),
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] :is(a, button).bg-surface[class*="border"] {
  background-color: var(--cl-key) !important; border-color: rgb(255 255 255 / .1) !important; color: #ffffff !important;
  box-shadow: 0 10px 30px rgb(0 0 0 / .25) !important;
}
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] :is(a, button):is(.glass-panel, .glass-card, .btn-ghost):hover,
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] :is(a, button)[class*="border"]:is([class~="bg-white/3"], [class~="bg-white/5"], [class~="bg-white/10"], [class~="bg-white/20"], [class~="bg-white/[0.02]"]):hover,
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] :is(a, button).bg-surface[class*="border"]:hover {
  color: #ffffff !important; border-color: rgb(255 255 255 / .14) !important; box-shadow: 0 18px 40px rgb(0 0 0 / .35) !important;
}
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] :is(a, button).os-tab:not(.active) { background-color: var(--cl-key) !important; }

/* ── 6. Surfaces: charcoal cards, panels and screens floating over the page ───────────────── */
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] [data-st-card][data-st-card][data-st-card],
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] :is(div, article, li, section, aside, details):is(.glass-panel, .glass-card, .glass, .gcard, .hcard, .mc, .plan, .contact-card, .card-glass, .tblwrap):not(.rounded-full):not([data-st-own] *),
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] [data-st-panel][data-st-panel] {
  background-color: var(--cl-surface) !important; border-color: rgb(255 255 255 / .06) !important;
}
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] [data-st-card][data-st-card][data-st-card]:not([data-st-card-border]) { border-color: rgb(255 255 255 / .06) !important; }
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] [data-st-surface="screen"] {
  background-color: var(--cl-surface) !important; border-color: rgb(255 255 255 / .07) !important;
}

/* ── 7. Labels: the family tint, deeper on charcoal, with light text (icons keep Cloud's colours) */
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] [data-st-pill]:not(:has(+ :is(h1, h2, .st-headline))) {
  background-color: rgb(255 255 255 / .03) !important; background-image: linear-gradient(rgb(var(--cl-c) / .22), rgb(var(--cl-c) / .22)) !important;
  color: color-mix(in srgb, var(--cl-a) 40%, #ffffff) !important;
}
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] [data-st-pill]:not(:has(+ :is(h1, h2, .st-headline))) :not([data-st-ico], [data-st-ico] *) { color: color-mix(in srgb, var(--cl-a) 40%, #ffffff) !important; }
/* Monochrome brand marks (GitHub, Apple, X) are black on light grounds; on charcoal they read in white, as
   the brands draw them on dark. LinkedIn's deep blue is too dark on charcoal, so it takes its white "in" mark too.
   Other coloured brand marks keep their colour. */
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] :is(i, svg)[data-st-ico]:is([data-st-ico="github"], [data-st-ico="apple"], [data-st-ico="twitter"], [data-st-ico="linkedin"]) { --st-iv: #f2f2f7; --cl-g: #f2f2f7; }

/* ── 8. Forms, focus, footer ────────────────────────────────────────────────────────────────── */
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([data-st-own] *) {
  background-color: #1d1e21 !important; color: #ffffff !important; border-color: rgb(255 255 255 / .16) !important;
}
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"] :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline-color: #5aa9ff; }
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"][data-studio-page] footer { background-color: #27292c !important; }

/* ── 9. Shared widgets ──────────────────────────────────────────────────────────────────────── */
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"] .alina-root[data-ctx="public"] {
  --a-surface: #2c2e32; --a-raised: #232426; --a-raised2: #27292c;
  --a-line: rgb(255 255 255 / .08); --a-line2: rgb(255 255 255 / .16); --a-codebg: #17181b;
  --a-shadow: 0 32px 70px rgb(0 0 0 / .45), 0 4px 14px rgb(0 0 0 / .3);
}
html:where([data-theme="studio"][data-final="cloud"][data-cloud="dark"]) ::-webkit-scrollbar-track { background-color: #232426; }
html:where([data-theme="studio"][data-final="cloud"][data-cloud="dark"]) ::-webkit-scrollbar-thumb { background-color: #3f4146; }
html:where([data-theme="studio"][data-final="cloud"][data-cloud="dark"]) ::-webkit-scrollbar-thumb:hover { background-color: #575a60; }
html[data-theme="studio"][data-final="cloud"][data-cloud="dark"] ::selection { background-color: rgb(10 132 255 / .38); color: #ffffff; }