/* OHC design tokens — single source of truth for color, type, spacing.
   Reused across every page. Theme-aware: light default, dark override. */

:root {
	/* Brand */
	--ohc-ink:      #0a1a24;   /* deep slate — authority */
	--ohc-panel:    #0e2531;   /* dark section background */
	--ohc-paper:    #e3edee;   /* cool tinted band — deliberately visible against surface */
	--ohc-surface:  #ffffff;
	--ohc-line:     #cfdedf;   /* hairlines */
	--ohc-muted:    #5b6e72;   /* secondary text */
	--ohc-acc:      #10a88e;   /* trust teal — button fills, accents on dark */
	--ohc-acc-2:    #34d0b4;   /* bright teal — accents on dark surfaces only */
	--ohc-acc-text: #0a6457;   /* darker teal — accent TEXT/links on light (5.9:1 on --ohc-paper, WCAG AA with margin) */

	/* Type — one family (IBM Plex Sans) carries both display and body, weight
	   alone marks the jump from heading to text; Plex Mono is reserved for
	   hashes and other literal data, never decoration. */
	--ohc-font-display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ohc-font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--ohc-font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Type scale — 6 text steps + 2 display steps. Every font-size in the
	   system resolves to one of these; nothing is set in raw px. The jump
	   between steps is large enough to be read as hierarchy, not noise. */
	--ohc-fs-2xs:  11.5px; /* dense tabular data and status pills only */
	--ohc-fs-xs:   13px;   /* legal, disclaimers, captions */
	--ohc-fs-sm:   14px;   /* meta, labels, secondary */
	--ohc-fs-base: 16px;   /* body copy */
	--ohc-fs-md:   18px;   /* lead-in, section sub */
	--ohc-fs-lg:   21px;   /* card heading */
	--ohc-fs-xl:   25px;   /* minor section heading */
	--ohc-fs-h2:   clamp(27px, 3.2vw, 34px);
	--ohc-fs-h1:   clamp(32px, 5.2vw, 56px);
	--ohc-fs-display: clamp(36px, 5.4vw, 62px);   /* home hero only */

	/* Spacing — 4px base. */
	--ohc-s-1: 4px;  --ohc-s-2: 8px;  --ohc-s-3: 12px; --ohc-s-4: 16px;
	--ohc-s-5: 24px; --ohc-s-6: 32px; --ohc-s-7: 48px; --ohc-s-8: 64px;
	--ohc-s-9: 96px;

	/* Radii — three, by role. */
	--ohc-r-sm:   8px;    /* inputs, chips, small tiles */
	--ohc-r-md:   14px;   /* cards, panels */
	--ohc-r-pill: 999px;
	--ohc-radius: var(--ohc-r-md);   /* legacy alias */

	/* Elevation — two, both with offset + soft blur. */
	--ohc-shadow-sm: 0 1px 2px rgba(10,26,36,.04), 0 2px 8px rgba(10,26,36,.06);
	--ohc-shadow-lg: 0 4px 12px rgba(10,26,36,.06), 0 16px 40px rgba(10,26,36,.10);

	--ohc-maxw: 1140px;
	--ohc-pad:  22px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ohc-paper:   #0f232e;
		--ohc-surface: #0c1c26;
		--ohc-line:    #1e3743;
		--ohc-muted:   #9db2b2;
		--ohc-ink:     #eaf3f3;
		--ohc-acc-text: #34d0b4; /* bright teal reads better on dark ground */
	}
}
:root[data-theme="dark"] {
	--ohc-paper:   #0f232e;
	--ohc-surface: #0c1c26;
	--ohc-line:    #1e3743;
	--ohc-muted:   #9db2b2;
	--ohc-ink:     #eaf3f3;
	--ohc-acc-text: #34d0b4;
}