:root {
    /* Light theme tokens */
    --primary-color: #1E3A8A;
    --primary-light: #3B5BBD;
    --primary-dark: #0B1B3A;
    --primary-deep: #071022;
    --secondary-color: #B48A5A;
    --secondary-light: #D2A878;
    --secondary-dark: #8F6639;
    --accent-color: #E7E2D9;
    --accent-light: #F5F2EE;
    --accent-dark: #C4BEB4;
    --brand-gradient: linear-gradient(135deg, #0B1B3A 0%, #1E3A8A 100%);
    --primary-gradient: linear-gradient(135deg, #1E3A8A 0%, #3B5BBD 100%);
    --accent-gradient: linear-gradient(135deg, #B48A5A 0%, #D2A878 100%);
    --sidebar-gradient: linear-gradient(180deg, #0B1B3A 0%, #071022 100%);
    --field-text-color: #3A4E66;
    --field-text-bg: #F1F5FA;
    --field-text-border: #B8C9DB;
    --field-text-icon: #617A97;
    --field-textarea-color: #3F5E82;
    --field-textarea-bg: #EEF4FB;
    --field-textarea-border: #BFD1E5;
    --field-textarea-icon: #5B82AE;
    --field-email-color: #2E6DAA;
    --field-email-bg: #EDF3FA;
    --field-email-border: #B6CCE3;
    --field-email-icon: #4A87C2;
    --field-phone-color: #4E6F8F;
    --field-phone-bg: #EFF3F8;
    --field-phone-border: #B8C6D4;
    --field-phone-icon: #6488AE;
    --field-url-color: #556A91;
    --field-url-bg: #F0F3F8;
    --field-url-border: #BCC8DA;
    --field-url-icon: #6F87AD;
    --field-number-color: #687489;
    --field-number-bg: #F3F5F8;
    --field-number-border: #C7CED8;
    --field-number-icon: #7E8CA3;
    --field-color-color: #6D7892;
    --field-color-bg: #F3F5F9;
    --field-color-border: #C8CFDA;
    --field-color-icon: #8797B1;
    --field-image-color: #425F87;
    --field-image-bg: #EDF3FA;
    --field-image-border: #B8CAE0;
    --field-image-icon: #5F83B0;
    --brand-linkedin: #0A66C2;
    --brand-twitter: #1DA1F2;
    --brand-twitter-x: #000000;
    --brand-facebook: #1877F2;
    --brand-instagram: #E4405F;
    --brand-github: #181717;
    --brand-youtube: #FF0000;
    --brand-whatsapp: #25D366;
    --brand-telegram: #26A5E4;
    --brand-discord: #5865F2;
    --brand-tiktok: #000000;
    --brand-pinterest: #BD081C;
    --brand-snapchat: #FFFC00;
    --brand-reddit: #FF4500;
    --brand-slack: #4A154B;
    --brand-skype: #00AFF0;
    --brand-wechat: #07C160;
    --brand-line: #00B900;
    --brand-medium: #000000;
    --brand-dribbble: #EA4C89;
    --brand-behance: #1769FF;
    --brand-threads: #000000;
    --brand-mastodon: #6364FF;
    --brand-viber: #7360F2;
    --brand-signal: #3A76F0;
    --brand-twitch: #9146FF;
    --brand-spotify: #1DB954;
    --category-identity-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --category-organization-gradient: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 100%);
    --category-contact-gradient: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
    --category-social-gradient: linear-gradient(135deg, var(--text-gray) 0%, var(--secondary-dark) 100%);
    --category-media-gradient: linear-gradient(135deg, var(--text-medium) 0%, var(--text-gray) 100%);
    --category-address-gradient: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%);
    --category-bio-gradient: linear-gradient(135deg, var(--accent-dark) 0%, var(--secondary-color) 100%);
    --category-appearance-gradient: linear-gradient(135deg, var(--secondary-dark) 0%, var(--secondary-color) 100%);
    --category-custom-gradient: linear-gradient(135deg, var(--text-gray) 0%, var(--text-medium) 100%);
    --white: #FFFFFF;
    --background-light: #F7FAFC;
    --background-medium: #EEF3F8;
    --background-accent: #DCE6F0;
    --background-dark: #0E1A2B;
    --text-dark: #111827;
    --text-medium: #334155;
    --text-light: #FAFBFB;
    --text-gray: #64748B;
    --text-subtle: #94A3B8;
    --text-placeholder: #B8C4D1;
    --border-light: #D3DFEA;
    --border-medium: #B7C9DB;
    --border-strong: #8FA7BF;
    --success-color: #5E7593;
    --success-light: #8DA5C1;
    --success-dark: #485F7C;
    --success-deep: #364A63;
    --danger-color: #8B7280;
    --danger-light: #AE96A2;
    --danger-dark: #6F5A66;
    --warning-color: #8B8168;
    --warning-light: #ADA48D;
    --warning-dark: #6F6650;
    --warning-deep: #544D3D;
    --info-color: #1E3A8A;
    --info-light: #3B5BBD;
    --info-dark: #0B1B3A;
    --primary-rgb: 30, 58, 138;
    --secondary-rgb: 180, 138, 90;
    --accent-rgb: 231, 226, 217;
    --success-rgb: 94, 117, 147;
    --danger-rgb: 139, 114, 128;
    --warning-rgb: 139, 129, 104;
    --info-rgb: 30, 58, 138;
    --black-rgb: 0, 0, 0;
    --white-rgb: 255, 255, 255;
    --disabled-bg: var(--background-medium);
    --disabled-border: var(--border-medium);
    --disabled-text: var(--text-gray);
    --disabled-opacity: 0.6;
    --success-bg: #EDF1F7;
    --success-border: #C5D0DF;
    --success-text: #485F7C;
    --danger-bg: #F3EEF1;
    --danger-border: #D9CBD2;
    --danger-text: #6F5A66;
    --warning-bg: #F4F2EE;
    --warning-border: #D9D3C4;
    --warning-text: #6F6650;
    --info-bg: #EAF1F9;
    --info-border: #BED2E6;
    --info-text: #346D9E;
    --sidebar-bg: var(--primary-deep);
    --sidebar-divider: rgba(255, 255, 255, 0.1);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-bg: var(--primary-color);
    --sidebar-accent: var(--accent-color);
    --focus-ring: rgba(var(--primary-rgb), 0.3);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-colored: rgba(var(--primary-rgb), 0.2);
    --overlay-bg: rgba(17, 24, 39, 0.6);
    --link-color: var(--primary-color);
    --link-hover: var(--primary-dark);
    --input-bg: var(--white);
    --input-bg-focus: #EEF4FB;
    --input-text: var(--text-dark);
    --input-text-focus: var(--text-dark);
    --input-border: var(--border-light);
    --input-border-focus: var(--primary-color);
    /* Auth alias tokens (legacy naming compatibility) */
    --primary: var(--primary-color);
    --primary-hover: var(--primary-dark);
    --secondary: var(--secondary-color);
    --accent: var(--accent-color);
    --deep: var(--primary-deep);
    --black: rgb(var(--black-rgb));
    --gray-50: var(--background-light);
    --gray-100: var(--background-medium);
    --gray-200: var(--border-light);
    --gray-300: var(--border-medium);
    --gray-400: var(--border-strong);
    --gray-500: var(--text-gray);
    --gray-600: var(--text-medium);
    --gray-700: var(--text-dark);
    --gray-800: var(--background-dark);
    --gray-900: var(--text-dark);
    --error: var(--danger-color);
    --error-bg: var(--danger-bg);
    --success: var(--success-color);
    --surface: var(--white);
    --text-main: var(--text-dark);
    --text-muted: var(--text-gray);
    --border-color: var(--border-light);
    --focus-outline: rgba(var(--primary-rgb), 0.4);

    /* Ultimate Luxury Floating Shadows */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.01);
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.04), 0 12px 24px rgba(0, 0, 0, 0.02);
    --shadow-xl: 0 32px 64px rgba(0, 0, 0, 0.05), 0 16px 32px rgba(0, 0, 0, 0.03);

    /* Premium Shadow Glows */
    --shadow-primary: 0 12px 32px rgba(var(--primary-rgb), 0.18);
    --shadow-secondary: 0 12px 32px rgba(var(--secondary-rgb), 0.18);

    /* Smooth Apple-tier Radii */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-2xl: 48px;
    --radius-full: 9999px;

    /* Layout Constants */
    --glass-bg: var(--white);
    --glass-border: 1px solid var(--border-light);
    --glass-blur: none;
    --glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] {
    --primary-color: #3B5BBD;
    --primary-light: #617EDB;
    --primary-dark: #1E3A8A;
    --primary-deep: #0B1B3A;
    --secondary-color: #D2A878;
    --secondary-light: #EBC395;
    --secondary-dark: #B48A5A;
    --accent-color: #E7E2D9;
    --accent-light: #F5F3F0;
    --accent-dark: #D1C9BC;
    --brand-gradient: linear-gradient(135deg, #1E3A8A 0%, #3B5BBD 100%);
    --primary-gradient: linear-gradient(135deg, #3B5BBD 0%, #617EDB 100%);
    --accent-gradient: linear-gradient(135deg, #B48A5A 0%, #D2A878 100%);
    --sidebar-gradient: linear-gradient(180deg, #0B1B3A 0%, #071022 100%);
    --field-text-color: #AFC0D3;
    --field-text-bg: rgba(73, 94, 121, 0.25);
    --field-text-border: #4E6785;
    --field-text-icon: #9CB0C6;
    --field-textarea-color: #B7C7D9;
    --field-textarea-bg: rgba(73, 94, 121, 0.25);
    --field-textarea-border: #557191;
    --field-textarea-icon: #A7BDD5;
    --field-email-color: #BED0E3;
    --field-email-bg: rgba(70, 102, 138, 0.25);
    --field-email-border: #5A7FA8;
    --field-email-icon: #AFC6DD;
    --field-phone-color: #AFC0D3;
    --field-phone-bg: rgba(73, 94, 121, 0.25);
    --field-phone-border: #4E6785;
    --field-phone-icon: #9CB0C6;
    --field-url-color: #B6C5D8;
    --field-url-bg: rgba(75, 95, 124, 0.24);
    --field-url-border: #5A7698;
    --field-url-icon: #A7BCD2;
    --field-number-color: #B1B8C3;
    --field-number-bg: rgba(91, 100, 113, 0.24);
    --field-number-border: #667388;
    --field-number-icon: #A0ACBE;
    --field-color-color: #B8C2D2;
    --field-color-bg: rgba(77, 92, 116, 0.24);
    --field-color-border: #5E7394;
    --field-color-icon: #A9BAD0;
    --field-image-color: #BED0E3;
    --field-image-bg: rgba(70, 102, 138, 0.25);
    --field-image-border: #5A7FA8;
    --field-image-icon: #AFC6DD;
    --brand-linkedin: #0A66C2;
    --brand-twitter: #1DA1F2;
    --brand-twitter-x: #000000;
    --brand-facebook: #1877F2;
    --brand-instagram: #E4405F;
    --brand-github: #181717;
    --brand-youtube: #FF0000;
    --brand-whatsapp: #25D366;
    --brand-telegram: #26A5E4;
    --brand-discord: #5865F2;
    --brand-tiktok: #000000;
    --brand-pinterest: #BD081C;
    --brand-snapchat: #FFFC00;
    --brand-reddit: #FF4500;
    --brand-slack: #4A154B;
    --brand-skype: #00AFF0;
    --brand-wechat: #07C160;
    --brand-line: #00B900;
    --brand-medium: #000000;
    --brand-dribbble: #EA4C89;
    --brand-behance: #1769FF;
    --brand-threads: #000000;
    --brand-mastodon: #6364FF;
    --brand-viber: #7360F2;
    --brand-signal: #3A76F0;
    --brand-twitch: #9146FF;
    --brand-spotify: #1DB954;
    --category-identity-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --category-organization-gradient: linear-gradient(135deg, var(--info-color) 0%, var(--info-dark) 100%);
    --category-contact-gradient: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
    --category-social-gradient: linear-gradient(135deg, var(--text-gray) 0%, var(--secondary-dark) 100%);
    --category-media-gradient: linear-gradient(135deg, var(--text-medium) 0%, var(--text-gray) 100%);
    --category-address-gradient: linear-gradient(135deg, var(--danger-color) 0%, var(--danger-dark) 100%);
    --category-bio-gradient: linear-gradient(135deg, var(--accent-dark) 0%, var(--secondary-color) 100%);
    --category-appearance-gradient: linear-gradient(135deg, var(--secondary-dark) 0%, var(--secondary-color) 100%);
    --category-custom-gradient: linear-gradient(135deg, var(--text-gray) 0%, var(--text-medium) 100%);
    --white: #172536;
    --background-light: #0D1622;
    --background-medium: #172536;
    --background-accent: #23384E;
    --background-dark: #070E17;
    --text-dark: #EFF5FB;
    --text-medium: #CDD8E3;
    --text-light: #FFFFFF;
    --text-gray: #97A8BA;
    --text-subtle: #6E8092;
    --text-placeholder: #576779;
    --border-light: #2B4056;
    --border-medium: #3C5671;
    --border-strong: #587694;
    --success-color: #8DA8C8;
    --success-light: #AEC3DA;
    --success-dark: #6F8EAF;
    --success-deep: #556F8A;
    --danger-color: #A58C9D;
    --danger-light: #BEA9B7;
    --danger-dark: #876E80;
    --warning-color: #9E9A89;
    --warning-light: #B9B5A7;
    --warning-dark: #807C6E;
    --warning-deep: #625F54;
    --info-color: #3B5BBD;
    --info-light: #617EDB;
    --info-dark: #1E3A8A;
    --primary-rgb: 59, 91, 189;
    --secondary-rgb: 210, 168, 120;
    --accent-rgb: 231, 226, 217;
    --success-rgb: 141, 168, 200;
    --danger-rgb: 165, 140, 157;
    --warning-rgb: 158, 154, 137;
    --info-rgb: 59, 91, 189;
    --black-rgb: 0, 0, 0;
    --white-rgb: 255, 255, 255;
    --disabled-bg: var(--background-accent);
    --disabled-border: var(--border-medium);
    --disabled-text: var(--text-subtle);
    --disabled-opacity: 0.5;
    --success-bg: #1E2A39;
    --success-border: #344A63;
    --success-text: #AEC3DA;
    --danger-bg: #2D2730;
    --danger-border: #483C4D;
    --danger-text: #BEA9B7;
    --warning-bg: #2B2A28;
    --warning-border: #45433F;
    --warning-text: #B9B5A7;
    --info-bg: #1B2B3C;
    --info-border: #33495F;
    --info-text: #BED8F0;
    --sidebar-bg: var(--primary-deep);
    --sidebar-divider: rgba(255, 255, 255, 0.1);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-active-bg: var(--primary-dark);
    --sidebar-accent: var(--accent-color);
    --focus-ring: rgba(var(--primary-rgb), 0.45);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --shadow-colored: rgba(var(--primary-rgb), 0.28);
    --overlay-bg: rgba(0, 0, 0, 0.8);
    --link-color: var(--primary-color);
    --link-hover: var(--primary-light);
    --input-bg: var(--background-medium);
    --input-bg-focus: var(--background-accent);
    --input-text: var(--text-light);
    --input-text-focus: var(--text-light);
    --input-border: var(--border-light);
    --input-border-focus: var(--primary-color);

    /* Ultimate Luxury Floating Shadows (Dark) */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.4), 0 12px 24px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 32px 64px rgba(0, 0, 0, 0.5), 0 16px 32px rgba(0, 0, 0, 0.3);

    /* Premium Shadow Glows (Dark) */
    --shadow-primary: 0 12px 32px rgba(var(--primary-rgb), 0.25);
    --shadow-secondary: 0 12px 32px rgba(var(--secondary-rgb), 0.25);

    /* Dark Mode Glass */
    --glass-bg: var(--sidebar-bg);
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
    --glass-blur: none;
    --glass-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
