@layer style {
/* Brutalism (Anti-Design) 
Brutalism: Use for bold, disruptive designs that reject traditional aesthetics.
Art studios, personal brands, underground music, radical startups.
*/
.brutal-style {
  --heading-font-weight: 700;
  --body-bg: var(--white);
  --body-color: var(--dark);
  --default-padding: 0.5rem;
  --default-margin: 0.5rem 0;
  --default-gap: 0.5rem;
  --default-border: 0.125rem solid var(--dark);
  --default-border-radius: 0;
  --box-shadow: 0.5rem 0.5rem 0 var(--dark);
  --font-family: "Courier New", monospace;
  --heading-font: var(--font-family);
  --danger: #dc3545;
  --info: #0d6efd;
  --success: #198754;
  --warning: #ffc107;
  --luxury: #6f42c1;
  --control-border: 2px solid var(--black);
  --panel-bg: var(--body-bg);
  --input-border: 2px solid var(--black);
  --input-radius: 0;
  --child-padding: clamp(1rem, 3.33vw, 2rem);
  --sections-flow: clamp(6rem, 3.33vw, 12rem);
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
  --page-box-padding: var(--default-padding);
}
[data-theme="dark"].brutal-style {
  --light-grey: #23262d;
  --heading-color: #f5f7fa;
  --link-hover-color: #b3ccff;
  --icon-default-fill: #f5f7fa;
  --surface-overlay: rgba(0,0,0,.72);
  --surface-inverse: #f5f7fa;
  --surface-inverse-color: #111318;
  --surface-hover: rgba(255,255,255,.08);
  --surface-active: rgba(255,255,255,.14);
  --surface-selected: rgba(138,180,255,.18);
  --surface-disabled: rgba(255,255,255,.05);
  --control-bg: #2f3642;
  --control-color: #f5f7fa;
  --control-hover-color: #ffffff;
  --control-hover-border: #8ab4ff;
  --control-active-bg: #3b4454;
  --control-active-color: #ffffff;
  --control-focus-ring: 0 0 0 .1875rem rgba(138,180,255,.35);
  --input-placeholder: #9aa4b2;
  --input-hover-border: #6b7280;
  --input-focus-border: #8ab4ff;
  --input-focus-shadow: 0 0 0 .1875rem rgba(138,180,255,.25);
}

.brutal-lite-style {
--danger: #dc3545;
--info: #0d6efd;
--success: #198754;
--warning: #ffc107;
--luxury: #6f42c1;
--body-bg: var(--white);
--body-color: var(--dark);
--font-weight: 700;
--heading-font-weight: 800;
--font-size-desktop: 1.125rem;
--col-h-padding: 1rem;
--line-height: 1.3;
--font-family: "Courier New", monospace;
--heading-font: var(--font-family);
--default-padding: 1rem;
/* --default-margin: 1rem; */
--default-gap: 0.5rem;
--default-border-radius: 0;
--box-shadow: none;
--default-border: 0.125rem solid var(--dark);

--control-border: 2px solid var(--black);
--panel-bg: var(--body-bg);
--input-border: 2px solid var(--black);
--input-radius: 0;
--child-padding: clamp(1rem, 3.33vw, 2rem);
--sections-flow: clamp(6rem, 3.33vw, 12rem);
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
  --page-box-padding: var(--default-padding);
}

[data-theme="dark"].retro-lite-style {
  --light-grey: color-mix(in srgb, var(--color-1) 14%, #1b1d27);
  --heading-color: color-mix(in srgb, white 92%, var(--color-1));
  --link-color: color-mix(in srgb, var(--color-1) 78%, white);
  --link-hover-color: color-mix(in srgb, var(--color-1) 55%, white);
  --icon-default-fill: color-mix(in srgb, white 88%, var(--color-1));
  --surface-overlay: color-mix(in srgb, black 75%, transparent);
  --surface-inverse: color-mix(in srgb, white 95%, var(--color-1));
  --surface-inverse-color: #241a10;
  --surface-hover: color-mix(in srgb, var(--color-1) 10%, transparent);
  --surface-active: color-mix(in srgb, var(--color-1) 16%, transparent);
  --surface-selected: color-mix(in srgb, var(--color-1) 20%, transparent);
  --surface-disabled: color-mix(in srgb, white 6%, transparent);
  --control-bg: color-mix(in srgb, var(--color-1) 82%, white);
  --control-color: #241a10;
  --control-hover-color: white;
  --control-hover-border: color-mix(in srgb, var(--color-1) 55%, white);
  --control-active-bg: color-mix(in srgb, var(--color-1) 70%, black);
  --control-active-color: white;
  --control-focus-ring: 0 0 0 0.1875rem color-mix(in srgb, var(--color-1) 30%, transparent);
  --input-placeholder: color-mix(in srgb, white 55%, transparent);
  --input-hover-border: color-mix(in srgb, var(--color-1) 45%, #6b7280);
  --input-focus-border: var(--color-1);
  --input-focus-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--color-1) 25%, transparent);
}
/* Glassmorphism 
Glassmorphism: Best for modern, elegant UIs with frosted-glass visuals.
Fintech, health tech, luxury apps, personal productivity tools.
*/
.glass-style {
  --background-image: url('https://cssvars.com/img/styles/glass-bga1.png'); background-size: cover; background-position: center;
  --color-1: #6d5dfc;
  --color-2: #46c2ff;
  --dark: #33354a;
  --grey: color-mix(in srgb, var(--black) 70%, transparent);
  --light-grey: color-mix(in srgb, var(--white) 15%, transparent);
  --white: #ffffff;
  --black: #10111f;
  --font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --heading-font: var(--font-family);
  --heading-font-weight: 600;
  --default-border: 0.0625rem solid color-mix(in srgb, var(--white) 35%, transparent);
  --default-border-radius: 1rem;
  --box-shadow: 0 0.5rem 2rem color-mix(in srgb, var(--black) 25%, transparent);
  --panel-bg: color-mix(in srgb, var(--white) 97%, transparent);
  --panel-border: 0.0625rem solid color-mix(in srgb, var(--white) 30%, transparent);
  --panel-radius: 1.25rem;
  --panel-shadow: 0 0.5rem 2rem color-mix(in srgb, var(--black) 20%, transparent);
  --control-bg: color-mix(in srgb, var(--white) 20%, transparent);
  --control-color: var(--color-1);
  --control-border: 0.0625rem solid color-mix(in srgb, var(--white) 40%, transparent);
  --control-radius: 0.75rem;
  --control-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--black) 15%, transparent);
  --control-hover-bg: color-mix(in srgb, var(--white) 30%, transparent);
  --input-bg: color-mix(in srgb, var(--white) 15%, transparent);
  --input-border: 0.0625rem solid color-mix(in srgb, var(--white) 35%, transparent);
  --input-radius: 0.75rem;
  --input-placeholder: color-mix(in srgb, var(--white) 60%, transparent);
  --panel-bg: color-mix(in srgb, var(--white) 15%, transparent);
  --panel-border: 0.0625rem solid color-mix(in srgb, var(--white) 30%, transparent);
  --panel-shadow: 0 0.5rem 2rem color-mix(in srgb, var(--black) 15%, transparent);
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
}

[data-theme="dark"].glass-style {
  --background-image: url('https://cssvars.com/img/styles/glass-bga1-dark.png'); background-size: cover; background-position: center;
  --light-grey: color-mix(in srgb, var(--white) 15%, transparent);
  --dark: #8e91b1;
  --heading-color: color-mix(in srgb, white 95%, var(--color-1));
  --link-color: color-mix(in srgb, var(--color-1) 70%, white);
  --link-hover-color: color-mix(in srgb, var(--color-2) 70%, white);
  --icon-default-fill: color-mix(in srgb, white 92%, var(--color-1));
  --surface-overlay: color-mix(in srgb, black 78%, transparent);
  --surface-inverse: color-mix(in srgb, white 15%, transparent);
  --surface-inverse-color: white;
  --surface-hover: color-mix(in srgb, white 12%, transparent);
  --surface-active: color-mix(in srgb, white 18%, transparent);
  --surface-selected: color-mix(in srgb, var(--color-2) 22%, transparent);
  --surface-disabled: color-mix(in srgb, white 6%, transparent);
  --control-bg: color-mix(in srgb, white 18%, transparent);
  --control-color: white;
  --control-hover-color: white;
  --control-hover-border: color-mix(in srgb, white 45%, transparent);
  --control-active-bg: color-mix(in srgb, white 28%, transparent);
  --control-active-color: white;
  --control-focus-ring: 0 0 0 0.1875rem color-mix(in srgb, var(--color-2) 40%, transparent);
  --input-placeholder: color-mix(in srgb, white 55%, transparent);
  --input-hover-border: color-mix(in srgb, white 40%, transparent);
  --input-focus-border: var(--color-2);
  --input-focus-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--color-2) 30%, transparent);
  --grey: color-mix(in srgb, var(--white) 70%, transparent);
  --black: #ffffff;
  --input-bg: black;
}

