/*
 * TranCE design tokens (Material-inspired).
 * Single source of truth for colour, type, shape and elevation.
 * Brand colours are taken from the TranCE logo (#0131B7 / #1977F3).
 */

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/roboto-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("fonts/roboto-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Brand / primary */
	--tce-primary: #0131B7;
	--tce-primary-hover: #01299A;
	--tce-primary-active: #01217D;
	--tce-primary-rgb: 1, 49, 183;
	--tce-on-primary: #FFFFFF;
	--tce-primary-container: #E3EAFD;
	--tce-on-primary-container: #001A66;
	--tce-secondary: #1977F3;
	--tce-secondary-rgb: 25, 119, 243;

	/* Navigation drawer */
	--tce-nav-bg: #0A1F5C;
	--tce-nav-bg-2: #0131B7;
	--tce-nav-text: rgba(255, 255, 255, 0.78);
	--tce-nav-text-active: #FFFFFF;
	--tce-nav-item-hover: rgba(255, 255, 255, 0.08);
	--tce-nav-item-active: rgba(255, 255, 255, 0.16);

	/* Semantic */
	--tce-success: #2E7D32;
	--tce-success-container: #E6F4EA;
	--tce-warning: #ED8A00;
	--tce-warning-container: #FFF4E0;
	--tce-on-warning: #3D2500;
	--tce-error: #D32F2F;
	--tce-error-container: #FDECEA;
	--tce-info: #0288D1;
	--tce-info-container: #E1F3FC;

	/* Neutrals / surfaces */
	--tce-bg: #F5F7FB;
	--tce-surface: #FFFFFF;
	--tce-surface-variant: #F0F3F8;
	--tce-surface-hover: #F5F8FF;
	--tce-outline: #D6DCE5;
	--tce-outline-strong: #A9B3C2;
	--tce-divider: #E6EAF0;
	--tce-text: #111827;
	--tce-text-muted: #3F4756;
	--tce-text-disabled: #9AA3B2;

	/* Typography */
	--tce-font: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--tce-font-mono: "Roboto Mono", SFMono-Regular, Menlo, Consolas, monospace;
	--tce-fs-xs: 0.8125rem;   /* 13px — captions, badges */
	--tce-fs-sm: 0.9375rem;   /* 15px — table cells, helper text */
	--tce-fs-md: 1rem;        /* 16px — body, inputs, buttons */
	--tce-fs-lg: 1.125rem;    /* 18px — subtitles */
	--tce-fs-xl: 1.375rem;    /* 22px — card / section titles */
	--tce-fs-2xl: 1.75rem;    /* 28px — page titles */
	--tce-fs-3xl: 2.25rem;    /* 36px — display numbers */
	--tce-fw-regular: 400;
	--tce-fw-medium: 500;
	--tce-fw-bold: 700;
	--tce-lh: 1.5;

	/* Shape */
	--tce-radius-sm: 6px;
	--tce-radius-md: 8px;
	--tce-radius-lg: 12px;
	--tce-radius-pill: 999px;

	/* Elevation (Material) */
	--tce-elev-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10);
	--tce-elev-2: 0 2px 4px rgba(16, 24, 40, 0.06), 0 4px 8px rgba(16, 24, 40, 0.08);
	--tce-elev-3: 0 4px 8px rgba(16, 24, 40, 0.08), 0 12px 24px rgba(16, 24, 40, 0.12);
	--tce-elev-4: 0 8px 16px rgba(16, 24, 40, 0.10), 0 24px 48px rgba(16, 24, 40, 0.18);
	--tce-focus-ring: 0 0 0 3px rgba(var(--tce-secondary-rgb), 0.30);

	/* Motion */
	--tce-ease: cubic-bezier(0.2, 0, 0, 1);
	--tce-dur: 150ms;

	/* Map onto Bootstrap 5 variables (pages load BS 5.x) */
	--bs-primary: var(--tce-primary);
	--bs-primary-rgb: var(--tce-primary-rgb);
	--bs-success: var(--tce-success);
	--bs-success-rgb: 46, 125, 50;
	--bs-danger: var(--tce-error);
	--bs-danger-rgb: 211, 47, 47;
	--bs-warning: var(--tce-warning);
	--bs-warning-rgb: 237, 138, 0;
	--bs-info: var(--tce-info);
	--bs-info-rgb: 2, 136, 209;
	--bs-body-font-family: var(--tce-font);
	--bs-body-font-size: var(--tce-fs-md);
	--bs-body-color: var(--tce-text);
	--bs-body-bg: var(--tce-bg);
	--bs-border-color: var(--tce-outline);
	--bs-link-color: var(--tce-secondary);
	--bs-link-color-rgb: var(--tce-secondary-rgb);
	--bs-link-hover-color: var(--tce-primary);
	--bs-link-hover-color-rgb: var(--tce-primary-rgb);
	--bs-border-radius: var(--tce-radius-sm);
	--bs-font-sans-serif: var(--tce-font);

	/* Map onto Bootstrap 4 / SB Admin 2 variables */
	--blue: var(--tce-primary);
	--primary: var(--tce-primary);
	--success: var(--tce-success);
	--danger: var(--tce-error);
	--warning: var(--tce-warning);
	--info: var(--tce-info);
	--font-family-sans-serif: var(--tce-font);
}