@import url('shared_cssvariables.css');
:root {
	--cc-font-family-base:
		'Ubuntu Sans', Times, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--alert-BG: #ef5350;

	--body-background: #ededed;

	--center-block-width: calc(var(--cc-max-width-content) + 2 * var(--main-padding));

	--main-padding: 1em;

	--primary-color: #0f03a3;

	--primary-light-color: #f3e0ff;

	--scrollbar-color: var(--cc-color-button-hover) var(--cc-color-brand-soft);

	--scrollbar-width: thin;
	--scrollbar-width-px-8: 8px;
	--scrollbar-width-px-6: 6px;

	--secondary-dark-color: #3835de;

	--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: #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 */
	/* In RGB format for easier use with opacity */
	--cc-color-brand: rgb(0, 178, 120);
	--cc-color-brand-dark: rgb(15, 108, 69);
	--cc-color-brand-medium: rgb(0, 255, 149);
	--cc-color-brand-light: rgb(75, 231, 166);

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

	--cc-color-label: var(--cc-color-brand-dark);

	/* ========== 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;

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

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

	/* ========== 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;

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

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

	/* ========== SPECIFIC TO COMPONENTS ========== */
	/* MODAL */
	--cc-color-modal-overlay: color-mix(in srgb, var(--cc-color-brand) 50%, transparent);
	/* BUTTON */
	--cc-color-button: #00b3792b;
	--cc-color-text-on-button: var(--cc-color-text-on-brand);
	--cc-color-text-on-button-hover: var(--cc-color-text-on-brand);
	--cc-color-button-hover: #4ae7a5;
	--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: #20855b;
	--cc-color-navButton-hover: transparent;
	--cc-color-text-on-navButton-hover: var(--cc-color-brand);
	--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);
	}
}