/* Grably Design System - adapted from alexbic.net */

:root {
	--brand-dark: #2b3137;
	--brand-dark-alt: #24292e;
	--brand-blue: #007AFF;
	--brand-purple: #5856D6;
	--brand-orange: #FF9500;
	--brand-green: #34C759;

	--brand-dark-rgb: 43, 49, 55;
	--brand-blue-rgb: 0, 122, 255;
	--brand-purple-rgb: 88, 86, 214;
	--brand-orange-rgb: 255, 149, 0;
}

:root,
:root[data-theme="light"] {
	--color-primary: var(--brand-blue);
	--color-secondary: var(--brand-purple);
	--color-accent: var(--brand-orange);
	--color-success: #34C759;
	--color-error: #FF3B30;

	--text-primary: var(--brand-dark);
	--text-secondary: #3c3c43;
	--text-tertiary: #3c3c4399;
	--text-muted: #8e8e93;
	--text-inverse: #ffffff;

	--bg-primary: #ffffff;
	--bg-secondary: #f2f2f7;
	--bg-tertiary: #e5e5ea;
	--bg-surface: #ffffff;
	--bg-elevated: #ffffff;

	--border-light: #e5e5ea;
	--border-medium: #d1d1d6;
	--border-dark: #c7c7cc;

	--gradient-brand: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
	--gradient-hero: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);

	--shadow-xs: 0 1px 2px rgba(var(--brand-dark-rgb), 0.05);
	--shadow-sm: 0 2px 4px rgba(var(--brand-dark-rgb), 0.06);
	--shadow-md: 0 4px 12px rgba(var(--brand-dark-rgb), 0.1);
	--shadow-lg: 0 8px 24px rgba(var(--brand-dark-rgb), 0.15);
	--shadow-xl: 0 20px 40px rgba(var(--brand-dark-rgb), 0.2);

	--shadow-inset-light: inset -2px -2px 4px rgba(var(--brand-dark-rgb), 0.06), inset 2px 2px 4px rgba(255, 255, 255, 1);
	--shadow-inset-pressed: inset 3px 3px 5px rgba(var(--brand-dark-rgb), 0.12), inset -2px -2px 4px rgba(255, 255, 255, 0.9);

	--gradient-light: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(240, 240, 240, 0.95));

	--glassmorphism: rgba(255, 255, 255, 0.25);
	--glassmorphism-border: rgba(255, 255, 255, 0.18);
	--blur-backdrop: blur(10px);
}

:root[data-theme="dark"] {
	--color-primary: #0A84FF;
	--color-secondary: #5E5CE6;
	--color-accent: #FF9F0A;
	--color-success: #30D158;
	--color-error: #FF453A;

	--text-primary: #ffffff;
	--text-secondary: #ebebf5;
	--text-tertiary: #ebebf599;
	--text-muted: #8e8e93;
	--text-inverse: #000000;

	--bg-primary: #000000;
	--bg-secondary: #1c1c1e;
	--bg-tertiary: #2c2c2e;
	--bg-surface: #1c1c1e;
	--bg-elevated: #2c2c2e;

	--border-light: #38383a;
	--border-medium: #48484a;
	--border-dark: #636366;

	--gradient-brand: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
	--gradient-hero: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);

	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.8);
	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.6);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
	--shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);

	--shadow-inset-light: inset -2px -2px 4px rgba(0, 0, 0, 0.8), inset 2px 2px 4px rgba(255, 255, 255, 0.02);
	--shadow-inset-pressed: inset 3px 3px 5px rgba(0, 0, 0, 0.6), inset -2px -2px 4px rgba(255, 255, 255, 0.05);

	--gradient-light: linear-gradient(145deg, rgba(28, 28, 30, 0.95), rgba(44, 44, 46, 0.95));

	--glassmorphism: rgba(28, 28, 30, 0.8);
	--glassmorphism-border: rgba(255, 255, 255, 0.1);
	--blur-backdrop: blur(20px);
}

:root {
	--theme-button-height: 28px;
	--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-bounce: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	--transition-fast: all 0.1s ease;
	--radius-small: 6px;
	--radius-medium: 12px;
	--radius-large: 20px;
	--radius-button: 100px;
}