/* ==========================================================================
   CLOUDWRAITH - DESIGN TOKENS

   This is the retheme surface. Every colour, type size, space step and motion
   curve used anywhere on the site resolves back to a variable declared here.
   Change a value in this block and the whole site follows. Nothing downstream
   hard-codes a hex value.
   ========================================================================== */

:root {

	/* --- Surfaces --------------------------------------------------------- */
	--cw-void:         #04070A;  /* page background */
	--cw-panel:        #0B1210;  /* cards, post tiles */
	--cw-panel-raised: #121D19;  /* hover state, elevated surfaces */

	/* --- Accent ----------------------------------------------------------- */
	/* Green leads. It is the only accent that touches type, so a link, a
	   post title and a tag all read as the same signal. */
	--cw-accent:        #4BFF8B;  /* links, titles, tags, focus - 14.9:1 on void */
	--cw-accent-bright: #9DFFC4;  /* hover and emphasis only    - 17.4:1 on void */
	--cw-accent-deep:   #1FB45C;  /* fills that carry white text on top */

	/* Teal is retired from type. It survives only in glow and in the wraith
	   artwork, which is what keeps the two reading as one palette. */
	--cw-teal-ghost:   #2FE6C8;

	/* Back-compat: everything downstream was written against the teal names,
	   so they alias forward rather than being chased through six files. */
	--cw-teal:         var(--cw-accent);
	--cw-teal-bright:  var(--cw-accent-bright);
	--cw-green:        var(--cw-accent);

	/* --- Text ------------------------------------------------------------- */
	--cw-text-strong:  #FFFFFF;  /* headings, mono labels - 20.4:1 on void */
	--cw-text:         #F2F9F4;  /* body copy             - 19.1:1 on void */
	--cw-text-muted:   #B8CCC1;  /* meta, dates, captions - 11.9:1 on void */

	/* --- Lines and light -------------------------------------------------- */
	--cw-hairline:        rgba(75, 255, 139, 0.20);
	--cw-hairline-strong: rgba(75, 255, 139, 0.48);
	--cw-glow:            0 0 24px rgba(75, 255, 139, 0.22);
	--cw-glow-soft:       0 0 56px rgba(47, 230, 200, 0.10);
	--cw-glow-inset:      inset 0 1px 0 rgba(157, 255, 196, 0.07);

	/* Scrim that keeps text legible over full-bleed imagery. */
	--cw-scrim-v: linear-gradient(180deg,
		rgba(4, 7, 10, 0.10)  0%,
		rgba(4, 7, 10, 0.58) 48%,
		rgba(4, 7, 10, 0.93) 82%,
		var(--cw-void)      100%);
	--cw-scrim-h: linear-gradient(90deg,
		rgba(4, 7, 10, 0.93) 0%,
		rgba(4, 7, 10, 0.58) 55%,
		rgba(4, 7, 10, 0.10) 100%);
	/* --- Type ------------------------------------------------------------- */
	--cw-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
	--cw-font-body:    'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
	--cw-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	--cw-text-size:  1.125rem;   /* 18px body */
	--cw-leading:    1.7;
	--cw-measure:    68ch;       /* 68-72 characters of body copy */

	/* Fluid display scale. */
	--cw-step-1: clamp(1.25rem,  1.14rem + 0.48vw, 1.5rem);
	--cw-step-2: clamp(1.5rem,   1.30rem + 0.90vw, 2rem);
	--cw-step-3: clamp(1.875rem, 1.52rem + 1.60vw, 2.75rem);
	--cw-step-4: clamp(2.25rem,  1.70rem + 2.50vw, 3.75rem);
	--cw-step-5: clamp(2.75rem,  1.90rem + 3.90vw, 5.25rem);

	--cw-tracking-tight: -0.022em;
	--cw-tracking-mono:   0.09em;

	/* --- Space ------------------------------------------------------------ */
	--cw-space-2xs: 0.25rem;
	--cw-space-xs:  0.5rem;
	--cw-space-s:   0.75rem;
	--cw-space-m:   1.25rem;
	--cw-space-l:   2rem;
	--cw-space-xl:  3.5rem;
	--cw-space-2xl: 5.5rem;
	--cw-space-3xl: 8rem;

	/* --- Shape ------------------------------------------------------------ */
	--cw-radius-s: 4px;
	--cw-radius-m: 10px;
	--cw-radius-l: 16px;

	/* --- Motion ----------------------------------------------------------- */
	--cw-ease:      cubic-bezier(0.20, 0.70, 0.30, 1);
	--cw-dur-fast:  140ms;
	--cw-dur:       260ms;
	--cw-dur-slow:  520ms;

	/* --- Layout ----------------------------------------------------------- */
	--cw-container:        1240px;
	--cw-container-narrow:  760px;
	--cw-header-h:           68px;
}

/* Dark is the only mode. Declaring the scheme stops the UA painting white
   form controls and scrollbars over the top of it. */
:root {
	color-scheme: dark;
}