/**********************************************************************
 * main.css
 *
 * Copyright Uli Grossek 2026
 * http://www.ul90.com
 *
 * Implemented by Anthropic Claude
 * ----------------------------------------------------------------------
 * @author ul90
 **********************************************************************/

/** @file main.css  Core styles and CSS variables */

/* ============================================================
 * CSS Custom Properties / Design Tokens
 * ============================================================ */

:root {
	/* Colors - Light Theme */
	--bg-primary: #ffffff;
	--bg-secondary: #f8f9fa;
	--bg-tertiary: #e9ecef;
	--text-primary: #1a1a1a;
	--text-secondary: #6c757d;
	--text-tertiary: #adb5bd;
	--accent: #0066cc;
	--accent-hover: #0052a3;
	--accent-light: #e6f2ff;
	--border-color: #dee2e6;
	--shadow-sm: rgba(0, 0, 0, 0.05);
	--shadow-md: rgba(0, 0, 0, 0.1);
	--shadow-lg: rgba(0, 0, 0, 0.15);

	/* Success/Warning/Error colors */
	--success: #28a745;
	--warning: #ffc107;
	--error: #dc3545;

	/* Typography */
	--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-size-base: 16px;
	--font-size-sm: 14px;
	--font-size-lg: 18px;
	--font-size-xl: 24px;
	--font-size-2xl: 32px;
	--font-size-3xl: 48px;
	--line-height-base: 1.6;
	--line-height-heading: 1.2;

	/* Spacing */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-2xl: 3rem;
	--spacing-3xl: 4rem;

	/* Border Radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-full: 9999px;

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 350ms ease;
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg-primary: #1a1a1a;
		--bg-secondary: #2d2d2d;
		--bg-tertiary: #404040;
		--text-primary: #f0f0f0;
		--text-secondary: #b0b0b0;
		--text-tertiary: #808080;
		--accent: #4d94ff;
		--accent-hover: #6ba6ff;
		--accent-light: #1a3a5c;
		--border-color: #404040;
		--shadow-sm: rgba(0, 0, 0, 0.2);
		--shadow-md: rgba(0, 0, 0, 0.3);
		--shadow-lg: rgba(0, 0, 0, 0.4);

		--success: #34d058;
		--warning: #ffdf5d;
		--error: #f85149;
	}
}

/* ============================================================
 * Reset & Base Styles
 * ============================================================ */

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: var(--font-size-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--text-primary);
	background-color: var(--bg-primary);
	transition: background-color var(--transition-base), color var(--transition-base);
}

/* ============================================================
 * Typography
 * ============================================================ */

h1, h2, h3, h4, h5, h6 {
	line-height: var(--line-height-heading);
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: var(--spacing-md);
}

h1 {
	font-size: var(--font-size-3xl);
	margin-bottom: var(--spacing-lg);
}

h2 {
	font-size: var(--font-size-2xl);
}

h3 {
	font-size: var(--font-size-xl);
}

h4 {
	font-size: var(--font-size-lg);
}

h5, h6 {
	font-size: var(--font-size-base);
}

p {
	margin-bottom: var(--spacing-md);
}

a {
	color: var(--accent);
	text-decoration: none;
	transition: color var(--transition-fast);
}

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

strong, b {
	font-weight: 600;
}

code {
	font-family: "SF Mono", Monaco, Menlo, monospace;
	font-size: 0.9em;
	background-color: var(--bg-secondary);
	padding: 0.125rem 0.25rem;
	border-radius: var(--radius-sm);
}

pre {
	background-color: var(--bg-secondary);
	padding: var(--spacing-md);
	border-radius: var(--radius-md);
	overflow-x: auto;
	margin-bottom: var(--spacing-md);
}

pre code {
	background: none;
	padding: 0;
}

ul, ol {
	margin-left: var(--spacing-lg);
	margin-bottom: var(--spacing-md);
}

li {
	margin-bottom: var(--spacing-sm);
}

/* ============================================================
 * Utility Classes
 * ============================================================ */

.text-center {
	text-align: center;
}

.text-muted {
	color: var(--text-secondary);
}

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-md); }
.mt-2 { margin-top: var(--spacing-lg); }
.mt-3 { margin-top: var(--spacing-xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-md); }
.mb-2 { margin-bottom: var(--spacing-lg); }
.mb-3 { margin-bottom: var(--spacing-xl); }

.py-1 { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-2 { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-3 { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }

.hidden {
	display: none !important;
}