/* Retro & Vintage 
Retro/Vintage: Ideal for nostalgic, playful, or thematic branding
Coffee shops, vintage clothing, lifestyle blogs, creative agencies.
*/
.retro-style {
  --color-1: #c1440e;
  --color-2: #2e4052;
  --dark: #4a3a2c;
  --grey: #756b59;
  --light-grey: #f0e4cf;
  --white: #fdf6e3;
  --black: #2b1e12;
  --body-bg: #f3e5c3;
  --body-color: #3a2b1c;
  --font-family: Georgia, "Times New Roman", serif;
  --heading-font: var(--font-family);
  --heading-font-weight: 700;
  --heading-letter-spacing: 0.02em;
  --default-border: 0.125rem solid var(--black);
  --default-border-radius: 0.5rem;
  --box-shadow: 0.25rem 0.25rem 0 color-mix(in srgb, var(--black) 60%, transparent);
  --panel-bg: var(--white);
  --panel-border: 0.125rem solid var(--dark);
  --panel-radius: 0.5rem;
  --panel-shadow: 0.25rem 0.25rem 0 color-mix(in srgb, var(--black) 40%, transparent);
  --control-bg: var(--color-1);
  --control-color: var(--white);
  --control-font-weight: 700;
  --control-border: 0.125rem solid var(--black);
  --control-radius: 0.4rem;
  --control-hover-bg: var(--color-2);
  --input-bg: var(--white);
  --input-border: 0.125rem solid var(--dark);
  --input-radius: 0.4rem;
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
}
[data-theme="dark"].retro-style {
 --color-1: #e0672e;
  --color-2: #6b8ca3;
  --dark: #d8c9ae;
  --grey: #8a7a5f;
  --light-grey: #3a2f22;
  --white: #fdf6e3;
  --black: #1a1108;
  --body-bg: #241a10;
  --body-color: #efe2c4;
  --heading-font: var(--font-family);
  --heading-font-weight: 700;
  --heading-letter-spacing: 0.02em;
  --default-border: 0.125rem solid var(--dark);
  --default-border-radius: 0.5rem;
  --box-shadow: 0.25rem 0.25rem 0 color-mix(in srgb, var(--black) 70%, transparent);
  --panel-bg: #2f2317;
  --panel-border: 0.125rem solid var(--color-1);
  --panel-radius: 0.5rem;
  --panel-shadow: 0.25rem 0.25rem 0 color-mix(in srgb, var(--black) 60%, transparent);
  --control-bg: var(--color-1);
  --control-color: var(--black);
  --control-font-weight: 700;
  --control-border: 0.125rem solid var(--black);
  --control-radius: 0.4rem;
  --control-hover-bg: var(--color-2);
  --control-hover-color: var(--white);
  --input-bg: #2f2317;
  --input-color: var(--body-color);
  --input-border: 0.125rem solid var(--grey);
  --input-radius: 0.4rem;
  --input-placeholder: var(--grey);
  --link-color: var(--color-1);
}
.retro-lite-style{
  --color-1: #7c5b3d;
  --grey: #a19680;
  --light-grey: #fff8ef;
  --body-bg: #fffdf5;
  --body-color: #5d4631;
  --font-family: Georgia,serif;
  --heading-font: var(--font-family);
  --heading-font-weight: 600;
  --icon-default-fill: #7c5b3d;
  --image-radius: 8px;
  --default-border: 1px solid #d4c6a3;
  --default-border-radius: 10px;
  --box-shadow: 0 3px 8px rgba(0,0,0,.08);
  --surface-raised: #fff;
  --panel-bg: #fff;
  --panel-border: 1px solid #d4c6a3;
  --panel-radius: 10px;
  --panel-shadow: 0 3px 8px rgba(0,0,0,.08);
  --control-bg: #7c5b3d;
  --control-color: #fff;
  --control-radius: 10px;
  --input-border: 1px solid #d4c6a3;
  --input-radius: 8px;
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
}
[data-theme="dark"].retro-lite-style {
  --color-1: #c9a463;
  --grey: #5a4a35;
  --light-grey: #3a2f22;
  --body-bg: #211a12;
  --body-color: #e8dcc3;
  --font-family: Georgia, serif;
  --heading-font: var(--font-family);
  --heading-font-weight: 600;
  --icon-default-fill: #c9a463;
  --image-radius: 8px;
  --default-border: 1px solid #4a3c2a;
  --default-border-radius: 10px;
  --box-shadow: 0 3px 8px rgba(0,0,0,.4);
  --surface-raised: #2b2117;
  --panel-bg: #2b2117;
  --panel-border: 1px solid #4a3c2a;
  --panel-radius: 10px;
  --panel-shadow: 0 3px 8px rgba(0,0,0,.4);
  --control-bg: #c9a463;
  --control-color: #211a12;
  --control-radius: 10px;
  --input-border: 1px solid #4a3c2a;
  --input-radius: 8px;
}

/* Minimalist / Clean - Focus: simplicity, whitespace, legibility 
Minimalist: Perfect for clean, distraction-free content or portfolios.
Tech startups, SaaS platforms, portfolios, architects, wellness brands.
*/
.minimalist-style {
  --color-1: #111111;
  --color-2: #555555;
  --dark: #444444;
  --grey: #888;
  --light-grey: #f7f7f7;
  --white: #ffffff;
  --black: #111111;
  --body-bg: #ffffff;
  --body-color: #1a1a1a;
  --font-family: ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
  --heading-font: var(--font-family);
  --font-weight: 300;
  --heading-font-weight: 400;
  --heading-letter-spacing: 0.01em;
  --default-border: 0.0625rem solid var(--light-grey);
  --default-border-radius: 0;
  --box-shadow: none;
  --panel-bg: var(--white);
  --panel-border: 0.0625rem solid var(--light-grey);
  --panel-radius: 0;
  --panel-shadow: none;
  --panel-padding: 2rem;
  --control-bg: var(--black);
  --control-color: var(--white);
  --control-font-weight: 400;
  --control-border: none;
  --control-radius: 0;
  --control-shadow: none;
  --control-hover-bg: var(--dark);
  --input-bg: var(--white);
  --input-border: 0.0625rem solid var(--grey);
  --input-radius: 0;
  --input-shadow: none;
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
}

[data-theme="dark"].minimalist-style {
 --color-1: #f5f5f5;
  --color-2: #a3a3a3;
  --dark: #b5b5b5;
  --grey: #aaa;
  --light-grey: #1c1c1c;
  --white: #161616;
  --black: #f5f5f5;
  --body-bg: #0d0d0d;
  --body-color: #e8e8e8;
  --font-family: ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
  --heading-font: var(--font-family);
  --font-weight: 300;
  --heading-font-weight: 400;
  --heading-letter-spacing: 0.01em;
  --default-border: 0.0625rem solid var(--light-grey);
  --default-border-radius: 0;
  --box-shadow: none;
  --panel-bg: var(--white);
  --panel-border: 0.0625rem solid var(--light-grey);
  --panel-radius: 0;
  --panel-shadow: none;
  --panel-padding: 2rem;
  --control-bg: var(--black);
  --control-color: var(--white);
  --control-font-weight: 400;
  --control-border: none;
  --control-radius: 0;
  --control-shadow: none;
  --control-hover-bg: var(--dark);
  --input-bg: var(--white);
  --input-border: 0.0625rem solid var(--grey);
  --input-radius: 0;
  --input-shadow: none;
  --link-color: var(--color-1);
}

/* Neon 
Neon: Use in high-energy or futuristic entertainment/tech projects.
Nightclubs, gaming platforms, youth fashion, media streaming.
*/
.neon-style {
  /* --background-image: url('../img/glass/neon4.jpg'); background-size: cover; background-position: center; */
  --color-1: #ff2079;
  --color-2: #00f6ff;
  --dark: #f87cad;
  --grey: #565676;
  --light-grey: #1c1c30;
  --white: #895e82;
  --black: #0a0a14;
  --body-bg: #0a0a14;
  --body-color: #eaeaff;
  --link-color:var(--color-1);
  --font-family: "Segoe UI", ui-sans-serif, sans-serif;
  --heading-font: var(--font-family);
  --heading-font-weight: 700;
  --default-border: 0.0625rem solid var(--color-1);
  --default-border-radius: 0.5rem;
  --box-shadow: 0 0 0.75rem color-mix(in srgb, var(--color-1) 70%, transparent), 0 0 1.5rem color-mix(in srgb, var(--color-2) 40%, transparent);
  --panel-bg: var(--light-grey);
  --panel-border: 0.0625rem solid color-mix(in srgb, var(--color-2) 50%, transparent);
  --panel-radius: 0.75rem;
  --panel-shadow: 0 0 1rem color-mix(in srgb, var(--color-2) 35%, transparent);
  --control-bg: var(--color-1);
  --control-color: var(--white);
  --control-hover-color: var(--white);
  --control-font-weight: 700;
  --control-border: 0.0625rem solid var(--color-1);
  --control-radius: 0.5rem;
  --control-shadow: 0 0 0.6rem color-mix(in srgb, var(--color-1) 60%, transparent);
  --control-hover-bg: var(--color-2);
  --control-focus-ring: 0 0 0 0.1875rem color-mix(in srgb, var(--color-2) 60%, transparent);
  --input-bg: var(--light-grey);
  --input-color: var(--white);
  --input-border: 0.0625rem solid color-mix(in srgb, var(--color-2) 50%, transparent);
  --input-radius: 0.5rem;
  --input-focus-border: var(--color-2);
  --input-focus-shadow: 0 0 0.6rem color-mix(in srgb, var(--color-2) 60%, transparent);
  --heading-color:var(--color-1, pink);
  --icon-default-fill: var(--color-1, pink);
  --surface-dim: color-mix(in srgb, var(--color-1) 30%, transparent);
  --white: color-mix(in srgb, var(--white) 50%, transparent);
  --black: color-mix(in srgb, var(--color-1) 90%, transparent);
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
}

/* Cyberpunk 
Cyberpunk: Great for edgy, tech-heavy or sci-fi-inspired UIs.
Blockchain/crypto apps, game dev studios, hacker culture brands.
*/
.cyberpunk-style{
  --color-1: #ff00c8;
  --color-2: #00f7ff;
  --dark: rgb(165, 52, 141);
  --grey: #4a3b5f;
  --light-grey: #170033;
  --body-bg: #0d0221;
  --body-color: #f7f7ff;
  --font-family: Rajdhani,sans-serif;
  --heading-font: var(--font-family);
  --heading-font-weight: 700;
  --heading-letter-spacing: 0.08em;
  --icon-default-fill: #00f7ff;
  --image-radius: 0;
  --image-shadow: 0 0 25px #ff00c8;
  --default-border: 1px solid #00f7ff;
  --default-border-radius: 0;
  --box-shadow: 0 0 25px rgba(255,0,200,.4);
  --surface-raised: #170033;
  --panel-bg: #170033;
  --panel-border: 1px solid #00f7ff;
  --panel-radius: 0;
  --panel-shadow: 0 0 25px rgba(255,0,200,.4);
  --control-bg: #ff00c8;
  --control-color: #fff;
  --control-radius: 0;
  --input-bg: #14002a;
  --input-color: #fff;
  --input-border: 1px solid #00f7ff;
  --input-radius: 0;
  --heading-color:var(--color-2);
  --link-color:var(--color-1);
  --control-hover-bg: var(--color-2);
  --control-hover-color: var(--body-bg);
  --control-hover-border: var(--color-1);
  --surface-dim: color-mix(in srgb, var(--color-1) 30%, transparent);
  --white: color-mix(in srgb, var(--white) 50%, transparent);
  --black: color-mix(in srgb, var(--color-1) 90%, transparent);
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
}

