/**
 * Camplus Design System
 * Reference: Start Bootstrap SB Admin 2
 * https://github.com/StartBootstrap/startbootstrap-sb-admin-2
 *
 * 16px root · Nunito · SB Admin 2 color palette
 * Use tokens via var(--cp-*) in camplus-theme.css — do not hardcode sizes in views.
 */

:root {
	/* ── Color: brand ── */
	--cp-color-primary: #4e73df;
	--cp-color-primary-dark: #2e59d9;
	--cp-color-primary-light: #bac8f3;
	--cp-color-success: #1cc88a;
	--cp-color-info: #36b9cc;
	--cp-color-warning: #f6c23e;
	--cp-color-danger: #e74a3b;

	/* ── Color: neutral (SB Admin 2 gray scale) ── */
	--cp-color-white: #ffffff;
	--cp-color-gray-100: #f8f9fc;
	--cp-color-gray-200: #eaecf4;
	--cp-color-gray-300: #dddfeb;
	--cp-color-gray-400: #d1d3e2;
	--cp-color-gray-500: #b7b9cc;
	--cp-color-gray-600: #858796;
	--cp-color-gray-700: #6e707e;
	--cp-color-gray-800: #5a5c69;
	--cp-color-gray-900: #3a3b45;

	/* ── Color: semantic ── */
	--cp-color-text: var(--cp-color-gray-600);
	--cp-color-text-strong: var(--cp-color-gray-800);
	--cp-color-text-muted: var(--cp-color-gray-500);
	--cp-color-border: #e3e6f0;
	--cp-color-surface: var(--cp-color-white);
	--cp-color-background: var(--cp-color-gray-100);

	/* ── Color: sidebar gradient ── */
	--cp-color-sidebar-start: #4e73df;
	--cp-color-sidebar-end: #224abe;

	/* ── Typography: family ── */
	--cp-font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* ── Typography: scale (1rem = 16px) ── */
	--cp-font-size-xs: 0.75rem;    /* 12px — badges, overlines, fine print */
	--cp-font-size-sm: 0.875rem;   /* 14px — table headers, nav, secondary */
	--cp-font-size-base: 1rem;     /* 16px — body, table cells, inputs, buttons */
	--cp-font-size-lg: 1.25rem;    /* 20px — portlet / card titles */
	--cp-font-size-xl: 1.75rem;    /* 28px — page titles */

	/* ── Typography: weight ── */
	--cp-font-weight-normal: 400;
	--cp-font-weight-semibold: 600;
	--cp-font-weight-bold: 700;
	--cp-font-weight-extrabold: 800;

	/* ── Typography: line-height ── */
	--cp-line-height-tight: 1.25;
	--cp-line-height-base: 1.5;
	--cp-line-height-relaxed: 1.625;

	/* ── Spacing (4px grid) ── */
	--cp-space-1: 0.25rem;
	--cp-space-2: 0.5rem;
	--cp-space-3: 0.75rem;
	--cp-space-4: 1rem;
	--cp-space-5: 1.25rem;
	--cp-space-6: 1.5rem;
	--cp-space-8: 2rem;

	/* ── Layout ── */
	--cp-header-height: 50px;
	--cp-global-message-height: 2.25rem;
	--cp-impersonation-bar-height: 2.5rem;
	--cp-sidebar-width: 235px;
	--cp-content-padding: var(--cp-space-6);

	/* ── Radius & shadow ── */
	--cp-radius: 0.25rem;
	--cp-radius-lg: 0.25rem;
	--cp-shadow-sm: 0 0.125rem 0.25rem 0 rgba(58, 59, 69, 0.1);
	--cp-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);

	/* ── Loader ── */
	--cp-loader-track: rgba(78, 115, 223, 0.2);
	--cp-loader-accent: var(--cp-color-primary);

	/* Legacy aliases (older theme rules) */
	--cp-primary: var(--cp-color-primary);
	--cp-primary-dark: var(--cp-color-primary-dark);
	--cp-primary-light: var(--cp-color-primary-light);
	--cp-secondary: var(--cp-color-gray-600);
	--cp-success: var(--cp-color-success);
	--cp-info: var(--cp-color-info);
	--cp-warning: var(--cp-color-warning);
	--cp-danger: var(--cp-color-danger);
	--cp-light: var(--cp-color-gray-100);
	--cp-dark: var(--cp-color-gray-800);
	--cp-body: var(--cp-color-text);
	--cp-border: var(--cp-color-border);
	--cp-font: var(--cp-font-family);
}

/* Ensure rem math is predictable */
html {
	font-size: 16px;
}

html,
body {
	font-family: var(--cp-font-family);
	font-size: var(--cp-font-size-base);
	font-weight: var(--cp-font-weight-normal);
	line-height: var(--cp-line-height-base);
	color: var(--cp-color-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}