/* ==========================================================================
   Common Strangers — Design tokens
   Colour, type scale, bevel, spacing. The single source of design truth.
   Mirrors claude.md §9 / instructions.md §8. Change values here, nowhere else.
   ========================================================================== */

/* --- JetBrains Mono (self-hosted variable font). One file covers every weight
   400–800 the interface uses, plus Greek glyphs (see claude.md §8). --- */
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 100 800;   /* variable axis */
	font-display: swap;
	src: url('../fonts/JetBrainsMono-Variable.woff2') format('woff2-variations');
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: italic;
	font-weight: 100 800;
	font-display: swap;
	src: url('../fonts/JetBrainsMono-Italic-Variable.woff2') format('woff2-variations');
}

:root {
	/* --- Colour (derived from the logo) --- */
	--ink:         #0D0D0F; /* desktop / page background */
	--body:        #141416; /* window interior surface */
	--frame:       #26262B; /* window chrome / dividers */
	--paper:       #F4F1EA; /* primary text on dark */
	--muted:       #8A8A90; /* secondary text, idle states */
	--faint:       #5A5A60; /* tertiary text */
	--pink:        #E0447E; /* active window bar, primary CTA */
	--red:         #D93A3A; /* close button, errors */
	--orange:      #EE9F27; /* accent, links, active subtopic */
	--bevel-light: #55555F; /* raised edge (top-left) */
	--bevel-dark:  #050506; /* raised edge (bottom-right) */

	/* --- Typography --- */
	--font: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;

	/* Type scale — rem-based clamp(); never fixed px on type. 11px min anywhere. */
	--fs-display: clamp(1.75rem, 1.15rem + 2.6vw, 3rem);       /* 28 → 48 · 800 */
	--fs-title:   clamp(1.375rem, 1.05rem + 1.4vw, 2rem);      /* 22 → 32 · 800 */
	--fs-section: clamp(1rem, 0.91rem + 0.4vw, 1.25rem);       /* 16 → 20 · 700 caps */
	--fs-heading: clamp(0.9375rem, 0.89rem + 0.2vw, 1.0625rem);/* 15 → 17 · 700 */
	--fs-wintitle:clamp(0.8125rem, 0.75rem + 0.28vw, 0.9375rem);/* 13 → 15 · 700 caps */
	--fs-body:    clamp(0.875rem, 0.83rem + 0.2vw, 1rem);      /* 14 → 16 · 400 */
	--fs-data:    clamp(0.8125rem, 0.79rem + 0.14vw, 0.875rem);/* 13 → 14 · 400 */
	--fs-label:   clamp(0.6875rem, 0.665rem + 0.1vw, 0.75rem); /* 11 → 12 · 500 caps */
	--fs-micro:   clamp(0.6875rem, 0.665rem + 0.09vw, 0.75rem);/* 11 → 12 · 400 */

	/* Line-height + tracking pairs (mono runs wide → tighter than a sans). */
	--lh-display: 1.05;  --tr-display: 0.01em;
	--lh-title:   1.15;  --tr-title:   0.01em;
	--lh-section: 1.2;   --tr-section: 0.12em;
	--lh-wintitle:1.0;   --tr-wintitle:0.08em;
	--lh-body:    1.7;   --tr-body:    0;
	--lh-data:    1.5;   --tr-data:    0;
	--lh-label:   1.4;   --tr-label:   0.15em;

	--measure: 68ch; /* cap long body copy at ~68–72 chars */

	/* --- Bevel (the signature) --- */
	--bevel-width: 2px;
	--bevel-raised:
		inset var(--bevel-width) var(--bevel-width) 0 0 var(--bevel-light),
		inset calc(-1 * var(--bevel-width)) calc(-1 * var(--bevel-width)) 0 0 var(--bevel-dark);
	--bevel-pressed:
		inset var(--bevel-width) var(--bevel-width) 0 0 var(--bevel-dark),
		inset calc(-1 * var(--bevel-width)) calc(-1 * var(--bevel-width)) 0 0 var(--bevel-light);

	/* --- Spacing (8px base) --- */
	--sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
	--sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
	--sp-7: 3rem;     --sp-8: 4rem;

	/* --- Chunky scrollbar (our palette): dark frame face + our bevel, dark
	   channel, light arrows. Reads like the window chrome, cohesive. --- */
	--scrollbar-size: 20px;
	--sb-face:  #26262B; /* thumb + button face (= --frame) */
	--sb-track: #0D0D0F; /* channel behind the thumb (= --ink) */
	--sb-hi:    #55555F; /* raised highlight (top-left, = --bevel-light) */
	--sb-sh:    #050506; /* raised shadow (bottom-right, = --bevel-dark) */
	--sb-bevel-raised:
		inset 2px 2px 0 0 var(--sb-hi),
		inset -2px -2px 0 0 var(--sb-sh);
	--sb-bevel-pressed:
		inset 2px 2px 0 0 var(--sb-sh),
		inset -2px -2px 0 0 var(--sb-hi);

	/* --- Window system --- */
	--titlebar-h: 30px;
	--window-shadow:        0 4px 18px rgba(0, 0, 0, 0.55); /* separates overlapping windows */
	--window-shadow-active: 0 10px 30px rgba(0, 0, 0, 0.7);
	--topbar-h: 64px;    /* floating top-nav strip height (offsets default windows) */
	--leftcol-w: 212px;  /* left menu column width */
	--agenda-bar-h: 56px; /* prominent announcement ticker */
	--collapsed-brand-w: 116px; /* corner logo tile when the menu is collapsed */
	--z-window-base: 100;
}