/* Luxury / Maximalism / Elegant - Focus: rich tones, refined edges, stylish typography 
Luxury/Maximalist: Best for premium brands or dramatic, rich experiences.
Jewellery, fashion houses, high-end services, interior design.
*/

.luxury-style {
  --body-bg: color-mix(in srgb, var(--white) 96%, var(--warning));
  --body-color: color-mix(in srgb, var(--black) 96%, var(--warning));
  --color-1: color-mix(in srgb, var(--warning) 85%, #9d7a32);
  --light-grey: color-mix(in srgb, var(--body-bg) 88%, var(--color-1));
  --dark: color-mix(in srgb, var(--black) 88%, var(--color-1));
  --black: color-mix(in srgb, var(--black) 96%, var(--color-1));
  --font-family: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  --heading-font: var(--font-family);
  --font-size-desktop: 1.125rem;
  --line-height: 1.75;
  --heading-font-weight: 600;
  --heading-letter-spacing: .05em;
  --heading-line-height: 1.15;
  --default-padding: 0.5rem;
  --default-gap: 2rem;
  --default-border: .0625rem solid color-mix(in srgb, var(--color-1) 18%, var(--light-grey));
  --default-border-radius: .75rem;
  --box-shadow: 0 .25rem .75rem rgba(0,0,0,.03), 0 1rem 2.5rem rgba(0,0,0,.05);
  --panel-bg: color-mix(in srgb, white 98%, var(--body-bg));
  --panel-padding: calc(var(--default-padding) * 1.25);
  --panel-border: .0625rem solid color-mix(in srgb, var(--color-1) 12%, var(--light-grey));
  --panel-shadow: var(--box-shadow);
  --control-radius: .5rem;
  --control-border: .0625rem solid color-mix(in srgb, var(--color-1) 10%, var(--light-grey));
  --input-radius: .5rem;
  --input-border: .0625rem solid var(--light-grey);
  --input-focus-border: color-mix(in srgb, var(--color-1) 80%, var(--black));
  --input-focus-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-1) 18%, transparent);
  --link-color: var(--dark);
  --link-hover-color: var(--color-1);
  --icon-default-fill: var(--color-1);
  --icon-default-size: 4rem;
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
  --page-box-padding: var(--default-padding);
}
[data-theme="dark"].luxury-style {
  --body-bg: #151312;
  --body-color: #e8e2d7;
  --white: #1f1b18;
  --black: #f6f2eb;
  --color-1: #d8b46a;
  --light-grey: color-mix(in srgb, var(--body-bg) 82%, var(--color-1));
  --dark: color-mix(in srgb, var(--black) 88%, var(--color-1));
  --heading-color: #f3ead8;
  --panel-bg: color-mix(in srgb, var(--body-bg) 90%, var(--white));
  --panel-border: .0625rem solid color-mix(in srgb, var(--color-1) 18%, var(--light-grey));
  --default-border: .0625rem solid color-mix(in srgb, var(--color-1) 20%, var(--light-grey));
  --control-bg: var(--color-1);
  --control-color: #181512;
  --control-border: .0625rem solid color-mix(in srgb, var(--color-1) 40%, var(--black));
  --input-bg: color-mix(in srgb, var(--body-bg) 92%, var(--white));
  --input-color: var(--body-color);
  --input-border: .0625rem solid color-mix(in srgb, var(--color-1) 18%, var(--light-grey));
  --input-hover-border: color-mix(in srgb, var(--color-1) 45%, var(--black));
  --input-focus-border: var(--color-1);
  --input-focus-shadow: 0 0 0 .2rem color-mix(in srgb, var(--color-1) 25%, transparent);
  --link-color: #e2c27f;
  --link-hover-color: #f1d899;
  --icon-default-fill: var(--color-1);
  --surface-overlay: color-mix(in srgb, black 70%, transparent);
  --surface-inverse: #f3ead8;
  --surface-inverse-color: #1b1816;
  --surface-hover: color-mix(in srgb, var(--color-1) 12%, transparent);
  --surface-active: color-mix(in srgb, var(--color-1) 20%, transparent);
  --box-shadow:
    0 .25rem .75rem rgba(0, 0, 0, .35),
    0 1rem 2.5rem rgba(0, 0, 0, .55);
}

/* High Contrast 
High Contrast: Essential for accessibility or information-heavy UIs.
Government sites, accessibility-first platforms, education.
*/
.high-contrast-style {
  --color-1: #000;
  --color-2: #fff;
  --black: #000;
  --white: #fff;
  --dark: #000;
  --grey: #555;
  --light-grey: #ddd;
  --body-bg: var(--white);
  --body-color: var(--black);
  --font-weight: 600;
  --line-height: 1.65;
  --heading-font-weight: 900;
  --heading-color: var(--black);
  --heading-letter-spacing: 0.02em;
  --link-color: var(--black);
  --link-hover-color: var(--grey);
  --link-decoration: underline;
  --link-hover-decoration: underline;
  --surface-hover: var(--grey);
  --surface-active: #222;
  --surface-selected: #111;
  --surface-disabled: #e5e5e5;
  --panel-bg: var(--white);
  --panel-border: 3px solid var(--black);
  --panel-radius: 0;
  --panel-shadow: none;
  --control-bg: var(--black);
  --control-color: var(--white);
  --control-font-weight: 700;
  --control-border: 3px solid var(--black);
  --control-radius: 0;
  --control-shadow: none;
  --control-hover-bg: var(--white);
  --control-hover-color: var(--grey);
  --control-hover-border: 3px solid var(--black);
  --control-active-bg: #222;
  --control-active-color: var(--white);
  --control-focus-ring: 0 0 0 4px var(--white), 0 0 0 7px var(--black);
  --control-disabled-opacity: 0.45;
  --input-bg: var(--white);
  --input-color: var(--black);
  --input-border: 3px solid var(--black);
  --input-radius: 0;
  --input-shadow: none;
  --input-hover-border: var(--black);
  --input-focus-border: var(--black);
  --input-focus-shadow: 0 0 0 4px var(--white), 0 0 0 7px var(--black);
  --input-placeholder: #444;
  --input-disabled-bg: #f2f2f2;
  --input-disabled-opacity: 0.6;
  --image-border-style: solid;
  --image-radius: 0;
  --image-shadow: none;
  --default-border: 2px solid var(--black);
  --default-border-radius: 0;
  --box-shadow: none;
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
}
[data-theme="dark"].high-contrast-style {
  --color-1: #ffffff;
  --color-2: #000000;
  --black: #ffffff;
  --white: #000000;
  --dark: #e5e5e5;
  --grey: #9a9a9a;
  --light-grey: #1f1f1f;
  --body-bg: #000000;
  --body-color: #ffffff;
  --heading-color: #ffffff;
  --link-color: #ffffff;
  --link-hover-color: #cfcfcf;
  --surface-hover: #2b2b2b;
  --surface-active: #404040;
  --surface-selected: #555555;
  --surface-disabled: #1a1a1a;
  --panel-bg: #000000;
  --panel-border: 3px solid #ffffff;
  --control-bg: #ffffff;
  --control-color: #000000;
  --control-border: 3px solid #ffffff;
  --control-hover-bg: #000000;
  --control-hover-color: #ffffff;
  --control-hover-border: 3px solid #ffffff;
  --control-active-bg: #2a2a2a;
  --control-active-color: #ffffff;
  --control-focus-ring: 0 0 0 4px #000000, 0 0 0 7px #ffffff;
  --input-bg: #000000;
  --input-color: #ffffff;
  --input-border: 3px solid #ffffff;
  --input-hover-border: #ffffff;
  --input-focus-border: #ffffff;
  --input-focus-shadow: 0 0 0 4px #000000, 0 0 0 7px #ffffff;
  --input-placeholder: #b5b5b5;
  --input-disabled-bg: #1a1a1a;
  --default-border: 2px solid #ffffff;
}

