:root {
	--ion-font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

	/* Desktop Layout Constraints */
	--app-max-width: 960px; /* md breakpoint - standard medium width */
	--app-desktop-breakpoint: 1024px; /* When to apply max-width */

	--ion-color-primary: #6c63ff;
	--ion-color-primary-rgb: 108, 99, 255;
	--ion-color-primary-contrast: #ffffff;
	--ion-color-primary-contrast-rgb: 255, 255, 255;
	--ion-color-primary-shade: #6057e0;
	--ion-color-primary-tint: #7b72ff;

	--ion-color-secondary: #ff7ccd;
	--ion-color-secondary-rgb: 255, 124, 205;
	--ion-color-secondary-contrast: #120621;
	--ion-color-secondary-contrast-rgb: 18, 6, 33;
	--ion-color-secondary-shade: #e06cb4;
	--ion-color-secondary-tint: #ff8bd2;

	--ion-color-tertiary: #48dcb5;
	--ion-color-tertiary-rgb: 72, 220, 181;
	--ion-color-tertiary-contrast: #041712;
	--ion-color-tertiary-contrast-rgb: 4, 23, 18;
	--ion-color-tertiary-shade: #40c3a0;
	--ion-color-tertiary-tint: #5ae0bd;

	--ion-color-success: #2dd36f;
	--ion-color-success-rgb: 45, 211, 111;
	--ion-color-success-contrast: #052110;
	--ion-color-success-contrast-rgb: 5, 33, 16;
	--ion-color-success-shade: #28ba62;
	--ion-color-success-tint: #42d77d;

	--ion-color-warning: #ffc409;
	--ion-color-warning-rgb: 255, 196, 9;
	--ion-color-warning-contrast: #1f1400;
	--ion-color-warning-contrast-rgb: 31, 20, 0;
	--ion-color-warning-shade: #e0ac08;
	--ion-color-warning-tint: #ffca22;

	--ion-color-danger: #ff4f6d;
	--ion-color-danger-rgb: 255, 79, 109;
	--ion-color-danger-contrast: #240209;
	--ion-color-danger-contrast-rgb: 36, 2, 9;
	--ion-color-danger-shade: #e04560;
	--ion-color-danger-tint: #ff627d;

	--ion-color-medium: #5f6e96;
	--ion-color-medium-rgb: 95, 110, 150;
	--ion-color-medium-contrast: #ffffff;
	--ion-color-medium-contrast-rgb: 255, 255, 255;
	--ion-color-medium-shade: #546185;
	--ion-color-medium-tint: #7080a1;

	--ion-color-light: #f6f7ff;
	--ion-color-light-rgb: 246, 247, 255;
	--ion-color-light-contrast: #0b1124;
	--ion-color-light-contrast-rgb: 11, 17, 36;
	--ion-color-light-shade: #d8dae0;
	--ion-color-light-tint: #f7f8ff;

	--ion-color-dark: #0f183a;
	--ion-color-dark-rgb: 15, 24, 58;
	--ion-color-dark-contrast: #ffffff;
	--ion-color-dark-contrast-rgb: 255, 255, 255;
	--ion-color-dark-shade: #0d1433;
	--ion-color-dark-tint: #252f4e;

	--app-page-background: #f5f6ff;
	--app-surface: #ffffff;
	--app-surface-elevated: rgba(255, 255, 255, 0.97);
	--app-surface-tinted: rgba(108, 99, 255, 0.06);
	--app-surface-glass: rgba(255, 255, 255, 0.95);
	--app-border-soft: rgba(15, 28, 67, 0.08);
	--app-border-strong: rgba(15, 28, 67, 0.18);
	--app-text-primary: #0f183a;
	--app-text-secondary: #5f6e96;
	--app-text-muted: #7a86ac;

	/* Link colors */
	--app-link-color: var(--ion-color-primary);
	--app-link-hover: var(--ion-color-primary-tint);
	--app-link-focus-rgb: var(--ion-color-primary-rgb);
	--app-hero-gradient-blue: linear-gradient(150deg, rgba(68, 112, 255, 0.95) 0%, rgba(24, 37, 90, 0.96) 95%);
	--app-hero-gradient-purple: linear-gradient(150deg, rgba(199, 116, 255, 0.94) 0%, rgba(86, 60, 173, 0.98) 95%);
	--app-auth-background: linear-gradient(140deg, #ecf0ff 0%, #f9faff 100%);
	--app-home-card-shadow: 0 24px 55px rgba(17, 32, 84, 0.25);
	--app-shadow-soft: 0 28px 45px rgba(15, 28, 67, 0.12);
	--app-shadow-strong: 0 35px 70px rgba(15, 28, 67, 0.18);
	--app-shadow-hero: 0 30px 65px rgba(13, 26, 67, 0.32);
	--app-input-surface: rgba(111, 98, 255, 0.08);
	--app-input-border: var(--app-border-strong);
	--app-input-focus-border: rgba(108, 99, 255, 0.55);
	--app-input-focus-shadow: 0 16px 30px rgba(108, 99, 255, 0.28);
	--app-hero-text: #ffffff;
	--app-hero-text-strong: rgba(255, 255, 255, 0.95);
	--app-hero-text-muted: rgba(255, 255, 255, 0.85);
	--app-hero-text-soft: rgba(255, 255, 255, 0.7);
	--app-hero-border: rgba(255, 255, 255, 0.08);
	--app-hero-border-strong: rgba(255, 255, 255, 0.2);
	--app-hero-card-background: rgba(255, 255, 255, 0.15);
	--app-hero-card-border: rgba(255, 255, 255, 0.2);
	--app-hero-highlight: rgba(255, 255, 255, 0.15);
	--app-hero-input-background: rgba(255, 255, 255, 0.1);
	--app-hero-input-border: rgba(255, 255, 255, 0.3);
	--app-hero-input-placeholder: rgba(255, 255, 255, 0.6);
	--app-hero-button-background: rgba(255, 255, 255, 0.95);
	--app-hero-chip-background: rgba(255, 255, 255, 0.15);
	--app-hero-chip-strong: rgba(255, 255, 255, 0.95);

	/* Disabled button tokens (used for coming soon / disabled CTAs) */
	--app-button-disabled-bg: rgba(15, 28, 67, 0.12);
	--app-button-disabled-text: rgba(15, 28, 67, 0.8);
	--app-button-disabled-border: rgba(15, 28, 67, 0.14);

	/* App header gradient + controls - light theme */
	--app-header-bg-start: var(--ion-color-primary);
	--app-header-bg-end: var(--ion-color-primary-tint);
	--app-header-gradient: linear-gradient(135deg, var(--app-header-bg-start) 0%, var(--app-header-bg-end) 100%);
	--app-header-border-color: rgba(15, 24, 58, 0.35);
	--app-header-shadow: 0 8px 22px rgba(15, 28, 77, 0.3);
	
	/* Header colors - light theme needs dark text on gradient */
	--app-header-text: #0f183a;
	--app-header-button-hover: rgba(15, 24, 58, 0.1);
	--app-header-button-focused: rgba(15, 24, 58, 0.15);
	--app-header-button-activated: rgba(15, 24, 58, 0.2);
	--app-header-button-ripple: rgba(15, 24, 58, 0.3);
}

body.dark {
	color-scheme: dark;

	--ion-color-primary: #9aa2ff;
	--ion-color-primary-rgb: 154, 162, 255;
	--ion-color-primary-contrast: #070a19;
	--ion-color-primary-contrast-rgb: 7, 10, 25;
	--ion-color-primary-shade: #8790e0;
	--ion-color-primary-tint: #a4abff;

	--ion-color-secondary: #ff9ddc;
	--ion-color-secondary-rgb: 255, 157, 220;
	--ion-color-secondary-contrast: #1c071f;
	--ion-color-secondary-contrast-rgb: 28, 7, 31;
	--ion-color-secondary-shade: #e089c1;
	--ion-color-secondary-tint: #ffaae1;

	--ion-color-tertiary: #5fe4c5;
	--ion-color-tertiary-rgb: 95, 228, 197;
	--ion-color-tertiary-contrast: #031712;
	--ion-color-tertiary-contrast-rgb: 3, 23, 18;
	--ion-color-tertiary-shade: #54caaa;
	--ion-color-tertiary-tint: #70e7cb;

	--ion-color-medium: #96a1c2;
	--ion-color-medium-rgb: 150, 161, 194;
	--ion-color-medium-contrast: #090d1c;
	--ion-color-medium-contrast-rgb: 9, 13, 28;
	--ion-color-medium-shade: #838fab;
	--ion-color-medium-tint: #a1abc8;

	--ion-color-light: #10162a;
	--ion-color-light-rgb: 16, 22, 42;
	--ion-color-light-contrast: #f5f7ff;
	--ion-color-light-contrast-rgb: 245, 247, 255;
	--ion-color-light-shade: #0e1224;
	--ion-color-light-tint: #1f2740;

	--ion-color-dark: #eef0ff;
	--ion-color-dark-rgb: 238, 240, 255;
	--ion-color-dark-contrast: #070b1a;
	--ion-color-dark-contrast-rgb: 7, 11, 26;
	--ion-color-dark-shade: #d1d4e0;
	--ion-color-dark-tint: #f0f1ff;

	--app-page-background: #080d1f;
	--app-surface: #141b33;
	--app-surface-elevated: rgba(22, 29, 50, 0.96);
	--app-surface-tinted: rgba(167, 176, 255, 0.12);
	--app-surface-glass: rgba(18, 24, 42, 0.92);
	--app-border-soft: rgba(255, 255, 255, 0.08);
	--app-border-strong: rgba(255, 255, 255, 0.16);
	--app-text-primary: #eef0ff;
	--app-text-secondary: #b3bbdf;
	--app-text-muted: #8c94be;

	/* Link colors for dark theme */
	--app-link-color: var(--ion-color-primary-tint, #a4abff);
	--app-link-hover: var(--ion-color-primary, #9aa2ff);
	--app-link-focus-rgb: var(--ion-color-primary-rgb, 154, 162, 255);
	--app-hero-gradient-blue: linear-gradient(150deg, rgba(41, 63, 152, 0.9) 0%, rgba(23, 31, 84, 0.96) 95%);
	--app-hero-gradient-purple: linear-gradient(150deg, rgba(126, 63, 185, 0.92) 0%, rgba(60, 34, 128, 0.97) 95%);
	--app-auth-background: linear-gradient(150deg, #091126 0%, #0d142d 100%);
	--app-home-card-shadow: 0 32px 75px rgba(1, 7, 22, 0.6);
	--app-shadow-soft: 0 30px 65px rgba(0, 4, 15, 0.58);
	--app-shadow-strong: 0 45px 90px rgba(0, 5, 18, 0.72);
	--app-shadow-hero: 0 45px 105px rgba(0, 6, 20, 0.75);
	--app-input-surface: rgba(167, 176, 255, 0.14);
	--app-input-border: var(--app-border-strong);
	--app-input-focus-border: rgba(154, 162, 255, 0.72);
	--app-input-focus-shadow: 0 20px 42px rgba(102, 114, 226, 0.45);
	--app-hero-text: #ffffff;
	--app-hero-text-strong: rgba(255, 255, 255, 0.96);
	--app-hero-text-muted: rgba(255, 255, 255, 0.88);
	--app-hero-text-soft: rgba(255, 255, 255, 0.7);
	--app-hero-border: rgba(255, 255, 255, 0.12);
	--app-hero-border-strong: rgba(255, 255, 255, 0.22);
	--app-hero-card-background: rgba(255, 255, 255, 0.18);
	--app-hero-card-border: rgba(255, 255, 255, 0.24);
	--app-hero-highlight: rgba(255, 255, 255, 0.2);
	--app-hero-input-background: rgba(255, 255, 255, 0.16);
	--app-hero-input-border: rgba(255, 255, 255, 0.35);
	--app-hero-input-placeholder: rgba(255, 255, 255, 0.7);
	--app-hero-button-background: rgba(255, 255, 255, 0.95);
	--app-hero-chip-background: rgba(255, 255, 255, 0.18);
	--app-hero-chip-strong: rgba(255, 255, 255, 0.96);
	/* Disabled button tokens for dark theme */
	--app-button-disabled-bg: rgba(255, 255, 255, 0.12);
	--app-button-disabled-text: rgba(255, 255, 255, 0.96);
	--app-button-disabled-border: rgba(255, 255, 255, 0.12);

	/* App header gradient + controls - dark theme */
	--app-header-bg-start: #1a2138; /* neutral slate start */
	--app-header-bg-end: #252c45;   /* slightly lighter slate end */
	--app-header-gradient: linear-gradient(135deg, var(--app-header-bg-start) 0%, var(--app-header-bg-end) 100%);
	--app-header-border-color: rgba(0, 0, 0, 0.65);
	--app-header-shadow: 0 10px 26px rgba(0, 0, 0, 0.85);
	
	/* Header colors - bright gradient headers need light text in dark mode too */
	--app-header-text: #ffffff;
	--app-header-button-hover: rgba(255, 255, 255, 0.15);
	--app-header-button-focused: rgba(255, 255, 255, 0.2);
	--app-header-button-activated: rgba(255, 255, 255, 0.25);
	--app-header-button-ripple: rgba(255, 255, 255, 0.3);
}

/* ============================================
	FOREST THEME
	-- Deep soil browns + moss greens
   ============================================ */
body[data-theme='forest'] {
	color-scheme: dark;

	--ion-color-primary: #2a1a0f;
	--ion-color-secondary: #5b3c1f;
	--ion-color-tertiary: #7a8c5c;

	--app-page-background: #0d0b07;
	/* Lighten surface tokens slightly to increase card separation */
	--app-surface: #241e12;
	--app-surface-elevated: rgba(36, 30, 18, 0.98);
	--app-surface-tinted: rgba(122, 140, 92, 0.12);
	--app-surface-glass: rgba(24, 20, 11, 0.94);
	--app-border-soft: rgba(255, 255, 255, 0.12);
	--app-border-strong: rgba(255, 255, 255, 0.22);
	--app-text-primary: #f5e9d7;
	--app-text-secondary: #cfc2ad;
	--app-text-muted: #a89980;

	--app-hero-gradient-blue: linear-gradient(145deg, rgba(17, 18, 15, 0.98) 0%, rgba(42, 30, 19, 0.96) 60%, rgba(122, 140, 92, 0.85) 100%);
	--app-hero-gradient-purple: linear-gradient(145deg, rgba(91, 60, 31, 0.9) 0%, rgba(46, 38, 23, 0.96) 60%, rgba(122, 140, 92, 0.95) 100%);

	--app-auth-background: linear-gradient(140deg, #0d0b07 0%, #1e160e 50%, #4e3a21 100%);
	--app-home-card-shadow: 0 26px 60px rgba(11, 8, 5, 0.46);
	--app-shadow-soft: 0 26px 60px rgba(11, 8, 5, 0.36);
	--app-shadow-strong: 0 40px 85px rgba(11, 8, 5, 0.48);
	--app-shadow-hero: 0 34px 75px rgba(11, 8, 5, 0.55);
	--app-input-surface: rgba(255, 255, 255, 0.06);
	--app-input-focus-border: rgba(172, 138, 102, 0.65);
	--app-input-focus-shadow: 0 16px 32px rgba(172, 138, 102, 0.3);

	/* Disabled button tokens for forest theme */
	--app-button-disabled-bg: rgba(255, 255, 255, 0.12);
	--app-button-disabled-text: var(--app-text-primary);
	--app-button-disabled-border: rgba(255, 255, 255, 0.12);

	/* Link colors for forest theme */
	--app-link-color: var(--ion-color-tertiary, #7a8c5c);
	--app-link-hover: rgba(122, 140, 92, 0.95);
	--app-link-focus-rgb: 122, 140, 92;

	--app-header-bg-start: #2a1a0f;
	--app-header-bg-end: #5b3c1f;
	--app-header-gradient: linear-gradient(135deg, var(--app-header-bg-start) 0%, var(--app-header-bg-end) 100%);
	--app-header-border-color: rgba(0, 0, 0, 0.6);
	--app-header-shadow: 0 10px 28px rgba(0, 0, 0, 0.65);
	--app-header-text: #fdfaf5;
	--app-hero-text: #fdfaf5;
	--app-hero-text-strong: #fdfaf5;
	--app-hero-text-muted: #fdfaf5;
	--app-hero-text-soft: #fdfaf5;
}

/* ============================================
	DESERT DUNES (PIKTOCHART EARTH PALETTE)
	-- Golden sand + warm clay
   ============================================ */
body[data-theme='desert-dunes'] {
	color-scheme: light;

	--ion-color-primary: #c38b65;
	--ion-color-secondary: #e0c19c;
	--ion-color-tertiary: #9f7b55;

	--app-page-background: #fdf4e6;
	--app-surface: #fff9f0;
	--app-border-soft: rgba(143, 97, 64, 0.2);
	--app-border-strong: rgba(143, 97, 64, 0.35);
	--app-text-primary: #3c2b1c;
	--app-text-secondary: #8b6b50;
	--app-text-muted: #b4a38a;

	--app-hero-gradient-blue: linear-gradient(145deg, rgba(195, 139, 101, 0.95) 0%, rgba(224, 193, 156, 0.95) 60%, rgba(255, 242, 235, 0.97) 100%);
	--app-hero-gradient-purple: linear-gradient(145deg, rgba(165, 103, 63, 0.92) 0%, rgba(194, 148, 110, 0.94) 60%, rgba(255, 242, 235, 1) 100%);

	--app-auth-background: linear-gradient(140deg, #fdf4e6 0%, #ffeacc 50%, #c38b65 100%);
	--app-home-card-shadow: 0 24px 60px rgba(122, 76, 42, 0.25);
	--app-shadow-soft: 0 22px 45px rgba(122, 76, 42, 0.2);
	--app-shadow-strong: 0 35px 70px rgba(122, 76, 42, 0.3);
	--app-shadow-hero: 0 30px 65px rgba(122, 76, 42, 0.35);
	--app-input-surface: rgba(195, 139, 101, 0.1);
	--app-input-focus-border: rgba(195, 139, 101, 0.55);
	--app-input-focus-shadow: 0 16px 30px rgba(195, 139, 101, 0.25);

	--app-header-bg-start: #c38b65;
	--app-header-bg-end: #e0c19c;
	--app-header-gradient: linear-gradient(135deg, var(--app-header-bg-start) 0%, var(--app-header-bg-end) 100%);
	--app-header-border-color: rgba(118, 80, 53, 0.4);
	--app-header-shadow: 0 10px 26px rgba(118, 80, 53, 0.35);
	--app-header-text: #3c2b1c;
	--app-hero-text: #3c2b1c;
	--app-hero-text-strong: #3c2b1c;
	--app-hero-text-muted: #3c2b1c;
	--app-hero-text-soft: #3c2b1c;
}

/* ============================================
	MOUNTAIN MIST (PIKTOCHART EARTH PALETTE)
	-- Cool slate blues + fog greys
   ============================================ */
body[data-theme='mountain-mist'] {
	color-scheme: dark;

	--ion-color-primary: #4a5670;
	--ion-color-secondary: #7d88a0;
	--ion-color-tertiary: #b2bac7;

	--app-page-background: #0f131c;
	--app-surface: #1f2430;
	--app-surface-elevated: rgba(31, 36, 48, 0.98);
	--app-surface-tinted: rgba(125, 136, 160, 0.12);
	--app-surface-glass: rgba(26, 31, 44, 0.94);
	--app-border-soft: rgba(255, 255, 255, 0.08);
	--app-border-strong: rgba(255, 255, 255, 0.2);
	--app-text-primary: #e8edf5;
	--app-text-secondary: #c2c9d7;
	--app-text-muted: #949cb0;

	--app-hero-gradient-blue: linear-gradient(145deg, rgba(15, 19, 28, 0.96) 0%, rgba(74, 86, 112, 0.95) 60%, rgba(178, 197, 212, 0.92) 100%);
	--app-hero-gradient-purple: linear-gradient(145deg, rgba(97, 108, 131, 0.92) 0%, rgba(44, 56, 76, 0.96) 60%, rgba(178, 197, 212, 0.95) 100%);

	--app-auth-background: linear-gradient(140deg, #0f131c 0%, #1f2631 50%, #4c5566 100%);
	--app-home-card-shadow: 0 28px 60px rgba(12, 15, 24, 0.45);
	--app-shadow-soft: 0 24px 50px rgba(12, 15, 24, 0.35);
	--app-shadow-strong: 0 38px 85px rgba(12, 15, 24, 0.55);
	--app-shadow-hero: 0 34px 70px rgba(12, 15, 24, 0.55);
	--app-input-surface: rgba(255, 255, 255, 0.06);
	--app-input-focus-border: rgba(125, 150, 182, 0.65);
	--app-input-focus-shadow: 0 18px 32px rgba(125, 150, 182, 0.3);

	--app-header-bg-start: #4a5670;
	--app-header-bg-end: #7d88a0;
	--app-header-gradient: linear-gradient(135deg, var(--app-header-bg-start) 0%, var(--app-header-bg-end) 100%);
	--app-header-border-color: rgba(9, 13, 24, 0.6);
	--app-header-shadow: 0 10px 28px rgba(6, 7, 14, 0.6);
	--app-header-text: #f5f6fa;
	--app-hero-text: #f5f6fa;
	--app-hero-text-strong: #f5f6fa;
	--app-hero-text-muted: #f5f6fa;
	--app-hero-text-soft: #f5f6fa;
}

/* ============================================
	OCEAN DEPTHS (PIKTOCHART EARTH PALETTE)
	-- Midnight navy + aqua highlights
   ============================================ */
body[data-theme='ocean-depths'] {
	color-scheme: dark;

	--ion-color-primary: #013a63;
	--ion-color-secondary: #0b5c7d;
	--ion-color-tertiary: #2a9bd1;

	--app-page-background: #011427;
	--app-surface: #031b30;
	--app-surface-elevated: rgba(3, 27, 48, 0.98);
	--app-surface-tinted: rgba(42, 155, 209, 0.12);
	--app-surface-glass: rgba(2, 22, 39, 0.94);
	--app-border-soft: rgba(255, 255, 255, 0.08);
	--app-border-strong: rgba(255, 255, 255, 0.2);
	--app-text-primary: #e8f6ff;
	--app-text-secondary: #a7cfe2;
	--app-text-muted: #80a4b8;

	--app-hero-gradient-blue: linear-gradient(145deg, rgba(1, 20, 39, 0.95) 0%, rgba(3, 37, 60, 0.96) 60%, rgba(42, 155, 209, 0.92) 100%);
	--app-hero-gradient-purple: linear-gradient(145deg, rgba(11, 92, 125, 0.92) 0%, rgba(25, 140, 182, 0.95) 60%, rgba(123, 202, 233, 0.95) 100%);

	--app-auth-background: linear-gradient(140deg, #011427 0%, #04244a 50%, #0b5c7d 100%);
	--app-home-card-shadow: 0 28px 60px rgba(4, 9, 22, 0.6);
	--app-shadow-soft: 0 24px 50px rgba(4, 9, 22, 0.4);
	--app-shadow-strong: 0 38px 85px rgba(4, 9, 22, 0.6);
	--app-shadow-hero: 0 34px 75px rgba(4, 9, 22, 0.6);
	--app-input-surface: rgba(42, 155, 209, 0.08);
	--app-input-focus-border: rgba(42, 155, 209, 0.55);
	--app-input-focus-shadow: 0 16px 30px rgba(42, 155, 209, 0.35);

	--app-header-bg-start: #013a63;
	--app-header-bg-end: #0b5c7d;
	--app-header-gradient: linear-gradient(135deg, var(--app-header-bg-start) 0%, var(--app-header-bg-end) 100%);
	--app-header-border-color: rgba(3, 25, 42, 0.55);
	--app-header-shadow: 0 10px 28px rgba(0, 11, 24, 0.65);
	--app-header-text: #fdfaf5;
	--app-hero-text: #fdfaf5;
	--app-hero-text-strong: #fdfaf5;
	--app-hero-text-muted: #fdfaf5;
	--app-hero-text-soft: #fdfaf5;
}

/* ============================================
	AUTUMN LEAVES (PIKTOCHART EARTH PALETTE)
	-- Copper orange + harvest gold
   ============================================ */
body[data-theme='autumn-leaves'] {
	color-scheme: light;

	--ion-color-primary: #a65e2e;
	--ion-color-secondary: #d68a3d;
	--ion-color-tertiary: #e6b65d;

	--app-page-background: #f9e8d6;
	--app-surface: #fff6eb;
	--app-border-soft: rgba(166, 94, 46, 0.2);
	--app-border-strong: rgba(166, 94, 46, 0.35);
	--app-text-primary: #3b240f;
	--app-text-secondary: #855a3a;
	--app-text-muted: #b08667;

	--app-hero-gradient-blue: linear-gradient(145deg, rgba(166, 94, 46, 0.94) 0%, rgba(214, 138, 61, 0.94) 60%, rgba(228, 182, 93, 0.92) 100%);
	--app-hero-gradient-purple: linear-gradient(145deg, rgba(200, 116, 85, 0.9) 0%, rgba(255, 214, 160, 0.94) 60%, rgba(249, 232, 214, 0.96) 100%);

	--app-auth-background: linear-gradient(140deg, #f9e8d6 0%, #f2d6a0 50%, #a65e2e 100%);
	--app-home-card-shadow: 0 22px 52px rgba(82, 48, 20, 0.22);
	--app-shadow-soft: 0 20px 45px rgba(82, 48, 20, 0.18);
	--app-shadow-strong: 0 36px 76px rgba(82, 48, 20, 0.3);
	--app-shadow-hero: 0 30px 65px rgba(82, 48, 20, 0.35);
	--app-input-surface: rgba(166, 94, 46, 0.08);
	--app-input-focus-border: rgba(166, 94, 46, 0.55);
	--app-input-focus-shadow: 0 16px 30px rgba(166, 94, 46, 0.35);

	--app-header-bg-start: #a65e2e;
	--app-header-bg-end: #d68a3d;
	--app-header-gradient: linear-gradient(135deg, var(--app-header-bg-start) 0%, var(--app-header-bg-end) 100%);
	--app-header-border-color: rgba(115, 67, 35, 0.35);
	--app-header-shadow: 0 10px 26px rgba(115, 67, 35, 0.4);
	--app-header-text: #3b240f;
	--app-hero-text: #3b240f;
	--app-hero-text-strong: #3b240f;
	--app-hero-text-muted: #3b240f;
	--app-hero-text-soft: #3b240f;
}

/* ============================================
	ROCKY TERRAIN (PIKTOCHART EARTH PALETTE)
	-- Taupe stone + foggy beige
   ============================================ */
body[data-theme='rocky-terrain'] {
	color-scheme: light;

	--ion-color-primary: #7b6a4d;
	--ion-color-secondary: #a89f91;
	--ion-color-tertiary: #c4b6a6;

	--app-page-background: #f5f5f5;
	--app-surface: #ffffff;
	--app-border-soft: rgba(123, 106, 77, 0.2);
	--app-border-strong: rgba(123, 106, 77, 0.35);
	--app-text-primary: #2f2a23;
	--app-text-secondary: #7d7468;
	--app-text-muted: #a39a8f;

	--app-hero-gradient-blue: linear-gradient(145deg, rgba(123, 106, 77, 0.9) 0%, rgba(168, 159, 145, 0.9) 60%, rgba(241, 239, 236, 0.95) 100%);
	--app-hero-gradient-purple: linear-gradient(145deg, rgba(150, 138, 116, 0.9) 0%, rgba(236, 232, 219, 0.95) 60%, rgba(255, 255, 255, 0.95) 100%);

	--app-auth-background: linear-gradient(140deg, #f5f5f5 0%, #ede9e2 50%, #a89f91 100%);
	--app-home-card-shadow: 0 22px 48px rgba(94, 88, 80, 0.25);
	--app-shadow-soft: 0 20px 40px rgba(94, 88, 80, 0.2);
	--app-shadow-strong: 0 35px 70px rgba(94, 88, 80, 0.35);
	--app-shadow-hero: 0 30px 60px rgba(94, 88, 80, 0.35);
	--app-input-surface: rgba(123, 106, 77, 0.08);
	--app-input-focus-border: rgba(123, 106, 77, 0.55);
	--app-input-focus-shadow: 0 16px 30px rgba(123, 106, 77, 0.25);

	--app-header-bg-start: #7b6a4d;
	--app-header-bg-end: #a89f91;
	--app-header-gradient: linear-gradient(135deg, var(--app-header-bg-start) 0%, var(--app-header-bg-end) 100%);
	--app-header-border-color: rgba(82, 74, 56, 0.4);
	--app-header-shadow: 0 10px 28px rgba(82, 74, 56, 0.4);
	--app-header-text: #2f2a23;
	--app-hero-text: #2f2a23;
	--app-hero-text-strong: #2f2a23;
	--app-hero-text-muted: #2f2a23;
	--app-hero-text-soft: #2f2a23;
}

/* ============================================
	TROPICAL JUNGLE (PIKTOCHART EARTH PALETTE)
	-- Deep emerald + bright canopy green
   ============================================ */
body[data-theme='tropical-jungle'] {
	color-scheme: dark;

	--ion-color-primary: #0b3d20;
	--ion-color-secondary: #236436;
	--ion-color-tertiary: #7dc87d;

	--app-page-background: #08160c;
	--app-surface: #0f1f14;
	--app-border-soft: rgba(255, 255, 255, 0.08);
	--app-border-strong: rgba(255, 255, 255, 0.2);
	--app-text-primary: #d8edd8;
	--app-text-secondary: #9ecba1;
	--app-text-muted: #7aa48b;

	--app-hero-gradient-blue: linear-gradient(145deg, rgba(8, 22, 12, 0.95) 0%, rgba(11, 61, 32, 0.96) 60%, rgba(125, 200, 125, 0.92) 100%);
	--app-hero-gradient-purple: linear-gradient(145deg, rgba(17, 86, 47, 0.92) 0%, rgba(39, 144, 67, 0.95) 60%, rgba(141, 224, 170, 0.95) 100%);

	--app-auth-background: linear-gradient(140deg, #08160c 0%, #0f2b19 50%, #236436 100%);
	--app-home-card-shadow: 0 26px 60px rgba(5, 13, 7, 0.5);
	--app-shadow-soft: 0 24px 50px rgba(5, 13, 7, 0.4);
	--app-shadow-strong: 0 38px 75px rgba(5, 13, 7, 0.55);
	--app-shadow-hero: 0 34px 70px rgba(5, 13, 7, 0.55);
	--app-input-surface: rgba(125, 200, 125, 0.08);
	--app-input-focus-border: rgba(125, 200, 125, 0.55);
	--app-input-focus-shadow: 0 16px 32px rgba(125, 200, 125, 0.3);

	--app-header-bg-start: #0b3d20;
	--app-header-bg-end: #236436;
	--app-header-gradient: linear-gradient(135deg, var(--app-header-bg-start) 0%, var(--app-header-bg-end) 100%);
	--app-header-border-color: rgba(5, 10, 5, 0.65);
	--app-header-shadow: 0 10px 28px rgba(3, 7, 4, 0.7);
	--app-header-text: #d8edd8;
	--app-hero-text: #d8edd8;
	--app-hero-text-strong: #d8edd8;
	--app-hero-text-muted: #d8edd8;
	--app-hero-text-soft: #d8edd8;
}

/* ============================================
	CLAY EARTH (PIKTOCHART EARTH PALETTE)
	-- Soft terracotta + baked clay
   ============================================ */
body[data-theme='clay-earth'] {
	color-scheme: light;

	--ion-color-primary: #c76a4a;
	--ion-color-secondary: #d89a6a;
	--ion-color-tertiary: #f29e78;

	--app-page-background: #f9e8d6;
	--app-surface: #f2d1b0;
	--app-border-soft: rgba(199, 106, 74, 0.14);
	--app-border-strong: rgba(199, 106, 74, 0.26);
	--app-text-primary: #3b2618;
	--app-text-secondary: #7b5a41;
	--app-text-muted: #9a7a5c;

	--app-hero-gradient-blue: linear-gradient(145deg, rgba(199, 106, 74, 0.98) 0%, rgba(251, 227, 206, 0.96) 60%, rgba(249, 232, 214, 0.96) 100%);
	--app-hero-gradient-purple: linear-gradient(145deg, rgba(216, 154, 106, 0.96) 0%, rgba(225, 184, 154, 0.98) 60%, rgba(249, 232, 214, 1) 100%);

	--app-auth-background: linear-gradient(140deg, #f9e8d6 0%, #f2d1b0 50%, #c76a4a 100%);
	--app-home-card-shadow: 0 24px 55px rgba(88, 54, 34, 0.25);
	--app-shadow-soft: 0 24px 45px rgba(88, 54, 34, 0.16);
	--app-shadow-strong: 0 35px 70px rgba(88, 54, 34, 0.24);
	--app-shadow-hero: 0 30px 65px rgba(88, 54, 34, 0.32);
	--app-input-surface: rgba(199, 106, 74, 0.08);
	--app-input-focus-border: rgba(199, 106, 74, 0.55);
	--app-input-focus-shadow: 0 16px 30px rgba(199, 106, 74, 0.28);

	--app-header-bg-start: #c76a4a;
	--app-header-bg-end: #d89a6a;
	--app-header-gradient: linear-gradient(135deg, var(--app-header-bg-start) 0%, var(--app-header-bg-end) 100%);
	--app-header-border-color: rgba(88, 54, 34, 0.35);
	--app-header-shadow: 0 8px 22px rgba(88, 54, 34, 0.28);
	--app-header-text: #fdfaf5;
	--app-hero-text: #3b2618;
	--app-hero-text-strong: #3b2618;
	--app-hero-text-muted: #3b2618;
	--app-hero-text-soft: #3b2618;
}

/* ============================================
	GLACIAL ICE (PIKTOCHART EARTH PALETTE)
	-- Arctic navy + glacier cyan
   ============================================ */
body[data-theme='glacial-ice'] {
	color-scheme: light;

	--ion-color-primary: #0f3f63;
	--ion-color-secondary: #1a5d93;
	--ion-color-tertiary: #5ab0df;

	--app-page-background: #e8f4fb;
	--app-surface: #f3fbff;
	--app-border-soft: rgba(15, 64, 99, 0.15);
	--app-border-strong: rgba(15, 64, 99, 0.3);
	--app-text-primary: #0f2335;
	--app-text-secondary: #52748b;
	--app-text-muted: #8aa6bf;

	--app-hero-gradient-blue: linear-gradient(145deg, rgba(15, 64, 99, 0.95) 0%, rgba(26, 93, 147, 0.96) 60%, rgba(209, 233, 248, 0.95) 100%);
	--app-hero-gradient-purple: linear-gradient(145deg, rgba(20, 109, 168, 0.92) 0%, rgba(125, 176, 216, 0.95) 60%, rgba(232, 245, 254, 0.98) 100%);

	--app-auth-background: linear-gradient(140deg, #e8f4fb 0%, #d1e8f2 50%, #0f3f63 100%);
	--app-home-card-shadow: 0 22px 55px rgba(11, 30, 52, 0.25);
	--app-shadow-soft: 0 20px 42px rgba(11, 30, 52, 0.2);
	--app-shadow-strong: 0 35px 68px rgba(11, 30, 52, 0.35);
	--app-shadow-hero: 0 30px 70px rgba(11, 30, 52, 0.33);
	--app-input-surface: rgba(15, 64, 99, 0.08);
	--app-input-focus-border: rgba(15, 64, 99, 0.55);
	--app-input-focus-shadow: 0 16px 30px rgba(15, 64, 99, 0.3);

	--app-header-bg-start: #0f3f63;
	--app-header-bg-end: #1a5d93;
	--app-header-gradient: linear-gradient(135deg, var(--app-header-bg-start) 0%, var(--app-header-bg-end) 100%);
	--app-header-border-color: rgba(6, 31, 55, 0.45);
	--app-header-shadow: 0 10px 26px rgba(4, 22, 41, 0.5);
	--app-header-text: #0f2335;
	--app-hero-text: #0f2335;
	--app-hero-text-strong: #0f2335;
	--app-hero-text-muted: #0f2335;
	--app-hero-text-soft: #0f2335;
}

/* ============================================
	WILDFLOWER MEADOW (PIKTOCHART EARTH PALETTE)
	-- Soft petals + airy greens
   ============================================ */
body[data-theme='wildflower-meadow'] {
	color-scheme: light;

	--ion-color-primary: #ffb4c5;
	--ion-color-secondary: #f7d4e3;
	--ion-color-tertiary: #d6f2ec;

	--app-page-background: #fff6f9;
	--app-surface: #ffffff;
	--app-border-soft: rgba(255, 180, 197, 0.25);
	--app-border-strong: rgba(255, 180, 197, 0.4);
	--app-text-primary: #3f2f34;
	--app-text-secondary: #7a5f6b;
	--app-text-muted: #a18d94;

	--app-hero-gradient-blue: linear-gradient(145deg, rgba(255, 180, 197, 0.95) 0%, rgba(247, 212, 227, 0.95) 60%, rgba(255, 255, 255, 0.98) 100%);
	--app-hero-gradient-purple: linear-gradient(145deg, rgba(221, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.95) 60%, rgba(255, 255, 255, 0.96) 100%);

	--app-auth-background: linear-gradient(140deg, #fff6f9 0%, #fff1f4 50%, #ffb4c5 100%);
	--app-home-card-shadow: 0 22px 50px rgba(181, 143, 154, 0.22);
	--app-shadow-soft: 0 20px 42px rgba(181, 143, 154, 0.18);
	--app-shadow-strong: 0 36px 76px rgba(181, 143, 154, 0.32);
	--app-shadow-hero: 0 30px 65px rgba(181, 143, 154, 0.35);
	--app-input-surface: rgba(255, 180, 197, 0.08);
	--app-input-focus-border: rgba(255, 180, 197, 0.55);
	--app-input-focus-shadow: 0 16px 30px rgba(255, 180, 197, 0.3);

	--app-header-bg-start: #ffb4c5;
	--app-header-bg-end: #f7d4e3;
	--app-header-gradient: linear-gradient(135deg, var(--app-header-bg-start) 0%, var(--app-header-bg-end) 100%);
	--app-header-border-color: rgba(188, 125, 139, 0.4);
	--app-header-shadow: 0 10px 26px rgba(188, 125, 139, 0.35);
	--app-header-text: #3f2f34;
	--app-hero-text: #3f2f34;
	--app-hero-text-strong: #3f2f34;
	--app-hero-text-muted: #3f2f34;
	--app-hero-text-soft: #3f2f34;
}

/* ============================================
	SAVANNA SUNSET (PIKTOCHART EARTH PALETTE)
	-- Amber grasses + setting sun
   ============================================ */
body[data-theme='savanna-sunset'] {
	color-scheme: light;

	--ion-color-primary: #d68a3d;
	--ion-color-secondary: #e6b65d;
	--ion-color-tertiary: #f5d29a;

	--app-page-background: #fef4e7;
	--app-surface: #fff7ef;
	--app-border-soft: rgba(214, 138, 61, 0.2);
	--app-border-strong: rgba(214, 138, 61, 0.35);
	--app-text-primary: #3d2610;
	--app-text-secondary: #8d6235;
	--app-text-muted: #b48b64;

	--app-hero-gradient-blue: linear-gradient(145deg, rgba(214, 138, 61, 0.95) 0%, rgba(230, 182, 93, 0.95) 60%, rgba(245, 210, 154, 0.96) 100%);
	--app-hero-gradient-purple: linear-gradient(145deg, rgba(230, 182, 93, 0.92) 0%, rgba(255, 227, 188, 0.95) 60%, rgba(255, 245, 229, 0.98) 100%);

	--app-auth-background: linear-gradient(140deg, #fef4e7 0%, #f8e5d0 50%, #ebc38a 100%);
	--app-home-card-shadow: 0 22px 52px rgba(86, 58, 27, 0.2);
	--app-shadow-soft: 0 20px 42px rgba(86, 58, 27, 0.18);
	--app-shadow-strong: 0 36px 70px rgba(86, 58, 27, 0.3);
	--app-shadow-hero: 0 30px 65px rgba(86, 58, 27, 0.35);
	--app-input-surface: rgba(214, 138, 61, 0.08);
	--app-input-focus-border: rgba(214, 138, 61, 0.55);
	--app-input-focus-shadow: 0 16px 30px rgba(214, 138, 61, 0.3);

	--app-header-bg-start: #d68a3d;
	--app-header-bg-end: #e6b65d;
	--app-header-gradient: linear-gradient(135deg, var(--app-header-bg-start) 0%, var(--app-header-bg-end) 100%);
	--app-header-border-color: rgba(130, 78, 30, 0.4);
	--app-header-shadow: 0 10px 26px rgba(130, 78, 30, 0.35);
	--app-header-text: #3d2610;
	--app-hero-text: #3d2610;
	--app-hero-text-strong: #3d2610;
	--app-hero-text-muted: #3d2610;
	--app-hero-text-soft: #3d2610;
}

/* ============================================
	RAINFOREST CANOPY (PIKTOCHART EARTH PALETTE)
	-- Shadowed understory + bright canopy
   ============================================ */
body[data-theme='rainforest-canopy'] {
	color-scheme: dark;

	--ion-color-primary: #0f3d27;
	--ion-color-secondary: #18663d;
	--ion-color-tertiary: #2f8f55;

	--app-page-background: #06130a;
	--app-surface: #0d2313;
	--app-border-soft: rgba(255, 255, 255, 0.08);
	--app-border-strong: rgba(255, 255, 255, 0.2);
	--app-text-primary: #d7f1db;
	--app-text-secondary: #9fd0a9;
	--app-text-muted: #7a9b7c;

	--app-hero-gradient-blue: linear-gradient(145deg, rgba(6, 19, 10, 0.95) 0%, rgba(3, 61, 47, 0.96) 60%, rgba(47, 143, 85, 0.92) 100%);
	--app-hero-gradient-purple: linear-gradient(145deg, rgba(5, 81, 48, 0.92) 0%, rgba(61, 130, 80, 0.95) 60%, rgba(136, 202, 166, 0.95) 100%);

	--app-auth-background: linear-gradient(140deg, #06130a 0%, #0f2e1d 50%, #18663d 100%);
	--app-home-card-shadow: 0 28px 60px rgba(5, 11, 6, 0.55);
	--app-shadow-soft: 0 24px 50px rgba(5, 11, 6, 0.4);
	--app-shadow-strong: 0 38px 85px rgba(5, 11, 6, 0.55);
	--app-shadow-hero: 0 34px 75px rgba(5, 11, 6, 0.55);
	--app-input-surface: rgba(47, 143, 85, 0.08);
	--app-input-focus-border: rgba(47, 143, 85, 0.55);
	--app-input-focus-shadow: 0 16px 30px rgba(47, 143, 85, 0.33);

	--app-header-bg-start: #0f3d27;
	--app-header-bg-end: #18663d;
	--app-header-gradient: linear-gradient(135deg, var(--app-header-bg-start) 0%, var(--app-header-bg-end) 100%);
	--app-header-border-color: rgba(4, 11, 8, 0.65);
	--app-header-shadow: 0 10px 28px rgba(2, 6, 4, 0.7);
	--app-header-text: #d7f1db;
	--app-hero-text: #d7f1db;
	--app-hero-text-strong: #d7f1db;
	--app-hero-text-muted: #d7f1db;
	--app-hero-text-soft: #d7f1db;
}

/* ============================================
	PEBBLE BEACH (PIKTOCHART EARTH PALETTE)
	-- Driftwood greys + soft foam
   ============================================ */
body[data-theme='pebble-beach'] {
	color-scheme: light;

	--ion-color-primary: #a1a5a6;
	--ion-color-secondary: #c9c6c4;
	--ion-color-tertiary: #f3f2f0;

	--app-page-background: #f9fafb;
	--app-surface: #ffffff;
	--app-border-soft: rgba(161, 165, 166, 0.25);
	--app-border-strong: rgba(161, 165, 166, 0.45);
	--app-text-primary: #1d1f21;
	--app-text-secondary: #6a6d6f;
	--app-text-muted: #8c9093;

	--app-hero-gradient-blue: linear-gradient(145deg, rgba(161, 165, 166, 0.95) 0%, rgba(201, 198, 196, 0.95) 60%, rgba(243, 242, 240, 1) 100%);
	--app-hero-gradient-purple: linear-gradient(145deg, rgba(163, 169, 183, 0.92) 0%, rgba(225, 227, 224, 0.95) 60%, rgba(255, 255, 255, 0.96) 100%);

	--app-auth-background: linear-gradient(140deg, #f9fafb 0%, #f4f5f5 50%, #a1a5a6 100%);
	--app-home-card-shadow: 0 22px 55px rgba(132, 134, 136, 0.25);
	--app-shadow-soft: 0 20px 45px rgba(132, 134, 136, 0.2);
	--app-shadow-strong: 0 36px 70px rgba(132, 134, 136, 0.35);
	--app-shadow-hero: 0 30px 65px rgba(132, 134, 136, 0.35);
	--app-input-surface: rgba(161, 165, 166, 0.08);
	--app-input-focus-border: rgba(161, 165, 166, 0.55);
	--app-input-focus-shadow: 0 16px 30px rgba(161, 165, 166, 0.3);

	--app-header-bg-start: #a1a5a6;
	--app-header-bg-end: #c9c6c4;
	--app-header-gradient: linear-gradient(135deg, var(--app-header-bg-start) 0%, var(--app-header-bg-end) 100%);
	--app-header-border-color: rgba(105, 108, 110, 0.4);
	--app-header-shadow: 0 10px 26px rgba(105, 108, 110, 0.35);
	--app-header-text: #1d1f21;
	--app-hero-text: #1d1f21;
	--app-hero-text-strong: #1d1f21;
	--app-hero-text-muted: #1d1f21;
	--app-hero-text-soft: #1d1f21;
}

/* ============================================
	LAVA FLOW (PIKTOCHART EARTH PALETTE)
	-- Molten reds + volcanic rock
   ============================================ */
body[data-theme='lava-flow'] {
	color-scheme: dark;

	--ion-color-primary: #b41f1f;
	--ion-color-secondary: #e04b24;
	--ion-color-tertiary: #f6a34f;

	--app-page-background: #1c0b0b;
	--app-surface: #2b1414;
	--app-border-soft: rgba(255, 255, 255, 0.08);
	--app-border-strong: rgba(255, 255, 255, 0.2);
	--app-text-primary: #ffe7e2;
	--app-text-secondary: #f2bdb0;
	--app-text-muted: #c97d71;

	--app-hero-gradient-blue: linear-gradient(145deg, rgba(180, 31, 31, 0.95) 0%, rgba(224, 75, 36, 0.95) 60%, rgba(246, 163, 79, 0.92) 100%);
	--app-hero-gradient-purple: linear-gradient(145deg, rgba(184, 42, 42, 0.92) 0%, rgba(246, 163, 79, 0.95) 60%, rgba(255, 240, 226, 0.95) 100%);

	--app-auth-background: linear-gradient(140deg, #1c0b0b 0%, #380f0f 50%, #e04b24 100%);
	--app-home-card-shadow: 0 28px 60px rgba(13, 4, 4, 0.55);
	--app-shadow-soft: 0 24px 50px rgba(13, 4, 4, 0.45);
	--app-shadow-strong: 0 38px 85px rgba(13, 4, 4, 0.55);
	--app-shadow-hero: 0 34px 70px rgba(13, 4, 4, 0.55);
	--app-input-surface: rgba(180, 31, 31, 0.08);
	--app-input-focus-border: rgba(180, 31, 31, 0.55);
	--app-input-focus-shadow: 0 16px 30px rgba(180, 31, 31, 0.3);

	--app-header-bg-start: #b41f1f;
	--app-header-bg-end: #e04b24;
	--app-header-gradient: linear-gradient(135deg, var(--app-header-bg-start) 0%, var(--app-header-bg-end) 100%);
	--app-header-border-color: rgba(83, 13, 13, 0.6);
	--app-header-shadow: 0 10px 28px rgba(27, 7, 7, 0.7);
	--app-header-text: #ffe7e2;
	--app-hero-text: #ffe7e2;
	--app-hero-text-strong: #ffe7e2;
	--app-hero-text-muted: #ffe7e2;
	--app-hero-text-soft: #ffe7e2;
}

/* ============================================
	TWILIGHT SKY (PIKTOCHART EARTH PALETTE)
	-- Dusk indigo + muted mauve
   ============================================ */
body[data-theme='twilight-sky'] {
	color-scheme: dark;

	--ion-color-primary: #4a4e69;
	--ion-color-secondary: #9a8c98;
	--ion-color-tertiary: #c9cba3;

	--app-page-background: #0e0d18;
	--app-surface: #1c1b2c;
	--app-border-soft: rgba(255, 255, 255, 0.08);
	--app-border-strong: rgba(255, 255, 255, 0.2);
	--app-text-primary: #f5f5f7;
	--app-text-secondary: #c0b8c8;
	--app-text-muted: #9c95a9;

	--app-hero-gradient-blue: linear-gradient(145deg, rgba(74, 78, 105, 0.95) 0%, rgba(154, 140, 152, 0.96) 60%, rgba(201, 203, 163, 0.95) 100%);
	--app-hero-gradient-purple: linear-gradient(145deg, rgba(74, 78, 105, 0.9) 0%, rgba(154, 140, 152, 0.92) 60%, rgba(240, 229, 216, 0.95) 100%);

	--app-auth-background: linear-gradient(140deg, #0e0d18 0%, #2a2941 50%, #4a4e69 100%);
	--app-home-card-shadow: 0 28px 60px rgba(6, 6, 12, 0.55);
	--app-shadow-soft: 0 24px 50px rgba(6, 6, 12, 0.45);
	--app-shadow-strong: 0 38px 85px rgba(6, 6, 12, 0.55);
	--app-shadow-hero: 0 34px 70px rgba(6, 6, 12, 0.55);
	--app-input-surface: rgba(201, 203, 163, 0.1);
	--app-input-focus-border: rgba(201, 203, 163, 0.55);
	--app-input-focus-shadow: 0 16px 30px rgba(201, 203, 163, 0.3);

	--app-header-bg-start: #4a4e69;
	--app-header-bg-end: #9a8c98;
	--app-header-gradient: linear-gradient(135deg, var(--app-header-bg-start) 0%, var(--app-header-bg-end) 100%);
	--app-header-border-color: rgba(29, 28, 45, 0.45);
	--app-header-shadow: 0 10px 28px rgba(10, 6, 15, 0.55);
	--app-header-text: #f5f5f7;
	--app-hero-text: #f5f5f7;
	--app-hero-text-strong: #f5f5f7;
	--app-hero-text-muted: #f5f5f7;
	--app-hero-text-soft: #f5f5f7;
}

* {
	box-sizing: border-box;
}

body {
	font-family: var(--ion-font-family);
	background: var(--app-page-background);
	color: var(--app-text-primary);
}

ion-content {
	--background: var(--app-page-background);
	color: var(--app-text-primary);
	/* Enable proper keyboard avoidance */
	--keyboard-offset: 0px;
	/* Ensure scrolling works properly */
	--overflow: auto;
}

ion-card {
	background: var(--app-surface-elevated);
	color: var(--app-text-primary);
	box-shadow: var(--app-shadow-soft);
	border-radius: 24px;
	border: 1px solid var(--app-border-strong);
}


ion-item {
	--color: var(--app-text-primary);
	--background: transparent;
	--min-height: 56px;
	--padding-start: 0;
	--inner-padding-end: 0;
}

ion-list {
	--background: transparent;
	background: transparent;
}

ion-accordion-group {
	--background: transparent;
	background: transparent;
}

ion-accordion {
	--background: transparent;
	background: transparent;
}

ion-input {
	--padding-top: 12px;
	--padding-bottom: 12px;
	--padding-start: 0;
	--padding-end: 0;
	font-size: 1rem;
}

ion-label {
	font-size: 0.95rem;
}


/* Tab Bar Customization - Theme colors and dynamic icon sizing */
ion-tab-bar {
	/* Use same border + shadow language as app header */
	--background: #e6e9f8;
	--border: 1px solid var(--app-header-border-color);
	--color: var(--app-text-muted);
	height: 56px;
	border-top: 1px solid var(--app-header-border-color);
	padding-bottom: env(safe-area-inset-bottom, 0);
	/* Mirror header shadow strength in light mode (inverted direction) */
	box-shadow: 0 -10px 26px rgba(15, 24, 58, 0.2);
}

ion-tab-button {
	--color: var(--app-text-muted);
	--color-selected: var(--ion-color-primary);
	--ripple-color: var(--ion-color-primary-tint);
	font-size: 0.7rem;
	letter-spacing: 0.02em;
}

/* Inactive tab icons - smaller */
ion-tab-button:not(.tab-selected) ion-icon {
	font-size: 22px;
	opacity: 0.65;
	transition: all 0.2s ease;
}

/* Active/selected tab icon - larger and more prominent */
ion-tab-button.tab-selected ion-icon {
	font-size: 28px;
	opacity: 1;
	transform: scale(1.05);
	transition: all 0.2s ease;
}

/* Tab label styling */
ion-tab-button ion-label {
	font-size: 0.7rem;
	margin-top: 4px;
	font-weight: 500;
	opacity: 0.8;
}

ion-tab-button.tab-selected ion-label {
	font-weight: 600;
	opacity: 1;
}

/* App Header / Toolbar - shared gradient styling */
ion-header ion-toolbar {
	--background: var(--app-header-gradient);
	--color: var(--app-header-text);
	--border-color: var(--app-header-border-color);
	box-shadow: var(--app-header-shadow);
	/* Ensure translucency effects stay consistent with gradient */
	backdrop-filter: blur(18px);
}

ion-header ion-title {
	color: var(--app-header-text);
}

ion-header ion-buttons ion-button {
	--color: var(--app-header-text);
	--background-hover: var(--app-header-button-hover);
	--background-focused: var(--app-header-button-focused);
	--background-activated: var(--app-header-button-activated);
	--ripple-color: var(--app-header-button-ripple);
}

/* Dark mode adjustments */
body.dark ion-tab-bar {
	/* Match header shadow strength in dark mode (inverted direction) */
	border-top: 1px solid var(--app-header-border-color);
	box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.85);
}

/* ============================================
   DESKTOP LAYOUT - NO WIDTH CONSTRAINTS
   ============================================ */

/* Desktop uses full width for optimal space utilization
   The app is designed to work beautifully at any screen size */