/* Mode: light */

:root, [data-mode="light"] {
	--op-accent: #01696f;
	--op-accent-hover: #01696f;
	--op-accent-text: #FFFFFF;
	--op-bg: #f7f6f2;
	--op-surface: #ffffff;
	--op-surface-2: #f9f8f5;
	--op-surface-offset: #f0ede8;
	--op-surface-dynamic: #e6e4df;
	--op-divider: #e5e2dd;
	--op-border: #dbd8d3;
	--op-text: #1a1a1a;
	--op-text-muted: #6b6b6b;
	--op-text-faint: #a0a0a0;
	--op-font-body: 'General Sans', sans-serif;
	--op-font-display: 'Cabinet Grotesk', sans-serif;
	--op-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
	--op-text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
	--op-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--op-text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
	--op-text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
	--op-radius: 8px;
	--op-radius-sm: 4px;
	--op-radius-lg: 12px;
	--op-radius-xl: 16px;
	--op-radius-full: 9999px;
	--op-space-1: 4.0px;
	--op-space-2: 8.0px;
	--op-space-3: 12.0px;
	--op-space-4: 16.0px;
	--op-space-6: 24.0px;
	--op-space-8: 32.0px;
	--op-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
	--op-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
	--op-shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
	--op-transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
	--op-login-bg: #f7f6f2;
	--op-login-effect: none;
	--op-header-bg: #ffffff;
	--op-header-border: #e5e2dd;
	--op-iframe-radius: 8px;
	--op-theme: 'classic';
}

body { font-family: var(--op-font-body); color: var(--op-text); background-color: var(--op-bg); }
.ui-input-label { color: var(--op-text-muted); }
.ui-input-inner { border-color: var(--op-border); border-radius: var(--op-radius); }
.ui-input-inner.ui-input-focused { border-color: var(--op-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--op-accent) 15%, transparent); }
.button[name="submit"] { background-color: var(--op-accent); color: var(--op-accent-text); border-radius: var(--op-radius); }
.button[name="submit"]:hover { background-color: var(--op-accent-hover); }
header { background: var(--op-header-bg); border-color: var(--op-header-border); }
.theme-login-grid { background-image: linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px); background-size: 20px 20px; }
.theme-login-dots { background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px); background-size: 16px 16px; }
.theme-login-gradient::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--op-accent) 8%, transparent), transparent 70%); pointer-events: none; }
.theme-login-mesh::before { content: ''; position: absolute; inset: 0; background: conic-gradient(from 180deg at 50% 50%, color-mix(in srgb, var(--op-accent) 5%, transparent) 0deg, transparent 60deg, color-mix(in srgb, var(--op-accent) 4%, transparent) 120deg, transparent 240deg); pointer-events: none; filter: blur(40px); }