/*Neumorphism (Soft UI)
Neumorphism: Use for soft, tactile interfaces—best in moderation.
IoT dashboards, smart home apps, lifestyle tools (in moderation).
*/
.neumorphism-style {
  --neu-tint: color-mix(in srgb, var(--color-1) 6%, white);
  --neu-tint-deep: color-mix(in srgb, var(--color-1) 10%, white);
  --body-bg: var(--neu-tint);
  --body-color: color-mix(in srgb, var(--color-1) 80%, black);
  --panel-bg: var(--neu-tint);
  --control-bg: var(--neu-tint);
  --control-color: color-mix(in srgb, var(--color-1) 80%, black);
  --light-grey: color-mix(in srgb, var(--color-1) 8%, white);
  --dark: color-mix(in srgb, var(--color-1) 50%, white);
  --neu-shadow-light: color-mix(in srgb, white 85%, transparent);
  --neu-shadow-dark: color-mix(in srgb, var(--color-1) 25%, transparent);
  --panel-border: none;
  --panel-radius: 1.25rem;
  --panel-shadow: 0.5rem 0.5rem 1rem var(--neu-shadow-dark), -0.5rem -0.5rem 1rem var(--neu-shadow-light);
  --control-border: none;
  --control-radius: 1rem;
  --control-shadow: 0.375rem 0.375rem 0.75rem var(--neu-shadow-dark), -0.375rem -0.375rem 0.75rem var(--neu-shadow-light);
  --control-hover-bg: var(--neu-tint-deep);
  --control-hover-color: var(--color-1);
  --control-active-bg: var(--neu-tint-deep);
  --control-active-color: var(--color-1);
  --control-focus-ring: 0 0 0 0.1875rem color-mix(in srgb, var(--color-1) 20%, transparent);
  --input-bg: var(--neu-tint);
  --input-color: color-mix(in srgb, var(--color-1) 80%, black);
  --input-border: none;
  --input-radius: 1rem;
  --input-shadow: inset 0.25rem 0.25rem 0.5rem var(--neu-shadow-dark), inset -0.25rem -0.25rem 0.5rem var(--neu-shadow-light);
  --input-focus-shadow: inset 0.25rem 0.25rem 0.5rem var(--neu-shadow-dark), inset -0.25rem -0.25rem 0.5rem var(--neu-shadow-light), 0 0 0 0.1875rem color-mix(in srgb, var(--color-1) 20%, transparent);
  --icon-default-fill: var(--color-1);
}
[data-theme="dark"].neumorphism-style {
  --neu-tint: color-mix(in srgb, var(--color-1) 15%, #1e1e24);
  --neu-tint-deep: color-mix(in srgb, var(--color-1) 22%, #1e1e24);
  --body-bg: var(--neu-tint);
  --body-color: color-mix(in srgb, white 85%, var(--color-1));
  --panel-bg: var(--neu-tint);
  --control-bg: var(--neu-tint);
  --control-color: color-mix(in srgb, white 85%, var(--color-1));
  --light-grey: color-mix(in srgb, var(--color-1) 25%, #1e1e24);
  --dark: color-mix(in srgb, var(--color-1) 70%, black);
  --neu-shadow-light: color-mix(in srgb, white 8%, transparent);
  --neu-shadow-dark: color-mix(in srgb, black 55%, transparent);
  --panel-shadow: 0.5rem 0.5rem 1rem var(--neu-shadow-dark), -0.5rem -0.5rem 1rem var(--neu-shadow-light);
  --control-shadow: 0.375rem 0.375rem 0.75rem var(--neu-shadow-dark), -0.375rem -0.375rem 0.75rem var(--neu-shadow-light);
  --control-hover-bg: var(--neu-tint-deep);
  --control-hover-color: var(--color-1);
  --control-active-bg: var(--neu-tint-deep);
  --control-active-color: var(--color-1);
  --control-focus-ring: 0 0 0 0.1875rem color-mix(in srgb, var(--color-1) 30%, transparent);
  --input-bg: var(--neu-tint);
  --input-color: color-mix(in srgb, white 85%, var(--color-1));
  --input-shadow: inset 0.25rem 0.25rem 0.5rem var(--neu-shadow-dark), inset -0.25rem -0.25rem 0.5rem var(--neu-shadow-light);
  --input-focus-shadow: inset 0.25rem 0.25rem 0.5rem var(--neu-shadow-dark), inset -0.25rem -0.25rem 0.5rem var(--neu-shadow-light), 0 0 0 0.1875rem color-mix(in srgb, var(--color-1) 30%, transparent);
  --grey: color-mix(in srgb, var(--color-1) 55%, #1e1e24);
}

/* Modern / Flat UI - Focus: colour blocks, clean lines, subtle shadows
Flat 2.0: Use for clean, intuitive UIs with subtle depth cues.
Fintech apps, e-commerce admin, task managers.
*/
.modern-style {
  --color-1: #2563eb;
  --color-1: #06b6d4;
  --color-1: #6366f1;
  --color-2: #10b981;
  --dark: #1e293b;
  --grey: #64748b;
  --white: #ffffff;
  --black: #020617;
  --light-grey: #f8fafc;
  --body-bg: #f8fafc;
  --body-color: var(--dark);
  --font-weight: 400;
  --line-height: 1.65;
  --heading-font-weight: 700;
  --heading-color: var(--dark);
  --heading-letter-spacing: -0.02em;
  --surface-raised: #ffffff;
  --surface-hover: color-mix(in srgb, var(--color-1) 6%, white);
  --surface-active: color-mix(in srgb, var(--color-1) 12%, white);
  --surface-selected: color-mix(in srgb, var(--color-1) 10%, white);
  --panel-bg: rgba(255,255,255,.95);
  --panel-border: 1px solid color-mix(in srgb, var(--grey) 18%, white);
  --panel-radius: 0.875rem;
  --panel-shadow:
      0 1px 2px rgba(15,23,42,.04),
      0 8px 30px rgba(15,23,42,.08);
  --control-bg: var(--color-1);
  --control-color: var(--white);
  --control-border: 1px solid transparent;
  --control-radius: 0.75rem;
  --control-shadow:
      0 1px 2px rgba(15,23,42,.08),
      0 4px 12px rgba(37,99,235,.18);
  --control-hover-bg:
      color-mix(in srgb, var(--color-1) 92%, black);
  --control-hover-color: var(--white);
  --control-active-bg:
      color-mix(in srgb, var(--color-1) 80%, black);
  --control-focus-ring:
      0 0 0 .25rem color-mix(in srgb, var(--color-1) 22%, transparent);
  --input-bg: #ffffff;
  --input-color: var(--dark);
  --input-border:
      1px solid color-mix(in srgb, var(--grey) 20%, white);
  --input-radius: 0.75rem;
  --input-shadow:
      inset 0 1px 2px rgba(15,23,42,.03);
  --input-hover-border:
      color-mix(in srgb, var(--color-1) 30%, white);
  --input-focus-border: var(--color-1);
  --input-focus-shadow:
      0 0 0 .25rem color-mix(in srgb, var(--color-1) 18%, transparent);
  --image-radius: 0.75rem;
  --link-color: var(--color-1);
  --link-hover-color: color-mix(in srgb, var(--color-1) 80%, black);
  --default-border-radius: 0.875rem;
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
}
[data-theme="dark"].modern-style {
  --color-1: #818cf8;
  --color-2: #34d399;
  --dark: #e2e8f0;
  --grey: #94a3b8;
  --white: #ffffff;
  --black: #020617;
  --light-grey: #1e293b;
  --body-bg: #0f172a;
  --body-color: var(--dark);
  --font-weight: 400;
  --line-height: 1.65;
  --heading-font-weight: 700;
  --heading-color: var(--dark);
  --heading-letter-spacing: -0.02em;
  --surface-raised: #1e293b;
  --surface-hover: color-mix(in srgb, var(--color-1) 14%, var(--surface-raised));
  --surface-active: color-mix(in srgb, var(--color-1) 22%, var(--surface-raised));
  --surface-selected: color-mix(in srgb, var(--color-1) 18%, var(--surface-raised));
  --panel-bg: color-mix(in srgb, var(--surface-raised) 95%, transparent);
  --panel-border: 1px solid color-mix(in srgb, var(--white) 12%, transparent);
  --panel-radius: 0.875rem;
  --panel-shadow:
      0 1px 2px rgba(0,0,0,.45),
      0 8px 30px rgba(0,0,0,.55);
  --control-bg: var(--color-1);
  --control-color: var(--black);
  --control-border: 1px solid transparent;
  --control-radius: 0.75rem;
  --control-shadow:
      0 1px 2px rgba(0,0,0,.35),
      0 4px 12px color-mix(in srgb, var(--color-1) 30%, transparent);
  --control-hover-bg:
      color-mix(in srgb, var(--color-1) 88%, white);
  --control-hover-color: var(--black);
  --control-active-bg:
      color-mix(in srgb, var(--color-1) 75%, black);
  --control-focus-ring:
      0 0 0 .25rem color-mix(in srgb, var(--color-1) 30%, transparent);
  --input-bg: #172033;
  --input-color: var(--dark);
  --input-border:
      1px solid color-mix(in srgb, var(--white) 15%, transparent);
  --input-radius: 0.75rem;
  --input-shadow:
      inset 0 1px 2px rgba(0,0,0,.35);
  --input-hover-border:
      color-mix(in srgb, var(--color-1) 40%, white);
  --input-focus-border: var(--color-1);
  --input-focus-shadow:
      0 0 0 .25rem color-mix(in srgb, var(--color-1) 25%, transparent);
  --image-radius: 0.75rem;
  --link-color: var(--color-1);
  --link-hover-color: color-mix(in srgb, var(--color-1) 80%, white);
  --default-border-radius: 0.875rem;
}

/* Playful / Creative - Focus: colour variety, soft edges, friendly tones
Best for fun, friendly, and energetic interfaces with expressive visuals and lively colours.
Kids’ apps, creative studios, learning platforms, lifestyle blogs, and quirky e-commerce brands.
*/

/* Kids' products & edutainment, Birthday/party/event services, Ice cream, candy, bakery, boba/dessert shops, 
Playful SaaS/consumer apps, Board game / indie game studios, Summer camps, daycare, tutoring centers */
.playful-bubblegum-style {
  --color-1: #ff5c8a;
  --color-2: #ffc93c;
  --dark: #4a3f6b;
  --grey: #8974a7;
  --light-grey: #fff2e0;
  --white: #ffffff;
  --black: #2e2148;
  --body-bg: #fff2e0;
  --body-color: #2e2148;
  --font-family: "Comic Sans MS", ui-rounded, "Segoe UI", sans-serif;
  --heading-font: var(--font-family);
  --heading-font-weight: 800;
  --icon-default-fill: var(--color-1);
  --image-radius: 1.5rem;
  --default-border: 0.125rem solid var(--black);
  --default-border-radius: 1.5rem;
  --box-shadow: 0.2rem 0.2rem 0 var(--black);
  --surface-raised: var(--white);
  --surface-hover: color-mix(in srgb, var(--color-1) 10%, transparent);
  --surface-selected: color-mix(in srgb, var(--color-1) 16%, transparent);
  --panel-bg: var(--white);
  --panel-border: 0.125rem solid var(--black);
  --panel-radius: 1.5rem;
  --panel-shadow: 0.2rem 0.2rem 0 var(--black);
  --control-bg: var(--color-1);
  --control-color: var(--white);
  --control-font-weight: 800;
  --control-border: 0.125rem solid var(--black);
  --control-radius: 2rem;
  --control-shadow: 0.15rem 0.15rem 0 var(--black);
  --control-hover-bg: var(--color-2);
  --control-hover-color: var(--black);
  --control-focus-ring: 0 0 0 0.1875rem color-mix(in srgb, var(--color-1) 35%, transparent);
  --input-bg: var(--white);
  --input-border: 0.125rem solid var(--black);
  --input-radius: 1.25rem;
  --input-focus-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--color-1) 25%, transparent);
  --duration-fast: 0.2s;
  --duration-base: 0.35s;
  --easing: cubic-bezier(0.34, 1.56, 0.64, 1);
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
}
[data-theme="dark"].playful-bubblegum-style {
  --color-1: #ff6f9c;
  --color-2: #ffd166;
  --dark: #cbb8e8;
  --grey: #6b5c94;
  --light-grey: #241a3d;
  --white: #2e2148;
  --black: #fff2e0;
  --body-bg: #1a1330;
  --body-color: #fff2e0;
}

/* Beauty & self-care brands, Wellness & lifestyle apps, Boutique e-commerce, Wedding & events, 
Content creators / influencer, Cafés & brunch spots, Parenting & baby brands */
.playful-confetti-style {
  --color-1: #ff5f7e;
  --color-2: #7c4dff;
  --dark: #6b5b73;
  --grey: #cd9ca5;
  --light-grey: #fff7fa;
  --white: #ffffff;
  --black: #333333;
  --body-bg: #fff8f5;
  --body-color: #333333;

  --font-family: "Quicksand", "Nunito", "Segoe UI", sans-serif;
  --heading-font: var(--font-family);
  --heading-font-weight: 700;
  --heading-letter-spacing: 0.02rem;

  --icon-default-fill: var(--color-1);
  --image-radius: 1.5rem;
  --default-border: 0.125rem solid var(--grey);
  --default-border-radius: 1.5rem;
  --box-shadow: 0 0.5rem 1.125rem color-mix(in srgb, var(--color-1) 20%, transparent);

  --surface-raised: var(--white);
  --surface-hover: color-mix(in srgb, var(--color-1) 8%, transparent);
  --surface-selected: color-mix(in srgb, var(--color-1) 14%, transparent);

  --panel-bg: var(--white);
  --panel-border: 0.125rem solid var(--grey);
  --panel-radius: 1.5rem;
  --panel-shadow: 0 0.5rem 1.125rem color-mix(in srgb, var(--color-1) 20%, transparent);

  --control-bg: var(--color-1);
  --control-color: var(--white);
  --control-font-weight: 700;
  --control-radius: 1.5rem;
  --control-hover-bg: var(--color-2);
  --control-hover-color: var(--white);
  --control-focus-ring: 0 0 0 0.1875rem color-mix(in srgb, var(--color-1) 35%, transparent);

  --input-bg: var(--white);
  --input-border: 0.125rem solid var(--grey);
  --input-radius: 1.125rem;
  --input-focus-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--color-1) 25%, transparent);

  --duration-fast: 0.2s;
  --duration-base: 0.3s;
  --easing: ease-in-out;
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
}
[data-theme="dark"].playful-confetti-style {
  --color-1: #ff7fa6;
  --color-2: #9b7dff;
  --dark: #d6cde8;
  --grey: #4b4258;
  --light-grey: #2a2434;
  --white: #1c1723;
  --black: #f8f5ff;
  --body-bg: #18131f;
  --body-color: #f2edf8;
  --heading-color: #ffffff;
  --link-color: #ff9db9;
  --link-hover-color: #c7b3ff;
  --icon-default-fill: var(--color-1);
  --surface-raised: #231d2d;
  --surface-overlay: color-mix(in srgb, #000 70%, transparent);
  --surface-inverse: #f8f5ff;
  --surface-inverse-color: #18131f;
  --surface-hover: color-mix(in srgb, var(--color-1) 18%, #231d2d);
  --surface-active: color-mix(in srgb, var(--color-2) 22%, #231d2d);
  --surface-selected: color-mix(in srgb, var(--color-1) 25%, #231d2d);
  --panel-bg: #231d2d;
  --panel-border: 0.125rem solid #40364d;
  --panel-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--color-1) 18%, transparent);
  --control-bg: var(--color-1);
  --control-color: #ffffff;
  --control-hover-bg: var(--color-2);
  --control-hover-color: #ffffff;
  --control-focus-ring: 0 0 0 0.1875rem color-mix(in srgb, var(--color-1) 40%, transparent);
  --input-bg: #2b2436;
  --input-color: #f2edf8;
  --input-border: 0.125rem solid #514664;
  --input-placeholder: #b8aeca;
  --input-hover-border: var(--color-1);
  --input-focus-border: var(--color-1);
  --input-focus-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--color-1) 35%, transparent);
  --box-shadow: 0 0.5rem 1.125rem color-mix(in srgb, var(--color-1) 16%, transparent);
}

