/**
 * ThoughtsWorld — Global Design Tokens & Color Palette (assets/css/common.css)
 *
 * Logo-Harmonic Cyan-Blue, Royal Blue, Electric Indigo & Vivid Violet System
 * Matches the ThoughtsWorld `TW` Monogram Emblem & Reference UI
 *
 * @package Thoughts_World
 */

:root {
	/* 1. Brand Core Colors (Matched to ThoughtsWorld Logo) */
	--tw-primary: #0F172A;
	--tw-primary-hover: #1E293B;
	--tw-secondary: #0968E5;
	--tw-accent: #0968E5;
	--tw-accent-soft: #EAF2FF;

	/* 2. Vibrant Multi-Tone Accents (Cyan -> Royal Blue -> Indigo -> Violet -> Emerald) */
	--tw-accent-blue: #0968E5;
	--tw-accent-blue-soft: #EAF2FF;
	--tw-accent-purple: #6D28D9;
	--tw-accent-purple-soft: #F3EEFF;
	--tw-accent-pink: #9333EA;
	--tw-accent-pink-soft: #F5F0FF;
	--tw-accent-cyan: #0284C7;
	--tw-accent-cyan-soft: #E0F2FE;
	--tw-accent-green: #10B981;
	--tw-accent-green-soft: #ECFDF5;
	--tw-accent-amber: #F59E0B;
	--tw-accent-amber-soft: #FFFBEB;

	/* 3. Logo-True Gradients (Used on Buttons, Badges, Active Pills & Highlights) */
	--tw-gradient-start: #0968E5;
	--tw-gradient-mid: #4F46E5;
	--tw-gradient-end: #9333EA;
	--tw-gradient-primary: linear-gradient(90deg, #0968E5 0%, #4F46E5 52%, #9333EA 100%);
	--tw-gradient-primary-hover: linear-gradient(90deg, #0284C7 0%, #4338CA 52%, #7E22CE 100%);
	--tw-gradient-purple-pink: linear-gradient(90deg, #2563EB 0%, #6366F1 50%, #9333EA 100%);
	--tw-gradient-blue-cyan: linear-gradient(135deg, #0284C7 0%, #2563EB 100%);
	--tw-gradient-surface: linear-gradient(135deg, #F0F6FF 0%, #F5F2FF 55%, #F8FAFC 100%);
	--tw-gradient-hero-soft: linear-gradient(135deg, #EEF5FF 0%, #F4F1FF 52%, #F8FAFC 100%);

	/* 4. Page & Section Surfaces */
	--tw-page: #FFFFFF;
	--tw-bg-main: #FFFFFF;
	--tw-background: #FFFFFF;
	--tw-section: #F4F7FC;
	--tw-section-purple: #F6F4FF;
	--tw-section-pink: #F5F3FF;
	--tw-section-blue: #EFF6FF;
	--tw-bg-section: #F4F7FC;
	--tw-background-soft: #F4F7FC;
	--tw-surface-muted: #EEF4FF;
	--tw-card: #FFFFFF;
	--tw-bg-card: #FFFFFF;

	/* 5. High-Contrast Readable Typography Colors */
	--tw-text: #0F172A;
	--tw-text-dark: #0F172A;
	--tw-text-body: #334155;
	--tw-muted: #475569;
	--tw-text-muted: #475569;
	--tw-text-light: #64748B;

	/* 6. Borders & Dividers */
	--tw-border: #DCE5F2;
	--tw-border-color: #DCE5F2;
	--tw-border-purple: #D8D4F8;
	--tw-border-pink: #DDD6FE;
	--tw-border-hover: #93C5FD;

	/* 7. Radii, Shadows & Layout Containers */
	--tw-radius-sm: 8px;
	--tw-radius-md: 12px;
	--tw-radius-lg: 18px;
	--tw-radius-xl: 24px;
	--tw-radius-pill: 9999px;

	--tw-shadow-sm: 0 4px 14px -2px rgba(15, 23, 42, 0.06);
	--tw-shadow-md: 0 12px 28px -6px rgba(9, 104, 229, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.05);
	--tw-shadow-lg: 0 20px 42px -12px rgba(79, 70, 229, 0.18);
	--tw-shadow-btn: 0 8px 20px -4px rgba(79, 70, 229, 0.38);

	--tw-container: 1280px;
	--tw-container-normal: 1280px;
	--tw-container-wide: 1340px;
	--tw-container-small: 920px;

	/* 8. Font Stacks */
	--tw-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--tw-font-serif: 'Merriweather', 'Noto Sans Devanagari', 'Noto Sans Gujarati', Georgia, serif;
}