/* OTR design tokens (from designs/style-guide-*.pdf)
 * Defined globally so shared components (footer, shortcodes, UM pages) can rely on them anywhere.
 */

:root {
	/* Palette */
	--otr-color-brand-100: #E1F0FF;
	--otr-color-brand-200: #C3D4E5;
	--otr-color-brand-300: #99C2EB;
	--otr-color-brand-400: #4D94DC;
	--otr-color-brand-500: #0066CC;
	--otr-color-brand-600: #005BB8;
	--otr-color-brand-700: #004C99;

	--otr-color-neutral-100: #F8F9FA;
	--otr-color-neutral-200: #E5E7EB;
	--otr-color-neutral-300: #6B7280;
	--otr-color-neutral-400: #4B5563;
	--otr-color-neutral-500: #1A1A1A;

	--otr-color-white: #FFFFFF;
	--otr-color-green-500: #10B981;
	--otr-color-amber-500: #F59E0B;
	--otr-color-red-500: #EF4444;

	/* Surface tokens */
	--otr-surface-bg: var(--otr-color-white);
	--otr-surface-bg-alt: var(--otr-color-neutral-100);
	--otr-surface-bg-dark: var(--otr-color-neutral-500);

	/* Typography color tokens */
	--otr-text-primary: var(--otr-color-neutral-500);
	--otr-text-secondary: var(--otr-color-neutral-400);
	--otr-text-tertiary: var(--otr-color-neutral-300);
	--otr-text-on-dark: var(--otr-color-white);

	/* Border tokens */
	--otr-border-default: var(--otr-color-neutral-200);
	--otr-border-dark: var(--otr-color-neutral-300);
	--otr-border-very-dark: var(--otr-color-neutral-500);

	/* Alert tokens */
	--otr-alert-error: var(--otr-color-red-500);
	--otr-alert-success: var(--otr-color-green-500);
	--otr-alert-warning: var(--otr-color-amber-500);

	/* Button tokens */
	--otr-button-primary-bg: var(--otr-color-brand-500);
	--otr-button-primary-bg-hover: var(--otr-color-brand-600);
	--otr-button-primary-bg-active: var(--otr-color-brand-700);
	--otr-button-primary-bg-disabled: var(--otr-color-brand-400);
	--otr-button-primary-label: var(--otr-color-white);
	--otr-button-primary-outline: var(--otr-color-brand-500);
	--otr-button-primary-focus-outline: var(--otr-color-brand-500);

	--otr-button-secondary-outline: var(--otr-color-brand-500);
	--otr-button-secondary-label: var(--otr-color-brand-500);
	--otr-button-secondary-bg-hover: var(--otr-color-brand-500);
	--otr-button-secondary-label-hover: var(--otr-color-white);
	--otr-button-secondary-bg-active: var(--otr-color-brand-700);
	--otr-button-secondary-focus-outline: var(--otr-color-brand-500);
	--otr-button-secondary-outline-disabled: var(--otr-color-brand-300);
	--otr-button-secondary-label-disabled: var(--otr-color-brand-300);

	/* Tabs tokens */
	--otr-tab-text: var(--otr-color-neutral-400);
	--otr-tab-text-hover: var(--otr-color-brand-500);
	--otr-tab-text-active: var(--otr-color-brand-500);
	--otr-tab-border-active: var(--otr-color-brand-500);

	/* Typography scale (from designs/style-guide-typography.pdf) */
	--otr-font-size-h1: 2.6rem;
	--otr-font-size-h2: 2rem;
	--otr-font-size-h3: 1.25rem;
	--otr-font-size-h4: 1.125rem;
	--otr-font-size-body: 1rem;
	--otr-font-size-meta: 0.87rem;
	--otr-font-size-meta-sm: 0.75rem;

	/* Typescale line-heights (from Figma Typescale screen) */
	--otr-line-height-h1: 1.6;
	--otr-line-height-h2: 1.6;
	--otr-line-height-h3: 1.6;
	--otr-line-height-h4: 1.66;
	--otr-line-height-body: 1.6;
	--otr-line-height-meta: 1.66;
	--otr-line-height-meta-sm: 1.33;

	/* Font weights */
	--otr-font-weight-regular: 400;
	--otr-font-weight-semibold: 600;
	--otr-font-weight-bold: 700;

	/* Font family (Figma uses Inter). */
	--otr-font-family-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* Radii + spacing (kept minimal until confirmed in PDFs) */
	--otr-radius-xs: 4px;
	--otr-radius-sm: 6px;
	--otr-radius-md: 8px;
	--otr-radius-lg: 16px;

	/* Overlays */
	--otr-overlay-on-dark-10: rgba(255, 255, 255, 0.1);
	--otr-space-2: 8px;
	--otr-space-3: 12px;
	--otr-space-4: 16px;
	/* Figma uses 15px for padding-md in cards. */
	--otr-space-5: 15px;
	--otr-space-6: 24px;
}