/* material-style — Material Design 
Ideal for clean, structured, and responsive interfaces based on Google’s design principles.
SaaS platforms, productivity tools, fintech apps, government portals, and educational platforms.
*/

.material-style {
  --color-1: #6200ee;
  --color-2: #03dac6;
  --dark: #49454f;
  --grey: #cac4d0;
  --light-grey: #f3edf7;
  --white: #ffffff;
  --black: #1c1b1f;
  --body-bg: #fffbfe;
  --body-color: #1c1b1f;
  --font-family: Roboto, ui-sans-serif, "Segoe UI", sans-serif;
  --heading-font-weight: 500;
  --default-border: none;
  --default-border-radius: 0.25rem;
  --box-shadow: 0 0.0625rem 0.1875rem color-mix(in srgb, var(--black) 30%, transparent), 0 0.0625rem 0.125rem color-mix(in srgb, var(--black) 24%, transparent);
  --panel-bg: var(--white);
  --panel-border: none;
  --panel-radius: 0.25rem;
  --panel-shadow: 0 0.125rem 0.375rem color-mix(in srgb, var(--black) 16%, transparent), 0 0.0625rem 0.125rem color-mix(in srgb, var(--black) 23%, transparent);
  --control-bg: var(--color-1);
  --control-color: var(--white);
  --control-font-weight: 500;
  --control-border: none;
  --control-radius: 0.25rem;
  --control-shadow: 0 0.1875rem 0.0625rem color-mix(in srgb, var(--black) 20%, transparent), 0 0.125rem 0.125rem color-mix(in srgb, var(--black) 14%, transparent);
  --control-hover-bg: color-mix(in srgb, var(--color-1) 85%, var(--black));
  --input-bg: var(--light-grey);
  --input-border: 0.0625rem solid var(--grey);
  --input-radius: 0.25rem 0.25rem 0 0;
  --input-focus-border: var(--color-1);
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
}
[data-theme="dark"].material-style {
  --color-1: #bb86fc;
  --color-2: #03dac6;
  --dark: #c7c2cf;
  --grey: #938f99;
  --light-grey: #2b2930;
  --white: #121212;
  --black: #f5eff7;
  --body-bg: #121212;
  --body-color: #e6e1e5;
  --panel-bg: #1e1e1e;
  --control-bg: var(--color-1);
  --control-color: #1a1325;
  --control-hover-bg: #d0bcff;
  --input-bg: #242428;
  --input-color: #e6e1e5;
  --input-border: 0.0625rem solid #4a4458;
  --input-focus-border: var(--color-1);
  --heading-color: #f5eff7;
  --link-color: #d0bcff;
  --link-hover-color: #03dac6;
  --icon-default-fill: var(--color-1);
  --surface-overlay: color-mix(in srgb, #000 70%, transparent);
  --surface-inverse: #f5eff7;
  --surface-inverse-color: #121212;
  --surface-hover: color-mix(in srgb, var(--color-1) 16%, transparent);
  --surface-active: color-mix(in srgb, var(--color-1) 24%, transparent);
  --surface-selected: color-mix(in srgb, var(--color-1) 20%, transparent);
  --surface-disabled: color-mix(in srgb, var(--grey) 35%, transparent);
  --box-shadow:
    0 0.0625rem 0.1875rem color-mix(in srgb, #000 60%, transparent),
    0 0.25rem 0.75rem color-mix(in srgb, #000 50%, transparent);
  --panel-shadow:
    0 0.125rem 0.5rem color-mix(in srgb, #000 60%, transparent),
    0 0.0625rem 0.1875rem color-mix(in srgb, #000 40%, transparent);
  --control-shadow:
    0 0.125rem 0.375rem color-mix(in srgb, #000 60%, transparent),
    0 0.0625rem 0.125rem color-mix(in srgb, #000 45%, transparent);
}


/* APP STYLES ----------------------------------------------------------------------*/
/* Modular / Card-Based UI
Dashboard/Modular: Ideal for admin panels with widget/card layouts.
CRMs, HR systems, ERP tools, SaaS dashboards.
*/
.modular-style {
  --color-1: #2563eb;
  --grey: #858c94;
  --light-grey: #f8fafc;
  --body-bg: #f8fafc;
  --body-color: #1e293b;
  --font-family: Inter,sans-serif;
  --heading-font-weight: 600;
  --icon-default-fill: #2563eb;
  --image-radius: 8px;
  --image-shadow: 0 2px 10px rgba(0,0,0,.06);
  --default-border: 1px solid #dbe3ef;
  --default-border-radius: 8px;
  --box-shadow: 0 2px 10px rgba(0,0,0,.06);
  --surface-raised: #ffffff;
  --panel-bg: #ffffff;
  --panel-border: 1px solid #dbe3ef;
  --panel-radius: 8px;
  --panel-shadow: 0 2px 10px rgba(0,0,0,.06);
  --control-bg: #2563eb;
  --control-color: #ffffff;
  --control-radius: 8px;
  --input-border: 1px solid #dbe3ef;
  --input-radius: 8px;
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
}
[data-theme="dark"].modular-style {
  --color-1: #3b82f6;
  --grey: #556e90;
  --light-grey: #1e293b;
  --body-bg: #0f172a;
  --body-color: #e2e8f0;
  --icon-default-fill: #3b82f6;
  --image-shadow: 0 2px 10px rgba(0,0,0,.4);
  --default-border: 1px solid #334155;
  --box-shadow: 0 2px 10px rgba(0,0,0,.4);
  --surface-raised: #1e293b;
  --panel-bg: #1e293b;
  --panel-border: 1px solid #334155;
  --panel-shadow: 0 2px 10px rgba(0,0,0,.4);
  --control-bg: #3b82f6;
  --control-color: #ffffff;
  --input-border: 1px solid #334155;
}

/* .flat2-style — Flat 2.0 
Data-Driven: Best for analytics-heavy or chart-rich dashboards.
Fintech apps, e-commerce admin, task managers.
*/
.flat-style {
  --color-1: #4d7cfe;
  --color-2: #66d9b5;
  --dark: #5a6472;
  --grey: #999;
  --light-grey: #f5f7fa;
  --white: #ffffff;
  --black: #22282f;
  --body-bg: #f5f7fa;
  --body-color: #22282f;
  --font-family: ui-sans-serif, "Segoe UI", Roboto, sans-serif;
  --heading-font-weight: 600;
  --default-border: none;
  --default-border-radius: 0.4rem;
  --box-shadow: 0 0.125rem 0.375rem color-mix(in srgb, var(--black) 6%, transparent);
  --panel-bg: var(--white);
  --panel-border: none;
  --panel-radius: 0.4rem;
  --panel-shadow: 0 0.125rem 0.375rem color-mix(in srgb, var(--black) 6%, transparent);
  --control-bg: var(--color-1);
  --control-color: var(--white);
  --control-border: none;
  --control-radius: 0.4rem;
  --control-shadow: none;
  --control-hover-bg: color-mix(in srgb, var(--color-1) 88%, var(--black));
  --input-bg: var(--white);
  --input-border: 0.0625rem solid var(--grey);
  --input-radius: 0.4rem;
  --input-shadow: none;
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
}
[data-theme="dark"].flat-style {
   --color-1: #6690ff;
  --color-2: #5cd6ae;
  --dark: #aab2c0;
  --grey: #999;
  --light-grey: #1e242d;
  --white: #1a1f28;
  --black: #f3f5f8;
  --body-bg: #12151b;
  --body-color: #d7dce3;
  --font-family: ui-sans-serif, "Segoe UI", Roboto, sans-serif;
  --heading-font-weight: 600;
  --default-border: none;
  --default-border-radius: 0.4rem;
  --box-shadow: 0 0.125rem 0.375rem color-mix(in srgb, #000000 45%, transparent);
  --panel-bg: var(--white);
  --panel-border: none;
  --panel-radius: 0.4rem;
  --panel-shadow: 0 0.125rem 0.375rem color-mix(in srgb, #000000 45%, transparent);
  --control-bg: var(--color-1);
  --control-color: #f7f9fb;
  --control-border: none;
  --control-radius: 0.4rem;
  --control-shadow: none;
  --control-hover-bg: color-mix(in srgb, var(--color-1) 85%, white);
  --input-bg: var(--white);
  --input-border: 0.0625rem solid var(--grey);
  --input-radius: 0.4rem;
  --input-shadow: none;
}

/* .data-style — Data-Driven / Analytical 
Data-Driven: Best for analytics-heavy or chart-rich dashboards.
Analytics platforms, BI tools, performance monitoring.
*/
.data-style{
  --color-1: #0f766e;
  --color-2: #2563eb;
  --grey: #94a3b8;
  --light-grey: #f8fafc;
  --body-bg: #f8fafc;
  --body-color: #1e293b;
  --font-family: Inter,sans-serif;
  --heading-font-weight: 600;
  --icon-default-fill: #0f766e;
  --image-radius: 6px;
  --image-shadow: 0 1px 4px rgba(0,0,0,.05);
  --default-border: 1px solid #dbe3ef;
  --default-border-radius: 6px;
  --box-shadow: 0 1px 4px rgba(0,0,0,.05);
  --surface-raised: #ffffff;
  --panel-bg: #ffffff;
  --panel-border: 1px solid #dbe3ef;
  --panel-radius: 6px;
  --panel-shadow: 0 1px 4px rgba(0,0,0,.05);
  --control-bg: #0f766e;
  --control-color: #fff;
  --control-radius: 6px;
  --input-border: 1px solid #cbd5e1;
  --input-radius: 6px;
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
}
[data-theme="dark"].data-style {
  --color-1: #14b8a6;
  --color-2: #3b82f6;
  --grey: #64748b;
  --light-grey: #1e293b;
  --body-bg: #0f172a;
  --body-color: #dbe7f3;
  --heading-color: #f8fafc;
  --link-color: #5eead4;
  --link-hover-color: #99f6e4;
  --icon-default-fill: #2dd4bf;
  --surface-raised: #162033;
  --panel-bg: #162033;
  --panel-border: 1px solid #2b3b54;
  --panel-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  --surface-overlay: rgba(0, 0, 0, .7);
  --surface-inverse: #f8fafc;
  --surface-inverse-color: #0f172a;
  --surface-hover: rgba(20, 184, 166, .12);
  --surface-active: rgba(20, 184, 166, .20);
  --surface-selected: rgba(20, 184, 166, .18);
  --surface-disabled: rgba(100, 116, 139, .20);
  --default-border: 1px solid #2b3b54;
  --box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  --control-bg: #14b8a6;
  --control-color: #082f2d;
  --control-hover-bg: #5eead4;
  --control-hover-color: #082f2d;
  --control-active-bg: #0d9488;
  --control-active-color: #ffffff;
  --control-focus-ring: 0 0 0 .1875rem rgba(20, 184, 166, .35);
  --input-bg: #0b1220;
  --input-color: #e2e8f0;
  --input-border: 1px solid #334155;
  --input-hover-border: #475569;
  --input-focus-border: #14b8a6;
  --input-focus-shadow: 0 0 0 .1875rem rgba(20, 184, 166, .25);
  --input-placeholder: #94a3b8;
  --input-shadow: none;
  --input-disabled-bg: #1e293b;
  --image-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}


/* .enterprise-style — Enterprise / Functional
Enterprise: Built for dense data tables and power-user workflows.
B2B SaaS, legal/accounting tools, logistics & finance software.
*/
.enterprise-style {
  --color-1: #1f4e8c;
  --color-2: #5a7290;
  --dark: #3c4a5c;
  --grey: #c3ccd6;
  --light-grey: #f2f4f7;
  --white: #ffffff;
  --black: #1b2530;
  --body-bg: #f2f4f7;
  --body-color: #1b2530;
  --font-family: Arial, "Segoe UI", ui-sans-serif, sans-serif;
  --heading-font-weight: 600;
  --default-border: 0.0625rem solid var(--grey);
  --default-border-radius: 0.2rem;
  --box-shadow: none;
  --panel-bg: var(--white);
  --panel-border: 0.0625rem solid var(--grey);
  --panel-radius: 0.2rem;
  --panel-shadow: none;
  --control-bg: var(--color-1);
  --control-color: var(--white);
  --control-radius: 0.2rem;
  --control-hover-bg: color-mix(in srgb, var(--color-1) 85%, var(--black));
  --input-bg: var(--white);
  --input-border: 0.0625rem solid var(--grey);
  --input-radius: 0.2rem;
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
}
[data-theme="dark"].enterprise-style {
  --color-1: #5b9bd5;
  --color-2: #8fa6bd;
  --dark: #aab6c4;
  --grey: #3c4a5c;
  --light-grey: #1c232c;
  --white: #ffffff;
  --black: #e8ecf1;
  --body-bg: #12161c;
  --body-color: #dde3ea;
  --font-family: Arial, "Segoe UI", ui-sans-serif, sans-serif;
  --heading-font-weight: 600;
  --default-border: 0.0625rem solid var(--grey);
  --default-border-radius: 0.2rem;
  --box-shadow: none;
  --panel-bg: #1a2029;
  --panel-border: 0.0625rem solid var(--grey);
  --panel-radius: 0.2rem;
  --panel-shadow: none;
  --control-bg: var(--color-1);
  --control-color: #0e1116;
  --control-radius: 0.2rem;
  --control-hover-bg: color-mix(in srgb, var(--color-1) 85%, var(--white));
  --input-bg: #1a2029;
  --input-border: 0.0625rem solid var(--grey);
  --input-radius: 0.2rem;
}

/* .system-ui-style — OS-Like UI 
System UI: Mimics desktop apps; great for dev tools or OS-like apps.
Developer tools, code platforms, internal IT tools.
*/
.system-ui-style {
  --color-1: #007aff;
  --color-1: #000000d8;
  --color-2: #4a4e69;
  --dark: #6e6e73;
  --grey: #919191;
  --light-grey: #f2f2f7;
  --white: #ffffff;
  --black: #1c1c1e;
  --body-bg: #f2f2f7;
  --body-color: #1c1c1e;
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --heading-font-weight: 600;
  --default-border: 0.0625rem solid var(--light-grey);
  --default-border-radius: 0.625rem;
  --box-shadow: 0 0.0625rem 0.125rem color-mix(in srgb, var(--black) 8%, transparent);
  --panel-bg: var(--white);
  --panel-border: 0.0625rem solid var(--light-grey);
  --panel-radius: 0.625rem;
  --panel-shadow: 0 0.0625rem 0.125rem color-mix(in srgb, var(--black) 6%, transparent);
  --control-bg: var(--color-1);
  --control-color: var(--white);
  --control-radius: 0.5rem;
  --control-hover-bg: color-mix(in srgb, var(--color-1) 88%, var(--black));
  --input-bg: var(--white);
  --input-border: 0.0625rem solid var(--grey);
  --input-radius: 0.5rem;
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
}
[data-theme="dark"].system-ui-style {
  --color-1: #0a84ff;
  --color-2: #7d81a3;
  --dark: #98989d;
  --grey: #38383a;
  --light-grey: #2c2c2e;
  --white: #1c1c1e;
  --black: #f2f2f7;
  --body-bg: #000000;
  --body-color: #f2f2f7;
  --control-color: #ffffff;
  --grey: #c1c1c1;
}

/* .colorful-dashboard-style — Colorful Dashboard
Colorful Dashboard: Use to bring energy to user dashboards and KPIs.
Health tech, education, fitness tracking apps.
*/
.colorful-dashboard-style{
  --color-1: #6366f1;
  --color-2: #ec4899;
  --success: #22c55e;
  --warning: #f59e0b;
  --info: #06b6d4;
  --body-bg: #f5f7fb;
  --body-color: #1f2937;
  --font-family: Inter,sans-serif;
  --heading-font-weight: 700;
  --icon-default-fill: #6366f1;
  --image-radius: 12px;
  --default-border: 1px solid #e5e7eb;
  --default-border-radius: 12px;
  --box-shadow: 0 6px 18px rgba(0,0,0,.08);
  --surface-raised: #fff;
  --panel-bg: #fff;
  --panel-border: 1px solid #e5e7eb;
  --panel-radius: 12px;
  --panel-shadow: 0 6px 18px rgba(0,0,0,.08);
  --control-bg: #6366f1;
  --control-color: #fff;
  --control-radius: 12px;
  --input-border: 1px solid #d1d5db;
  --input-radius: 10px;
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
}
[data-theme="dark"].colorful-dashboard-style {
  --color-1: #818cf8;
  --color-2: #f472b6;
  --success: #4ade80;
  --warning: #fbbf24;
  --info: #22d3ee;
  --body-bg: #0f172a;
  --body-color: #e5e7eb;
  --font-family: Inter, sans-serif;
  --heading-font-weight: 700;
  --icon-default-fill: var(--color-1);
  --image-radius: 12px;
  --default-border: 1px solid #334155;
  --default-border-radius: 12px;
  --box-shadow: 0 10px 30px rgba(0,0,0,.45);
  --surface-raised: #1e293b;
  --surface-dim: #111827;
  --surface-hover: color-mix(in srgb, var(--color-1) 16%, transparent);
  --surface-active: color-mix(in srgb, var(--color-1) 24%, transparent);
  --surface-selected: color-mix(in srgb, var(--color-1) 20%, transparent);
  --panel-bg: #1e293b;
  --panel-border: 1px solid #334155;
  --panel-radius: 12px;
  --panel-shadow: 0 10px 30px rgba(0,0,0,.45);
  --control-bg: var(--color-1);
  --control-color: #ffffff;
  --control-hover-bg: #6366f1;
  --control-hover-color: #ffffff;
  --control-active-bg: #4f46e5;
  --input-bg: #0f172a;
  --input-color: #e5e7eb;
  --input-border: 1px solid #475569;
  --input-hover-border: #64748b;
  --input-focus-border: var(--color-1);
  --input-placeholder: #94a3b8;
  --input-radius: 10px;
}
/* AURORA
Best for AI, SaaS, creative tools, dashboards, and modern startups. It delivers a futuristic, vibrant, 
and premium look with soft glowing colors inspired by the northern lights.*/
.aurora-style {
  --color-1: #6d5dfc;
  --color-2: #ff6ec7;
  --dark: #2b2250;
  --grey: #5f5958;
  --white: #ffffff;
  --black: #1a1533;
  --danger: #f87171;
  --info: #38bdf8;
  --success: #34d399;
  --warning: #fbbf24;
  --luxury: #a855f7;
  --light-grey: #f3f0ff;
  --body-bg: #fbfaff;
  --body-color: var(--dark);
  --font-weight: 400;
  --font-family: "Poppins", "Helvetica Neue", sans-serif;
  --heading-font-weight: 700;
  --heading-color: var(--dark);
  --line-height: 1.6;
  --link-color: var(--dark);
  --link-hover-color: var(--color-2);
  --link-hover-decoration: none;
  --icon-default-fill: var(--luxury);
  --default-padding: 1rem;
  --default-gap: 1.25rem;
  --default-border: none;
  --default-border-radius: 1.5rem;
  --box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--luxury) 30%, transparent);
  --surface-raised: var(--body-bg);
  --surface-dim: var(--light-grey);
  --surface-inverse: var(--dark);
  --surface-inverse-color: var(--white);
  --surface-hover: color-mix(in srgb, var(--color-1) 10%, transparent);
  --surface-active: color-mix(in srgb, var(--color-1) 18%, transparent);
  --surface-selected: color-mix(in srgb, var(--luxury) 14%, transparent);
  --surface-disabled: color-mix(in srgb, var(--grey) 35%, transparent);
  --panel-bg: var(--surface-raised);
  --panel-border: 0.0625rem solid color-mix(in srgb, var(--luxury) 25%, transparent);
  --panel-radius: 1.5rem;
  --panel-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--luxury) 30%, transparent);
  --panel-padding: var(--space-dense-2);
  --control-bg: var(--luxury);
  --control-color: var(--white);
  --control-radius: 2rem;
  --control-padding: 0.6rem 1.5rem;
  --control-shadow: 0 0.5rem 1.25rem color-mix(in srgb, var(--luxury) 30%, transparent);
  --control-hover-bg: color-mix(in srgb, var(--luxury) 80%, var(--color-1) 20%);
  --control-hover-color: var(--white);
  --control-active-bg: color-mix(in srgb, var(--luxury) 65%, var(--color-2) 35%);
  --control-active-color: var(--white);
  --control-focus-ring: 0 0 0 0.1875rem color-mix(in srgb, var(--color-1) 30%, transparent);
  --input-bg: var(--white);
  --input-color: var(--dark);
  --input-border: 0.0625rem solid var(--grey);
  --input-radius: 1rem;
  --input-placeholder: color-mix(in srgb, var(--dark) 55%, transparent);
  --input-hover-border: var(--color-1);
  --input-focus-border: var(--luxury);
  --input-focus-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--color-1) 30%, transparent);
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
  --page-box-padding: var(--default-padding);
}

[data-theme="dark"].aurora-style {
  --color-1: #8f7bff;
  --color-2: #ff7ecf;
  --dark: #ece7ff;
  --grey: #6a5f99;
  --black: #ffffff;
  --white: #1a1533;
  --danger: #fb8a8a;
  --info: #5ecbfa;
  --success: #4ee6ab;
  --warning: #fcd34d;
  --luxury: #b17dfd;
  --light-grey: #241c46;
  --body-bg: #150f2e;
  --body-color: var(--dark);
  --font-weight: 400;
  --font-family: "Poppins", "Helvetica Neue", sans-serif;
  --heading-font-weight: 700;
  --heading-color: var(--dark);
  --line-height: 1.6;
  --link-color: var(--dark);
  --link-hover-color: var(--color-2);
  --link-hover-decoration: none;
  --icon-default-fill: var(--luxury);
  --default-padding: 1rem;
  --default-gap: 1.25rem;
  --default-border: none;
  --default-border-radius: 1.5rem;
  --surface-raised: #1e1740;
  --surface-dim: #0d0a1f;
  --surface-inverse: var(--white);
  --surface-inverse-color: var(--black);
  --surface-hover: color-mix(in srgb, var(--color-1) 14%, transparent);
  --surface-active: color-mix(in srgb, var(--color-1) 22%, transparent);
  --surface-selected: color-mix(in srgb, var(--luxury) 18%, transparent);
  --surface-disabled: color-mix(in srgb, var(--grey) 30%, transparent);
  --panel-bg: var(--surface-raised);
  --panel-border: 0.0625rem solid color-mix(in srgb, var(--luxury) 35%, transparent);
  --panel-radius: 1.5rem;
  --panel-padding: var(--space-dense-2);
  --control-bg: var(--luxury);
  --control-color: var(--white);
  --control-radius: 2rem;
  --control-padding: 0.6rem 1.5rem;
  --control-hover-bg: color-mix(in srgb, var(--luxury) 80%, var(--color-1) 20%);
  --control-hover-color: var(--white);
  --control-active-bg: color-mix(in srgb, var(--luxury) 65%, var(--color-2) 35%);
  --control-active-color: var(--white);
  --control-focus-ring: 0 0 0 0.1875rem color-mix(in srgb, var(--color-1) 40%, transparent);
  --input-bg: #201a3d;
  --input-color: var(--dark);
  --input-border: 0.0625rem solid var(--grey);
  --input-radius: 1rem;
  --input-placeholder: color-mix(in srgb, var(--dark) 55%, transparent);
  --input-hover-border: var(--color-1);
  --input-focus-border: var(--luxury);
  }

/* SWISS / INTERNATIONAL TYPOGRAPHIC STYLE — one red accent,
  strict grid feel, single accent, sharp corners, no shadow, tight letter-spacing on headings. 
  Best for SaaS, documentation, business websites, dashboards, and enterprise applications.*/
.swiss-style {
  --color-1: #d10a11;
  --color-2: #111111;
  --body-bg: #ffffff;
  --body-color: #111111;
  --heading-color: #111111;
  --heading-font-weight: 700;
  --heading-letter-spacing: -0.02em;
  --panel-bg: #ffffff;
  --panel-border: 0.0625rem solid #111111;
  --panel-radius: 0;
  --panel-shadow: none;
  --panel-padding: var(--space-2);
  --control-bg: #111111;
  --control-color: #ffffff;
  --control-radius: 0;
  --control-shadow: none;
  --control-hover-bg: #d10a11;
  --control-hover-color: #ffffff;
  --box-shadow: none;
  --default-border-radius: 0;
  --link-color: #d10a11;
  --link-hover-color: #111111;
}

[data-theme="dark"].swiss-style {
  --color-1: #e31b23;
  --color-2: #f2f2f2;
  --body-bg: #0f0f10;
  --body-color: #e8e8e8;
  --heading-color: #ffffff;
  --heading-font-weight: 700;
  --heading-letter-spacing: -0.02em;
  --panel-bg: #161616;
  --panel-border: 0.0625rem solid #f2f2f2;
  --panel-radius: 0;
  --panel-shadow: none;
  --panel-padding: var(--space-2);
  --control-bg: #f2f2f2;
  --control-color: #111111;
  --control-radius: 0;
  --control-shadow: none;
  --control-hover-bg: #e31b23;
  --control-hover-color: #ffffff;
  --box-shadow: none;
  --default-border-radius: 0;
  --link-color: #ff5b5b;
  --link-hover-color: #ffffff;
  --dark: #b8b8b8;
  --grey: #6b6b6b;
  --light-grey: #2a2a2a;
  --black: #ffffff;
  --white:  #000000;
  --surface-raised: #161616;
  --surface-dim: #1d1d1d;
  --surface-hover: color-mix(in srgb, var(--color-1) 14%, transparent);
  --surface-active: color-mix(in srgb, var(--color-1) 22%, transparent);
  --surface-selected: color-mix(in srgb, var(--color-1) 18%, transparent);
  --surface-overlay: rgba(0, 0, 0, 0.72);
  --input-bg: #1b1b1b;
  --input-color: #f2f2f2;
  --input-border: 0.0625rem solid #4a4a4a;
  --input-placeholder: #8a8a8a;
  --input-shadow: none;
  --input-hover-border: #7a7a7a;
  --input-focus-border: var(--color-1);
  --image-radius: 0;
  --image-shadow: none;
}

/* EDITORIAL STYLE
   Elegant • Reading-focused • Print-inspired
  Best for blogs, magazines, news sites, portfolios, and long-form reading experiences. */

.editorial-style {
  --color-1: #8b5e3c;
  --color-2: #d4a373;
  --dark: #2b2b2b;
  --grey: #7b7b7b;
  --light-grey: #f7f3ec;
  --white: #fffdf8;
  --black: #1f1f1f;
  --body-bg: var(--white);
  --body-color: var(--black);
  --panel-bg: #ffffff;
  --panel-color: var(--black);
  --control-bg: var(--color-1);
  --control-color: white;
  --input-bg: white;
  --input-color: var(--black);
  --border-color: #e7dfd4;
  --default-border: 0.0625rem solid var(--border-color);
  --default-border-radius: 0.5rem;
  --box-shadow: 0 .3rem 1rem rgb(0 0 0 / .05);
  --font-family: Georgia, "Times New Roman", serif;
  --line-height: 1.8;
  --page-box-border: var(--default-border);
  --page-box-radius: var(--default-border-radius);
  --page-box-shadow: var(--box-shadow);
}

[data-theme="dark"].editorial-style {
  --color-1: #c89a73;
  --color-2: #e2b98f;
  --dark: #d2c7bb;
  --grey: #9d9288;
  --light-grey: #24201c;
  --white: #181512;
  --black: #f2ece4;
  --body-bg: #161311;
  --body-color: #e6ddd3;
  --heading-color: #f6efe8;
  --panel-bg: #211c18;
  --panel-color: #ece3d9;
  --control-bg: var(--color-1);
  --control-color: #181311;
  --control-hover-bg: color-mix(in srgb, var(--color-1) 88%, white);
  --control-hover-color: #111;
  --control-active-bg: var(--color-2);
  --control-active-color: #111;
  --input-bg: #29231f;
  --input-color: #ece3d9;
  --input-placeholder: #9d9288;
  --border-color: #3b332d;
  --default-border: 0.0625rem solid var(--border-color);
  --panel-border: var(--default-border);
  --surface-raised: var(--panel-bg);
  --surface-dim: #1b1714;
  --surface-overlay: rgb(0 0 0 / 70%);
  --surface-hover: color-mix(in srgb, var(--color-1) 12%, transparent);
  --surface-active: color-mix(in srgb, var(--color-1) 20%, transparent);
  --surface-selected: color-mix(in srgb, var(--color-1) 16%, transparent);
  --link-color: #dfb488;
  --link-hover-color: #f2cfaa;
  --box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .35);
  --panel-shadow: var(--box-shadow);
  --icon-default-fill: var(--color-2);
  --input-border: 0.0625rem solid var(--border-color);
  --input-hover-border: var(--color-2);
  --input-focus-border: var(--color-1);
  --input-focus-shadow: 0 0 0 0.1875rem rgb(200 154 115 / .25);
}

/* Pastel
Soft tints via color-mix, generous rounding, gentle diffuse shadow. 
Best for wellness, education, healthcare, lifestyle brands, and family-friendly apps.*/
.pastel-style {
  --color-1: #b98cc9;
  --color-2: #8cc9c2;
  --body-bg: #fffaf9;
  --body-color: #4a4453;
  --heading-color: #6b5b75;
  --heading-font-weight: 600;
  --surface-raised: color-mix(in srgb, var(--color-1) 8%, white);
  --panel-bg: var(--surface-raised);
  --panel-border: 0.0625rem solid color-mix(in srgb, var(--color-1) 20%, transparent);
  --panel-radius: 1.25rem;
  --panel-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--color-1) 15%, transparent);
  --panel-padding: var(--space-2);
  --control-bg: var(--color-1);
  --control-color: #ffffff;
  --control-radius: 1.5rem;
  --control-shadow: 0 0.25rem 0.75rem color-mix(in srgb, var(--color-1) 25%, transparent);
  --control-hover-bg: color-mix(in srgb, var(--color-1) 80%, white);
  --light-grey: color-mix(in srgb, var(--color-2) 12%, white);
  --link-color: var(--color-1);
  --link-hover-color: var(--color-2);
}
[data-theme="dark"].pastel-style {
  --color-1: #cba9de;
  --color-2: #9ddbd3;
  --body-bg: #1d1a21;
  --body-color: #e5dde9;
  --heading-color: #f1e7f7;
  --heading-font-weight: 600;
  --surface-raised: color-mix(in srgb, var(--color-1) 12%, #2a2430);
  --panel-bg: var(--surface-raised);
  --panel-border: 0.0625rem solid color-mix(in srgb, var(--color-1) 28%, transparent);
  --panel-radius: 1.25rem;
  --panel-shadow: 0 0.75rem 2rem color-mix(in srgb, black 60%, transparent);
  --panel-padding: var(--space-2);
  --control-bg: var(--color-1);
  --control-color: #1d1a21;
  --control-radius: 1.5rem;
  --control-shadow: 0 0.375rem 1rem color-mix(in srgb, var(--color-1) 20%, transparent);
  --control-hover-bg: color-mix(in srgb, var(--color-1) 85%, white);
  --light-grey: #322b39;
  --link-color: #d9bdf1;
  --link-hover-color: #ace7de;
  --surface-dim: #17151b;
  --surface-overlay: color-mix(in srgb, black 70%, transparent);
  --surface-inverse: #f6f1f8;
  --surface-inverse-color: #1d1a21;
  --surface-hover: color-mix(in srgb, var(--color-1) 12%, transparent);
  --surface-active: color-mix(in srgb, var(--color-1) 20%, transparent);
  --surface-selected: color-mix(in srgb, var(--color-2) 18%, transparent);
  --surface-disabled: color-mix(in srgb, #777 35%, transparent);
  --input-bg: #28232d;
  --input-color: #f1eaf5;
  --input-border: 0.125rem solid #40364a;
  --input-placeholder: #a69ab2;
  --input-hover-border: var(--color-1);
  --input-focus-border: var(--color-2);
  --input-shadow: 0 0.25rem 0.75rem color-mix(in srgb, black 35%, transparent);
  --success: #7fd7b4;
  --info: #86c8ff;
  --warning: #f5d08a;
  --danger: #f29bb2;
}

/* MONOCHROME 
Single-hue, near-grayscale palette; typography carries the design.
Best for portfolios, photography, fashion, luxury products, and minimalist websites. */
.monochrome-style {
  --color-1: #1a1a1a;
  --color-2: #4d4d4d;
  --body-bg: #ffffff;
  --body-color: #1a1a1a;
  --heading-color: #000000;
  --dark: #4d4d4d;
  --grey: #999999;
  --light-grey: #f0f0f0;
  --panel-bg: #ffffff;
  --panel-border: 0.0625rem solid #d9d9d9;
  --panel-radius: 0.25rem;
  --panel-shadow: none;
  --control-bg: #1a1a1a;
  --control-color: #ffffff;
  --control-radius: 0.2rem;
  --control-hover-bg: #4d4d4d;
  --control-hover-color: #ffffff;
  --link-color: #1a1a1a;
  --link-hover-color: #999999;
  --success: #4d4d4d;
  --info: #333333;
  --danger: #000000;
  --warning: #666666;
  --luxury: #1a1a1a;
}
[data-theme="dark"].monochrome-style {
  --color-1: #e6e6e6;
  --color-2: #b3b3b3;
  --body-bg: #0d0d0d;
  --body-color: #d9d9d9;
  --heading-color: #ffffff;
  --dark: #d9d9d9;
  --grey: #666666;
  --light-grey: #1a1a1a;
  --panel-bg: #171717;
  --panel-border: 0.0625rem solid color-mix(in srgb, #ffffff 12%, transparent);
  --panel-radius: 0.25rem;
  --panel-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.5);
  --control-bg: #e6e6e6;
  --control-color: #0d0d0d;
  --control-radius: 0.2rem;
  --control-hover-bg: #b3b3b3;
  --control-hover-color: #0d0d0d;
  --link-color: #e6e6e6;
  --link-hover-color: #999999;
  --success: #b3b3b3;
  --info: #999999;
  --danger: #ffffff;
  --warning: #cccccc;
}


/* Futuristic
Dark tech surface, cyan/violet duo, monospace-leaning headings, glow shadows via color-mix 
Best for AI, technology, cybersecurity, developer tools, crypto, and startup landing pages. */
.futuristic-style {
  --color-1: #00e5ff;
  --color-2: #7b2ff7;
  --body-bg: #05070d;
  --body-color: #d6e8ec;
  --heading-font: 'Courier New', ui-monospace, monospace;
  --heading-color: #ffffff;
  --heading-font-weight: 600;
  --heading-letter-spacing: 0.05em;
  --dark: #9fb4bb;
  --light-grey: #10131c;
  --black: #ffffff;
  --white: #05070d;
  --success: #00ffb2;
  --info: #00c3ff;
  --danger: #ff3366;
  --warning: #ffb800;
  --luxury: #c77dff;
  --panel-bg: #0b0e17;
  --panel-border: 0.0625rem solid color-mix(in srgb, var(--color-1) 40%, transparent);
  --panel-radius: 0.5rem;
  --panel-shadow: 0 0 1rem color-mix(in srgb, var(--color-1) 35%, transparent);
  --panel-padding: var(--space-2);
  --control-bg: var(--color-1);
  --control-color: #05070d;
  --control-radius: 0.25rem;
  --control-shadow: 0 0 0.75rem color-mix(in srgb, var(--color-1) 50%, transparent);
  --control-hover-bg: var(--color-2);
  --control-hover-color: #ffffff;
  --input-bg: #0b0e17;
  --input-color: #d6e8ec;
  --input-border: 0.0625rem solid color-mix(in srgb, var(--color-1) 40%, transparent);
  --input-placeholder: color-mix(in srgb, var(--body-color) 60%, transparent);
  --input-focus-border: var(--color-1);
  --input-focus-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--color-1) 25%, transparent);
  --link-color: var(--color-1);
  --link-hover-color: var(--color-2);
  --icon-default-fill: var(--color-1);
  --surface-dim: #25272d;
}
}