/* Base styles - typography, resets, links */
/* Color scheme uses CSS custom properties for future dark mode support */

:root
{
	/* Stripe Purple - Light Mode */
	color-scheme: light;

	/* Theme accent - Stripe Purple */
	--bs-primary: #635BFF;
	--bs-primary-hover: #524ddb;
	--bs-success: #00D4AA;
	--bs-danger: #FF5C5C;
	--bs-warning: #FFBB00;

	/* Light mode colors */
	--color-bg: #fff;
	--color-bg-subtle: #E8EDF3;
	--color-bg-muted: #D8E0E8;
	--color-bg-hover: #C8D0D8;
	--color-text: #0A2540;
	--color-text-muted: #425466;
	--color-text-subtle: #6B7C93;
	--color-border: #A0AEBF;
	--color-border-subtle: #C0CBDA;
	--color-link: #635BFF;
	--color-link-hover: #524ddb;

	/* Navigation - matches mobile nav in day mode */
	--color-nav-bg: #F6F8FA;
	--color-nav-section-bg: #E8EDF3;
	--color-nav-section-text: #425466;
	--color-nav-section-border: #D0D9E4;
	--color-nav-text: #0A2540;
	--color-nav-hover-bg: #E8EDF3;
	--color-nav-hover-border: #635BFF;
	--color-nav-active-bg: #635BFF;
	--color-nav-active-text: #fff;

	/* Header/Footer */
	--color-header-bg: #0A2540;
	--color-header-text: #fff;
	--color-footer-bg: #fff;
	--color-footer-text: #8898AA;

	/* Tables */
	--color-table-header-bg: #E8EDF3;
	--color-table-header-text: #0A2540;
	--color-table-row-alt: #F3F6F9;
	--color-table-row-hover: #E8EDF3;
	--color-form-row-alt: #E8EDF3;

	/* Mobile Nav - distinct from desktop nav */
	--color-mobile-nav-bg: #F6F8FA;
	--color-mobile-nav-section-bg: #E8EDF3;
	--color-mobile-nav-section-text: #425466;
	--color-mobile-nav-section-border: #D0D9E4;
	--color-mobile-nav-text: #0A2540;
	--color-mobile-nav-hover-bg: #E8EDF3;
	--color-mobile-nav-active-bg: #635BFF;
	--color-mobile-nav-active-text: #fff;

	/* Forms */
	--color-input-bg: #fff;
	--color-input-border: #A0AEBF;
	--color-input-focus: #635BFF;
	--color-input-focus-ring: rgba(99, 91, 255, 0.15);
	--color-button-bg: #635BFF;
	--color-button-text: #fff;
	--color-button-border: #635BFF;
	--color-button-hover: #524ddb;

	/* Status */
	--color-success: #00D4AA;
	--color-success-bg: #D4F7EE;
	--color-danger: #FF5C5C;
	--color-danger-bg: #FFE5E5;
	--color-warning: #FFBB00;
	--color-warning-bg: #FFF5D4;
}

/* Day mode - force light even when system prefers dark */
[data-theme="day"]
{
	color-scheme: light;
}

