/* ============================================================
   vogella.com theme layer.

   The AI services page established the visual model for the site:
   a verification record. Mono keys carry the hard facts, hairlines
   separate fields, amber marks the live value, mint marks a
   confirmed item. This sheet lifts that model out of the services
   page and makes it the ground for every page.

   Two grounds, one structure:
     dark  (default) graphite ground, panels lifted out of it
     light (opt-in)  white sheet, panels tinted and ruled onto it

   In both, body text sits on the plainest surface and a panel is a
   box set against it. The light theme is not the dark one inverted
   card for card: white cards on a grey page put the reading text on
   the chrome, which is what made it feel washed out.

   The header bar and the nav stay graphite in both themes, so the site
   keeps one constant piece of chrome while the record surface changes
   underneath it. The light theme lifts the graphite a little, because
   the near-black of the dark theme reads as a hole against a white
   sheet; anything sitting on the chrome is therefore styled in fixed
   colours rather than tokens.

   Loaded first in header.ftl, and pulled into articles.css by
   @import so the tutorials share the same tokens.
   ============================================================ */

:root {
	color-scheme: dark;

	--bg: #0e1218;
	--surface: #161c26;
	--surface-2: #1c2431;
	--line: #28323f;
	--line-2: #384555;

	--text: #e7ecf3;
	--dim: #8996a8;
	--dim-2: #7a8798;   /* the quietest tier, still 4.6:1 on a panel */

	--accent: #ff8c42;         /* amber on text and hairlines */
	--accent-strong: #ff8c42;  /* amber as a fill */
	--accent-hover: #ffa76a;
	--on-accent: #10141a;      /* text on an amber fill */
	--mint: #4ec9a6;
	--danger: #e0645a;
	/* Brand colour at low opacity: selection, focus rings, quote marks. */
	--accent-wash: rgba(255, 140, 66, 0.24);
	--mint-wash: rgba(78, 201, 166, 0.16);

	--chrome: #0a0e14;         /* header bar, both themes */
	--chrome-2: #161c26;       /* nav dropdown panels */

	--shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
	--shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);

	--radius: 8px;
	--radius-lg: 12px;
}

:root[data-theme="light"] {
	color-scheme: light;

	/* The sheet, not a grey chrome with cards floating on it: text sits on
	   white the way it sits on the darkest ground in the dark theme, and a
	   panel is a tinted box ruled onto the sheet. */
	--bg: #ffffff;
	--surface: #f3f6f9;
	--surface-2: #e8edf3;
	--line: #ccd5e0;
	--line-2: #a4b0c0;

	--text: #131922;
	--dim: #515d6b;
	--dim-2: #616c7a;   /* the quietest tier, still 4.8:1 on a panel */

	--accent: #b8500b;
	--accent-strong: #ef6a12;
	--accent-hover: #d25a09;
	/* Graphite ink on the amber fill, as in the dark theme. White text on
	   this orange only reaches 3.1:1; the ink reaches 5.0:1 and keeps the
	   fill vivid instead of darkening it into brown. */
	--on-accent: #10141a;
	--mint: #15705a;
	--danger: #b3261e;
	--accent-wash: rgba(239, 106, 18, 0.22);
	--mint-wash: rgba(21, 112, 90, 0.12);

	--chrome: #141a23;
	--chrome-2: #222b38;

	--shadow: 0 8px 24px rgba(19, 25, 34, 0.10);
	--shadow-sm: 0 1px 3px rgba(19, 25, 34, 0.07);
}

/* ---------- Ground ---------- */
html { background: var(--bg); }

body {
	background: var(--bg);
	color: var(--text);
}

.main_container,
.content-wrapper,
#container,
#trainingcontainer {
	background: var(--bg);
}

.leftcol,
.rightcol,
#leftcol,
#rightcol,
#trainingleftcol,
#trainingrightcol {
	background: transparent;
	color: var(--dim);
}

hr {
	background: none;
	border: 0;
	border-top: 1px solid var(--line);
	height: 0;
	color: inherit;
}

::selection {
	background: var(--accent-wash);
	color: var(--text);
}

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

/* ---------- Panel: the shared card surface ---------- */
.ds-panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

/* ---------- Mono key: the label idiom of the record ---------- */
.ds-key {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dim-2);
}

/* ============================================================
   THEME SWITCH

   Rendered as a record field with two allowed values rather than
   a sun/moon icon: both options stay readable and the current one
   is inked amber. It sits on the graphite chrome in both themes,
   so its colours are fixed rather than tokenised.
   ============================================================ */
.theme-switch {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	font-family: var(--font-mono);
	font-size: 0.64rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}

.theme-switch__key {
	color: rgba(255, 255, 255, 0.32);
}

.theme-switch__opts {
	display: inline-flex;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 4px;
	overflow: hidden;
}

.theme-switch__opt {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 7px 11px;
	background: transparent;
	border: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.55);
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease;
}

.theme-switch__opt:last-child { border-right: 0; }

.theme-switch__opt:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.07);
}

.theme-switch__opt[aria-pressed="true"] {
	color: #ff8c42;
	background: rgba(255, 140, 66, 0.14);
}

.theme-switch__opt:focus-visible {
	outline: 2px solid #ff8c42;
	outline-offset: -2px;
}

/* In the mobile sidenav the switch stacks under the links. */
.sidenav .theme-switch {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 18px 20px 0;
	margin-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* The desktop header lays out logo | nav | switch. */
.headerpart > .theme-switch { margin-left: 12px; }