.graha-ui {
	/* Approved Graha Selang brand tokens: industrial hose/engineering supplier identity. */
	--graha-font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--graha-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
	--graha-type-xs: 0.75rem;
	--graha-type-sm: 0.875rem;
	--graha-type-md: 1rem;
	--graha-type-lg: 1.125rem;
	--graha-type-xl: 1.25rem;
	--graha-type-2xl: clamp(1.5rem, 2vw, 1.875rem);
	--graha-type-3xl: clamp(1.875rem, 4vw, 2.5rem);
	--graha-type-4xl: clamp(2.25rem, 6vw, 3.5rem);
	--graha-weight-regular: 400;
	--graha-weight-medium: 500;
	--graha-weight-semibold: 600;
	--graha-weight-bold: 700;
	--graha-leading-tight: 1.15;
	--graha-leading-copy: 1.65;
	--graha-tracking-wide: 0.08em;
	--graha-space-0: 0;
	--graha-space-1: 0.25rem;
	--graha-space-2: 0.5rem;
	--graha-space-3: 0.75rem;
	--graha-space-4: 1rem;
	--graha-space-5: 1.5rem;
	--graha-space-6: 2rem;
	--graha-space-7: 3rem;
	--graha-space-8: 4rem;
	--graha-space-9: 6rem;
	--graha-page-gutter: clamp(1rem, 2.5vw, 2rem);
	--graha-content-narrow: 50rem;
	--graha-content-max: 80rem;
	--graha-content-wide: 90rem;
	--graha-card-min: 16rem;
	--graha-header-identity-min: 11rem;
	--graha-logo-max: 12.5rem;
	/* CSS custom properties cannot be consumed by media conditions; tests guard these approved literals. */
	--graha-breakpoint-small: 36rem;
	--graha-breakpoint-navigation: 68rem;
	--graha-breakpoint-wide: 64rem;

	/* Identity: Graha blue + deep navy + white + industrial neutral grays. */
	--graha-color-primary: #0000b8;
	--graha-color-primary-hover: #000091;
	--graha-color-primary-dark: #1a2670;
	--graha-color-primary-tint: #eaecf9;
	--graha-color-on-primary: #ffffff;
	--graha-color-text: #1b2230;
	--graha-color-muted: #565f6e;
	--graha-color-border: #d6dae3;
	--graha-color-border-strong: #b7bdc9;
	--graha-color-surface: #ffffff;
	--graha-color-surface-subtle: #f4f5f8;
	--graha-color-surface-sunken: #eceef3;
	--graha-color-inverse: #ffffff;
	--graha-color-inverse-muted: #c7cbe6;

	/* Semantic surface roles: derived aliases only, never a second brand palette. */
	--graha-color-canvas: var(--graha-color-surface);
	--graha-color-surface-soft: var(--graha-color-surface-subtle);
	--graha-color-surface-brand-soft: var(--graha-color-primary-tint);
	--graha-color-surface-raised: var(--graha-color-surface);
	--graha-color-surface-contrast: var(--graha-color-primary-dark);
	--graha-color-border-brand-soft: color-mix(in srgb, var(--graha-color-primary) 24%, var(--graha-color-border));
	--graha-color-brand-glow: rgb(0 0 184 / 0.08);
	--graha-color-on-canvas: var(--graha-color-text);
	--graha-color-on-surface: var(--graha-color-text);
	--graha-color-on-surface-muted: var(--graha-color-muted);
	--graha-color-on-contrast: var(--graha-color-inverse);
	--graha-color-on-contrast-muted: var(--graha-color-inverse-muted);

	--graha-border-width: 1px;
	--graha-radius-sm: 0.25rem;
	--graha-radius-md: 0.5rem;
	--graha-radius-lg: 0.75rem;
	--graha-radius-xl: 1.25rem;
	--graha-shadow-soft: 0 0.5rem 1.5rem rgb(15 23 42 / 0.08);
	--graha-shadow-elevated: 0 1rem 2.5rem rgb(10 15 45 / 0.18);
	--graha-control-min: 2.75rem;
	--graha-link-underline-thickness: 0.08em;
	--graha-link-underline-offset: 0.22em;
	--graha-media-ratio-default: 16 / 9;
	--graha-z-skip-link: 100000;
	--graha-focus-width: 0.1875rem;
	--graha-focus-offset: 0.1875rem;
	--graha-focus-color: var(--graha-color-primary);
	--graha-focus-ring: 0 0 0 0 transparent;
	--graha-motion-fast: 160ms;
	--graha-motion-standard: 220ms;
	--graha-motion-reduced: 0.01ms;
	--graha-motion-ease: ease;
}