// Theme-specific Design Tokens - Light and Dark theme variables
// This file contains theme-specific overrides for light and dark modes

:root {
	// === SURFACE COLORS - LIGHT THEME ===
	--ov-meet-surface-color: #fdfdfd;
	--ov-meet-surface-variant: #f5f5f5;
	--ov-meet-surface-hover: #f0f0f0;
	--ov-meet-background-color: #fafafa;
	--ov-meet-background-secondary: #f5f5f5;
	--ov-meet-surface-elevated: #ffffff;
	--ov-meet-surface-container: #f3f3f3;

	// === TEXT COLORS - LIGHT THEME ===
	--ov-meet-text-primary: #212121;
	--ov-meet-text-secondary: #757575;
	--ov-meet-text-hint: #9e9e9e;
	--ov-meet-text-disabled: #bdbdbd;
	--ov-meet-text-on-primary: #ffffff;
	--ov-meet-text-on-secondary: #ffffff;
	--ov-meet-text-on-accent: #ffffff;
	--ov-meet-text-on-surface: #494949;
	--ov-meet-text-on-background: #212121;

	// === SHADOWS - LIGHT THEME ===
	--ov-meet-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	--ov-meet-shadow-md: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
	--ov-meet-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.16), 0 8px 16px rgba(0, 0, 0, 0.23);
	--ov-meet-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);

	// === BORDERS - LIGHT THEME ===
	--ov-meet-border-color: #e0e0e0;
	--ov-meet-border-color-light: #f0f0f0;
	--ov-meet-border-color-strong: #bdbdbd;
}

// === DARK THEME ===
// Activated when the [data-theme="dark"] attribute is present on html
[data-theme='dark'] {

	--ov-meet-color-info: #2a9bf7;

	// === SURFACE COLORS - DARK THEME ===
	--ov-meet-background-color: #29292e;
	--ov-meet-background-secondary: #21212b;
	--ov-meet-surface-color: #242429;
	--ov-meet-surface-variant: #23232c;
	--ov-meet-surface-hover: #3c3c44;
	--ov-meet-surface-elevated: #2e2e35;
	--ov-meet-surface-container: #262630;

	// === TEXT COLORS - DARK THEME ===
	--ov-meet-text-primary: #e0e0e6;
	--ov-meet-text-secondary: #a5a5b5;
	--ov-meet-text-hint: #7c7c8c;
	--ov-meet-text-disabled: #5a5a68;
	--ov-meet-text-on-surface: #e4e4ec;
	--ov-meet-text-on-background: #e4e4ec;

	// === SHADOWS - DARK THEME ===
	--ov-meet-shadow-sm: 0 1px 3px rgba(20, 20, 30, 0.4), 0 1px 2px rgba(30, 30, 40, 0.6);
	--ov-meet-shadow-md: 0 3px 6px rgba(30, 30, 45, 0.5), 0 3px 6px rgba(20, 20, 30, 0.6);
	--ov-meet-shadow-lg: 0 8px 16px rgba(20, 20, 30, 0.5), 0 8px 16px rgba(0, 0, 0, 0.7);
	--ov-meet-shadow-hover: 0 4px 12px rgba(50, 50, 70, 0.3), 0 2px 6px rgba(0, 0, 0, 0.4);

	// === BORDERS - DARK THEME ===
	--ov-meet-border-color: #3a3a48;
	--ov-meet-border-color-light: #2b2b36;
	--ov-meet-border-color-strong: #5c5c6c;
}