:root {
	--cc-font-family-base:
		'Ubuntu Sans', Times, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	/* → rename to: --cc-font-family-base */

	--alert-BG: #ef5350;
	/* → closest token: --cc-color-danger (or define --cc-color-alert) */

	--body-background: #ededed;
	/* → closest token: --cc-color-bg */

	--center-block-width: calc(var(--cc-max-width-content) + 2 * var(--main-padding));
	/* layout-specific, could be based on --cc-max-width-content */

	--main-padding: 1em;

	--primary-color: #0f03a3;
	/* → conceptually: --cc-color-brand (you'll swap to your green when ready) */
	--primary-light-color: #f3e0ff;
	/* → closest token: --cc-color-brand-soft */

	--scrollbar-color: var(--cc-color-button-hover) var(--cc-color-brand-soft);
	/* → could base on: var(--cc-color-brand) var(--cc-color-bg) */
	--scrollbar-width: thin;
	/* no direct token, fine as-is */

	--secondary-color: #4caf50;
	/* → closest token: --cc-color-success */
	--secondary-dark-color: #3835de;
	/* → closest token: --cc-color-info */

	--cc-table-side-border: 1px solid rgba(125, 125, 125, 0.2);
	--cc-table-width: 80rem;
	--cc-tr-even-bgColor: white;
	/* --cc-tr-odd-bgColor: var(--cc-color-brand-soft); */
	--cc-tr-odd-bgColor: #f9f9f9;
	--cc-tr-hover-bgColor: var(--cc-color-brand-soft-strong);
	--cc-th-color: var(--cc-color-text);

	/* NEW VARS REFACTOR */
	/* NEW VARS REFACTOR */
	/* NEW VARS REFACTOR */
	/* NEW VARS REFACTOR */
	/* NEW VARS REFACTOR */

	/* ========== BRAND COLORS ========== */
	/* From your logo */
	--cc-color-brand: #1e0de2;
	--cc-color-brand-dark: #0f03a3;
	--cc-color-brand-light: #0079ff;

	/* Semantic tints based on brand */
	--cc-color-brand-soft: #dcedfd;
	/* subtle backgrounds / badges */
	--cc-color-brand-soft-strong: #bfddf9;

	/* ========== NEUTRALS ========== */
	/* app background */
	--cc-color-bg: #fefefe;
	/* alt background / sections */
	--cc-color-bg-alt: #ffffff;
	/* cards, panels */
	--cc-color-surface: #ffffff;

	--cc-color-border-subtle: #dde3ea;
	--cc-color-border-strong: #b3becd;

	--cc-color-text: #112724;
	/* main text */
	--cc-color-text-muted: #6b7280;
	/* secondary text */
	--cc-color-text-soft: #9ca3af;
	--cc-color-text-soft: #ededed;
	/* helper / placeholder */

	--cc-color-text-on-brand: #ffffff;
	/* text on solid brand backgrounds */

	/* ========== STATUS COLORS ========== */
	--cc-color-success: #0f9e5e;
	--cc-color-success-soft: #dcfce7;

	--cc-color-warning: #ffc107;
	--cc-color-warning-soft: #fef3c7;
	--cc-color-warning-dark: #856404;

	--cc-color-danger: #dc2626;
	--cc-color-danger-soft: #fee2e2;
	--cc-color-danger-dark: #991b1b;

	--cc-color-info: #2563eb;
	--cc-color-info-soft: #dbeafe;

	/* Focus ring (meets WCAG with white or dark bg) */
	--cc-color-focus: #2563eb;

	/* ========== TYPOGRAPHY ========== */
	/* You already import Ubuntu, so use it as base */
	--cc-font-family-base:
		'Ubuntu', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--cc-font-family-heading: var(--cc-font-family-base);
	--cc-font-family-mono:
		ui-monospace, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

	/* Font sizes (rem for scalability) */
	--cc-font-size-xs: 0.75rem;
	/* 12px */
	--cc-font-size-sm: 0.875rem;
	/* 14px */
	--cc-font-size-md: 1rem;
	/* 16px */
	--cc-font-size-lg: 1.125rem;
	/* 18px */
	--cc-font-size-xl: 1.25rem;
	/* 20px */
	--cc-font-size-2xl: 1.5rem;
	/* 24px */
	--cc-font-size-3xl: 1.875rem;
	/* 30px */

	/* Line heights */
	--cc-line-height-tight: 1.1;
	--cc-line-height-normal: 1.5;
	--cc-line-height-relaxed: 1.7;

	/* Font weight helpers */
	--cc-font-weight-regular: 400;
	--cc-font-weight-medium: 500;
	--cc-font-weight-semibold: 600;
	--cc-font-weight-bold: 700;

	--cc-text-max-width-normal: 40rem;
	--cc-text-max-width-narrow: 30rem;
	--cc-text-max-width-wide: 50rem;

	/* ========== SPACING ========== */
	--cc-space-1: 0.25rem;
	/* 4px */
	--cc-space-2: 0.5rem;
	/* 8px */
	--cc-space-3: 0.75rem;
	/* 12px */
	--cc-space-4: 1rem;
	/* 16px */
	--cc-space-5: 1.25rem;
	/* 20px */
	--cc-space-6: 1.5rem;
	/* 24px */
	--cc-space-8: 2rem;
	/* 32px */
	--cc-space-10: 2.5rem;
	/* 40px */

	/* ========== RADII & SHADOWS ========== */
	--cc-radius-sm: 0.25rem;
	--cc-radius-md: 0.5rem;
	--cc-radius-lg: 0.75rem;
	--cc-radius-xl: 1rem;
	--cc-radius-pill: 999px;

	--cc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--cc-shadow-md: 0 4px 10px rgba(15, 23, 42, 0.12);
	--cc-shadow-lg: 0 12px 30px rgba(15, 23, 42, 0.18);

	/* ========== TRANSITIONS ========== */
	--cc-transition-fast: 120ms ease-out;
	--cc-transition-normal: 180ms ease-out;
	--cc-transition-slow: 240ms ease-out;

	/* ========== LAYOUT BOUNDS ========== */
	--cc-max-width-content: min(96vw, 1050px);
	--cc-header-height: 4rem;

	/* ========== SPECIFIC TO COMPONENTS ========== */
	/* MODAL */
	--cc-color-modal-overlay: var(--cc-color-brand);
	/* BUTTON */
	--cc-color-button: #005cb32b;
	--cc-color-text-on-button: var(--cc-color-text);
	--cc-color-button-hover: #4a84e7;
	--cc-font-size-button: var(--cc-font-size-lg);
	/* HEADINGS */
	--cc-weight-heading: 350;
	/* MAIN NAVBAR */
	--cc-color-navButton: transparent;
	--cc-color-text-on-navButton: var(--cc-color-brand);
	--cc-color-navButton-hover: transparent;
	--cc-color-text-on-navButton-hover: var(--cc-color-brand-light);
	--cc-font-size-navButton: var(--cc-font-size-lg);

	/* DARK THEME — using data-theme so you can toggle in Svelte easily */
	[data-theme='dark'] {
		--cc-color-bg: #020617;
		/* slate-950-ish */
		--cc-color-bg-alt: #020617;
		--cc-color-surface: #0f172a;
		/* slate-900 */
		--cc-color-border-subtle: #1e293b;
		--cc-color-border-strong: #334155;

		--cc-color-text: #f9fafb;
		--cc-color-text-muted: #9ca3af;
		--cc-color-text-soft: #6b7280;

		/* Brand pops a bit lighter in dark mode */
		--cc-color-brand: #4be7a6;
		--cc-color-brand-dark: #00b278;
		--cc-color-brand-light: #7ff0c3;
		--cc-color-brand-soft: rgba(75, 231, 166, 0.12);

		/* On-brand text should not be pure white on very bright brand in dark mode → slightly darker */
		--cc-color-text-on-brand: #022c22;

		--cc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.6);
		--cc-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.75);
		--cc-shadow-lg: 0 20px 45px rgba(15, 23, 42, 0.9);
	}
}