/* Night mode - activated via data-theme="night" on html element */
[data-theme="night"]
{
	/* Stripe Purple - Dark Mode */
	--color-bg: #1A1F36;
	--color-bg-subtle: #121826;
	--color-bg-muted: #2A3148;
	--color-bg-hover: #3A4158;
	--color-text: #E3E8EE;
	--color-text-muted: #A3ACBA;
	--color-text-subtle: #6A7B8A;
	--color-border: #2A3148;
	--color-border-subtle: #1A1F36;
	--color-link: #7A73FF;
	--color-link-hover: #9590FF;

	/* Navigation stays same dark blue in both modes */
	--color-nav-bg: #0A2540;
	--color-nav-section-bg: #061B2E;
	--color-nav-section-text: #6A7B8A;
	--color-nav-section-border: #1A3A5C;
	--color-nav-text: #A3ACBA;
	--color-nav-hover-bg: #1A3A5C;
	--color-nav-hover-border: #6A7B8A;

	--color-header-bg: #0A2540;
	--color-footer-bg: #1A1F36;
	--color-footer-text: #6A7B8A;

	--color-table-header-bg: #121826;
	--color-table-header-text: #E3E8EE;
	--color-table-row-alt: #121826;
	--color-table-row-hover: #2A3148;
	--color-form-row-alt: #232840;

	/* Mobile Nav - dark mode */
	--color-mobile-nav-bg: #1A1F36;
	--color-mobile-nav-section-bg: #121826;
	--color-mobile-nav-section-text: #A3ACBA;
	--color-mobile-nav-section-border: #2A3148;
	--color-mobile-nav-text: #E3E8EE;
	--color-mobile-nav-hover-bg: #2A3148;
	--color-mobile-nav-active-bg: #635BFF;
	--color-mobile-nav-active-text: #fff;

	--color-input-bg: #232840;
	--color-input-border: #3D4663;
	--color-input-focus: #7A73FF;
	--color-input-focus-ring: rgba(122, 115, 255, 0.25);
	--color-button-bg: #635BFF;
	--color-button-text: #fff;
	--color-button-border: #635BFF;
	--color-button-hover: #7A73FF;

	--color-success-bg: #0D3D30;
	--color-danger-bg: #4D2020;
	--color-warning-bg: #4D3D00;
}

/* Auto mode - respects system preference */
@media (prefers-color-scheme: dark)
{
	:root:not([data-theme="day"]):not([data-theme="night"])
	{
		color-scheme: dark;
		--color-bg: #1A1F36;
		--color-bg-subtle: #121826;
		--color-bg-muted: #2A3148;
		--color-bg-hover: #3A4158;
		--color-text: #E3E8EE;
		--color-text-muted: #A3ACBA;
		--color-text-subtle: #6A7B8A;
		--color-border: #2A3148;
		--color-border-subtle: #1A1F36;
		--color-link: #7A73FF;
		--color-link-hover: #9590FF;

		/* Desktop Nav - dark mode (matches night mode) */
		--color-nav-bg: #0A2540;
		--color-nav-section-bg: #061B2E;
		--color-nav-section-text: #6A7B8A;
		--color-nav-section-border: #1A3A5C;
		--color-nav-text: #A3ACBA;
		--color-nav-hover-bg: #1A3A5C;
		--color-nav-hover-border: #6A7B8A;

		--color-footer-bg: #1A1F36;
		--color-footer-text: #6A7B8A;
		--color-table-header-bg: #121826;
		--color-table-header-text: #E3E8EE;
		--color-table-row-alt: #121826;
		--color-table-row-hover: #2A3148;
		--color-form-row-alt: #232840;

		/* Mobile Nav - dark mode */
		--color-mobile-nav-bg: #1A1F36;
		--color-mobile-nav-section-bg: #121826;
		--color-mobile-nav-section-text: #A3ACBA;
		--color-mobile-nav-section-border: #2A3148;
		--color-mobile-nav-text: #E3E8EE;
		--color-mobile-nav-hover-bg: #2A3148;

		--color-input-bg: #232840;
		--color-input-border: #3D4663;
		--color-input-focus: #7A73FF;
		--color-input-focus-ring: rgba(122, 115, 255, 0.25);
		--color-button-hover: #7A73FF;
		--color-success-bg: #0D3D30;
		--color-danger-bg: #4D2020;
		--color-warning-bg: #4D3D00;
	}
}

body
{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	letter-spacing: normal;
	word-spacing: normal;
	margin: 0;
	padding: 0;
	color: var(--color-text);
	background: var(--color-bg);
}

a:link, a:visited, a:active
{
	text-decoration: none;
	color: var(--color-link);
}

a:hover
{
	color: var(--color-link-hover);
	text-decoration: underline;
}

form
{
	margin: 0;
	padding: 0;
}

ul
{
	margin: 0;
}