@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	/* ── Existing Jinja variables ── */
	--color-primary-dark: #E3180D;
	--color-primary: #F3372D;
	--color-light: #F3F3F3;
	--color-primary-foreground: #FFFFFF;
	--color-secondary: #272727;
	--color-selected: #DFDFDF;
	--color-success: #1ED030;
	--color-warning: #FFA800;
	--color-error: #EB4236;
	--color-hover-light: rgba(243, 55, 45, 0.05);
	--color-hover-regular: rgba(243, 55, 45, 0.10);
	--color-hover-medium: rgba(243, 55, 45, 0.15);
	--color-hover-dark: rgba(0, 0, 0, 0.20);
	--color-neutral-darkest: #363740;
	--color-neutral-darker: #3F4049;
	--color-neutral-dark: #525252;
	--color-neutral-grey: #707070;
	--color-neutral-light: #BABABA;
	--color-neutral-lighter: #DDDDDD;
	--color-neutral-white: #FFFFFF;
	--color-text-primary: #363740;
	--color-text-secondary: #525252;
	--color-text-muted: #707070;
	--color-text-disabled: #BABABA;
	--color-text-inverse: #FFFFFF;
	--color-background: #FFFFFF;
	--color-background-regular: #EDEDED;
	--color-background-medium: rgba(243, 55, 45, 0.10);
	--color-background-semi-dark: #F4F6FA;
	--color-background-dark: #F4F6FA;
	--color-border: #DDDDDD;
	--color-border-regular: #929292;
	--color-border-medium: #707070;
	--color-border-dark: #525252;
	--color-border-selected: #F3372D;
	--color-button-primary-bg: #F3372D;
	--color-button-primary-fg: #FFFFFF;
	--color-button-primary-hover: #F55A52;
	--color-button-primary-active: #E3180D;
	--color-button-primary-disabled: #DDDDDD;
	--color-button-outlined-bg: transparent;
	--color-button-outlined-fg: #F3372D;
	--color-button-outlined-border: #DDDDDD;
	--color-button-outlined-hover-border: #F3372D;
	--color-button-outlined-active-border: #E3180D;
	--color-button-outlined-disabled-border: #DDDDDD;
	--color-button-outlined-disabled-fg: #BABABA;
	--color-button-text-fg: #F3372D;
	--color-button-text-hover-fg: #F55A52;
	--color-button-text-active-border: #E3180D;
	--color-button-text-disabled-fg: #BABABA;
	--color-ring: #F3372D;

	/* ── Added from IdeaBoxes (missing in Jinja) ── */
	--color-primary-hover: #F55A52;
	--color-primary-active: #E3180D;
	--color-primary-disabled: #DDDDDD;
	--color-secondary-foreground: #FFFFFF;
	--color-secondary-hover: #3F3F3F;
	--color-secondary-active: #1A1A1A;
	--color-secondary-disabled: #DDDDDD;
	--color-tertiary-foreground: #363740;
	--color-tertiary-hover: #E8E8E8;
	--color-tertiary-active: #D5D5D5;
	--color-tertiary-disabled: #F9F9F9;
	--color-accent: #FF6B2B;
	--color-accent-foreground: #363740;
	--color-accent-hover: #F3F3F3;
	--color-accent-active: #E8E8E8;
	--color-accent-disabled: #FFFFFF;
	--color-success-foreground: #FFFFFF;
	--color-error-foreground: #FFFFFF;
	--color-warning-foreground: #212529;
	--color-info: #0dcaf0;
	--color-info-foreground: #212529;
	--color-text-tertiary: #707070;
	--color-surface: #FFFFFF;
	--color-surface-hover: #F9F9F9;
	--color-muted: #F3F3F3;
	--color-muted-foreground: #8A8A8A;
	--color-card: #FFFFFF;
	--color-card-foreground: #363740;
	--color-popover: #FFFFFF;
	--color-popover-foreground: #363740;
	--color-button-secondary-bg: #272727;
	--color-button-secondary-fg: #FFFFFF;
	--color-button-secondary-hover: #3F3F3F;
	--color-button-secondary-active: #1A1A1A;
	--color-button-secondary-disabled: #DDDDDD;
	--color-button-ghost-hover-bg: #F3F3F3;
	--color-button-ghost-active-bg: #E8E8E8;
	--color-button-danger-bg: #EB4236;
	--color-button-danger-fg: #FFFFFF;
	--color-button-danger-hover: #D63629;
	--color-button-danger-active: #C0301F;
	--color-border-hover: #BABABA;
	--color-input: #FFFFFF;
	--color-input-border: #DDDDDD;
	--color-input-focus: #F3372D;
	--color-group-1: #F3372D;
	--color-group-2: #dc2626;
	--color-group-3: #059669;
	--color-group-4: #f3372d;
	--color-group-5: #f59e0b;
	--color-group-6: #06b6d4;
	--color-group-7: #f97316;
	--color-group-8: #db2777;
	--color-group-9: #6b7280;
	--color-group-10: #65a30d;
	--color-group-11: #4f46e5;
	--color-group-12: #e11d48;
	--color-group-13: #0284c7;
	--color-group-14: #047857;
	--color-group-15: #c026d3;
	--color-group-16: #9f1239;
	--color-group-17: #475569;
	--color-group-18: #ca8a04;
	--color-group-19: #71717a;
	--color-group-20: #0d9488;
	--color-group-21: #0ea5e9;
	--color-group-22: #ea580c;
	--color-group-23: #4d7c0f;
	--color-group-24: #52525b;

	/* ── Typography ── */
	--font-primary: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
	--font-secondary: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
	--font-display: 'Montserrat', ui-serif, Georgia, serif;
	--font-monospace: 'Montserrat', ui-monospace, SFMono-Regular, monospace;
	--font-accent: 'Montserrat', ui-serif, Georgia, serif;
	--text-base: 16px;
	--text-caption: 0.75rem;
	--text-small: 0.875rem;
	--text-body: 1rem;
	--text-lead: 1.125rem;
	--text-subheading: 1.25rem;
	--text-heading: 1.5rem;
	--text-title: 2rem;
	--text-display: 2.5rem;
	--text-hero: 3rem;

	/* Dark Mode Overrides */
	@media (prefers-color-scheme: dark) {
		/* ── Existing Jinja dark variables ── */
		--color-primary-dark: #E3180D;
		--color-primary: #F3372D;
		 	--color-light: #272727;
					--color-background: #272727;
		--color-primary-foreground: #FFFFFF;
		--color-secondary: #272727;
		--color-selected: #DFDFDF;
		--color-success: #1ED030;
		--color-warning: #FFA800;
		--color-error: #EB4236;
		--color-hover-light: rgba(243, 55, 45, 0.05);
		--color-hover-regular: rgba(243, 55, 45, 0.10);
		--color-hover-medium: rgba(243, 55, 45, 0.15);
		--color-hover-dark: rgba(0, 0, 0, 0.20);
		--color-neutral-darkest: #363740;
		--color-neutral-darker: #3F4049;
		--color-neutral-dark: #525252;
		--color-neutral-grey: #707070;
		--color-neutral-light: #BABABA;
		--color-neutral-lighter: #DDDDDD;
		--color-neutral-white: #FFFFFF;
		--color-text-primary: #FFFFFF;
		--color-text-secondary: #BABABA;
		--color-text-muted: #BABABA;
		--color-text-disabled: #707070;
		--color-text-inverse: #363740;
		--color-background-light: #272727;
		--color-background-regular: #363740;
		--color-background-medium: rgba(243, 55, 45, 0.15);
		--color-background-semi-dark: #3F4049;
		--color-background-dark: #272727;
		--color-border-light: #525252;
		--color-border-regular: #707070;
		--color-border-medium: #929292;
		--color-border-dark: #BABABA;
		--color-border-selected: #F3372D;
		--color-button-primary-bg: #F3372D;
		--color-button-primary-fg: #FFFFFF;
		--color-button-primary-hover: #F55A52;
		--color-button-primary-active: #E3180D;
		--color-button-primary-disabled: #525252;
		--color-button-outlined-bg: transparent;
		--color-button-outlined-fg: #F3372D;
		--color-button-outlined-border: #525252;
		--color-button-outlined-hover-border: #F3372D;
		--color-button-outlined-active-border: #E3180D;
		--color-button-outlined-disabled-border: #525252;
		--color-button-outlined-disabled-fg: #707070;
		--color-button-text-fg: #F3372D;
		--color-button-text-hover-fg: #F55A52;
		--color-button-text-active-border: #E3180D;
		--color-button-text-disabled-fg: #707070;
		--color-ring: #F3372D;

		/* ── Added from IdeaBoxes (missing in Jinja) ── */
		--color-primary-hover: #F55A52;
		--color-primary-active: #E3180D;
		--color-primary-disabled: #525252;
		--color-secondary-foreground: #E5E5E5;
		--color-secondary-hover: #3F3F3F;
		--color-secondary-active: #1A1A1A;
		--color-secondary-disabled: #3F4049;
		--color-tertiary-foreground: #BABABA;
		--color-tertiary-hover: #3F4049;
		--color-tertiary-active: #3F4049;
		--color-tertiary-disabled: #2A2A2A;
		--color-accent: #FF8C5A;
		--color-accent-foreground: #E5E5E5;
		--color-accent-hover: #363740;
		--color-accent-active: #3F4049;
		--color-accent-disabled: #272727;
		--color-success-foreground: #1a1410;
		--color-error-foreground: #1a1410;
		--color-warning-foreground: #1a1410;
		--color-info: #6edff6;
		--color-info-foreground: #1a1410;
		--color-text-tertiary: #8A8A8A;
		--color-surface: #272727;
		--color-surface-hover: #363740;
		--color-muted: #272727;
		--color-muted-foreground: #BABABA;
		--color-card: #2A2A2A;
		--color-card-foreground: #E5E5E5;
		--color-popover: #2A2A2A;
		--color-popover-foreground: #E5E5E5;
		--color-button-secondary-bg: #1A1A1A;
		--color-button-secondary-fg: #E5E5E5;
		--color-button-secondary-hover: #272727;
		--color-button-secondary-active: #111111;
		--color-button-secondary-disabled: #3F4049;
		--color-button-ghost-hover-bg: #2A2A2A;
		--color-button-ghost-active-bg: #363740;
		--color-button-danger-bg: #F5776E;
		--color-button-danger-fg: #1a1410;
		--color-button-danger-hover: #F88A83;
		--color-button-danger-active: #F99C97;
		--color-border-hover: #707070;
		--color-input: #1A1A1A;
		--color-input-border: #525252;
		--color-input-focus: #F3372D;
		--color-group-1: #F55A52;
		--color-group-2: #ef4444;
		--color-group-3: #10b981;
		--color-group-4: #f55a52;
		--color-group-5: #fbbf24;
		--color-group-6: #22d3ee;
		--color-group-7: #fb923c;
		--color-group-8: #f472b6;
		--color-group-9: #9ca3af;
		--color-group-10: #84cc16;
		--color-group-11: #6366f1;
		--color-group-12: #f43f5e;
		--color-group-13: #0ea5e9;
		--color-group-14: #059669;
		--color-group-15: #d946ef;
		--color-group-16: #fb7185;
		--color-group-17: #64748b;
		--color-group-18: #eab308;
		--color-group-19: #a1a1aa;
		--color-group-20: #14b8a6;
		--color-group-21: #38bdf8;
		--color-group-22: #f97316;
		--color-group-23: #65a30d;
		--color-group-24: #71717a;
	}

	/* Dark class override for manual dark mode */
	.dark {
		/* ── Existing Jinja dark variables ── */
		--color-primary-dark: #E3180D;
		--color-primary: #F3372D;
		--color-light: #272727;
		--color-background: #272727;
		--color-primary-foreground: #FFFFFF;
		--color-secondary: #272727;
		--color-selected: #DFDFDF;
		--color-success: #1ED030;
		--color-warning: #FFA800;
		--color-error: #EB4236;
		--color-hover-light: rgba(243, 55, 45, 0.05);
		--color-hover-regular: rgba(243, 55, 45, 0.10);
		--color-hover-medium: rgba(243, 55, 45, 0.15);
		--color-hover-dark: rgba(0, 0, 0, 0.20);
		--color-neutral-darkest: #363740;
		--color-neutral-darker: #3F4049;
		--color-neutral-dark: #525252;
		--color-neutral-grey: #707070;
		--color-neutral-light: #BABABA;
		--color-neutral-lighter: #DDDDDD;
		--color-neutral-white: #FFFFFF;
		--color-text-primary: #FFFFFF;
		--color-text-secondary: #BABABA;
		--color-text-muted: #BABABA;
		--color-text-disabled: #707070;
		--color-text-inverse: #363740;
		--color-background-light: #272727;
		--color-background-regular: #363740;
		--color-background-medium: rgba(243, 55, 45, 0.15);
		--color-background-semi-dark: #3F4049;
		--color-background-dark: #272727;
		--color-border-light: #525252;
		--color-border-regular: #707070;
		--color-border-medium: #929292;
		--color-border-dark: #BABABA;
		--color-border-selected: #F3372D;
		--color-button-primary-bg: #F3372D;
		--color-button-primary-fg: #FFFFFF;
		--color-button-primary-hover: #F55A52;
		--color-button-primary-active: #E3180D;
		--color-button-primary-disabled: #525252;
		--color-button-outlined-bg: transparent;
		--color-button-outlined-fg: #F3372D;
		--color-button-outlined-border: #525252;
		--color-button-outlined-hover-border: #F3372D;
		--color-button-outlined-active-border: #E3180D;
		--color-button-outlined-disabled-border: #525252;
		--color-button-outlined-disabled-fg: #707070;
		--color-button-text-fg: #F3372D;
		--color-button-text-hover-fg: #F55A52;
		--color-button-text-active-border: #E3180D;
		--color-button-text-disabled-fg: #707070;
		--color-ring: #F3372D;

		/* ── Added from IdeaBoxes (missing in Jinja) ── */
		--color-primary-hover: #F55A52;
		--color-primary-active: #E3180D;
		--color-primary-disabled: #525252;
		--color-secondary-foreground: #E5E5E5;
		--color-secondary-hover: #3F3F3F;
		--color-secondary-active: #1A1A1A;
		--color-secondary-disabled: #3F4049;
		--color-tertiary-foreground: #BABABA;
		--color-tertiary-hover: #3F4049;
		--color-tertiary-active: #3F4049;
		--color-tertiary-disabled: #2A2A2A;
		--color-accent: #FF8C5A;
		--color-accent-foreground: #E5E5E5;
		--color-accent-hover: #363740;
		--color-accent-active: #3F4049;
		--color-accent-disabled: #272727;
		--color-success-foreground: #1a1410;
		--color-error-foreground: #1a1410;
		--color-warning-foreground: #1a1410;
		--color-info: #6edff6;
		--color-info-foreground: #1a1410;
		--color-text-tertiary: #8A8A8A;
		--color-surface: #272727;
		--color-surface-hover: #363740;
		--color-muted: #272727;
		--color-muted-foreground: #BABABA;
		--color-card: #2A2A2A;
		--color-card-foreground: #E5E5E5;
		--color-popover: #2A2A2A;
		--color-popover-foreground: #E5E5E5;
		--color-button-secondary-bg: #1A1A1A;
		--color-button-secondary-fg: #E5E5E5;
		--color-button-secondary-hover: #272727;
		--color-button-secondary-active: #111111;
		--color-button-secondary-disabled: #3F4049;
		--color-button-ghost-hover-bg: #2A2A2A;
		--color-button-ghost-active-bg: #363740;
		--color-button-danger-bg: #F5776E;
		--color-button-danger-fg: #1a1410;
		--color-button-danger-hover: #F88A83;
		--color-button-danger-active: #F99C97;
		--color-border-hover: #707070;
		--color-input: #1A1A1A;
		--color-input-border: #525252;
		--color-input-focus: #F3372D;
		--color-group-1: #F55A52;
		--color-group-2: #ef4444;
		--color-group-3: #10b981;
		--color-group-4: #f55a52;
		--color-group-5: #fbbf24;
		--color-group-6: #22d3ee;
		--color-group-7: #fb923c;
		--color-group-8: #f472b6;
		--color-group-9: #9ca3af;
		--color-group-10: #84cc16;
		--color-group-11: #6366f1;
		--color-group-12: #f43f5e;
		--color-group-13: #0ea5e9;
		--color-group-14: #059669;
		--color-group-15: #d946ef;
		--color-group-16: #fb7185;
		--color-group-17: #64748b;
		--color-group-18: #eab308;
		--color-group-19: #a1a1aa;
		--color-group-20: #14b8a6;
		--color-group-21: #38bdf8;
		--color-group-22: #f97316;
		--color-group-23: #65a30d;
		--color-group-24: #71717a;
	}
}