affora 0.1.0

package/src/tokens/themes.css

@@ -0,0 +1,1068 @@
+/* Fonts held to SYSTEM DEFAULTS (no custom/Google fonts) to keep font out of the
+   visual-channel comparison; archetypes are distinguished by color/shape/space/
+   density/weight, not typeface. Editorial keeps a SYSTEM serif (ui-serif) — still a
+   default font — as the one meaningful serif/sans design axis. */
+/* Flagship design-system token themes — generated from the token workshop
+   (5 archetypes; critique-fixed for WCAG AA + distinctiveness). Do not hand-edit;
+   regenerate. Each component consumes ONLY these variables (substrate stays fixed). */
+
+
+/* ===== precision — Structure is carried by single 1px hairline borders and tabular-lining numerals rather tha */
+[data-flagship="precision"] {
+  --bg: #ffffff;
+  --surface: #f8f9fa;
+  --surface-2: #f1f2f4;
+  --fg: #0d0e10;
+  --fg-muted: #585e68;
+  --fg-subtle: #767C86;
+  --border: #e7e9ec;
+  --border-strong: #d2d5da;
+  --accent: #5B4BD6;
+  --accent-fg: #ffffff;
+  --accent-weak: #EDEBFB;
+  --ring: rgba(91,75,214,0.40);
+  --success: #1a7f37;
+  --warning: #9a6700;
+  --danger: #cf222e;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --text-base: 13px;
+  --scale-ratio: 1.2;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-bold: 600;
+  --weight-display: 600;
+  --leading: 1.5;
+  --tracking-tight: -0.011em;
+  --radius-sm: 4px;
+  --radius: 8px;
+  --radius-lg: 10px;
+  --radius-full: 9999px;
+  --shadow-sm: 0 1px 2px rgba(16,18,20,0.06);
+  --shadow: 0 4px 12px rgba(16,18,20,0.08);
+  --shadow-lg: 0 12px 32px rgba(16,18,20,0.12);
+  --pad-tight: 6px;
+  --pad: 12px;
+  --pad-loose: 20px;
+  --gap: 8px;
+  --dur-fast: 120ms;
+  --dur: 180ms;
+  --ease: cubic-bezier(0.2, 0, 0, 1);
+  --ease-emphasis: cubic-bezier(0.3, 0.7, 0, 1);
+}
+[data-flagship="precision"][data-mode="dark"] {
+  --bg: #08090a;
+  --surface: #101114;
+  --surface-2: #17181c;
+  --fg: #f6f7f8;
+  --fg-muted: #9ba0a8;
+  --fg-subtle: #7E848D;
+  --border: #212327;
+  --border-strong: #303339;
+  --accent: #5e6ad2;
+  --accent-weak: #191b2e;
+  --ring: rgba(94,106,210,0.55);
+  --success: #3fb950;
+  --warning: #d29922;
+  --danger: #f85149;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.32);
+  --shadow: 0 4px 12px rgba(0,0,0,0.45);
+  --shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
+}
+
+/* ===== warm — Soft-optical Fraunces serif headings sitting warmly above rounded Plus Jakarta Sans body,  */
+[data-flagship="warm"] {
+  --bg: #FDF8F4;
+  --surface: #FFFFFF;
+  --surface-2: #FBF2EB;
+  --fg: #2E2723;
+  --fg-muted: #6E635B;
+  --fg-subtle: #7E7268;
+  --border: #EEE3DA;
+  --border-strong: #DFD0C4;
+  --accent: #C24A28;
+  --accent-fg: #FFFFFF;
+  --accent-weak: #FBE7DE;
+  --ring: #EE9679;
+  --success: #1F8A59;
+  --warning: #955F0F;
+  --danger: #C93E30;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --text-base: 15px;
+  --scale-ratio: 1.2;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-bold: 700;
+  --weight-display: 600;
+  --leading: 1.6;
+  --tracking-tight: -0.01em;
+  --radius-sm: 8px;
+  --radius: 12px;
+  --radius-lg: 20px;
+  --radius-full: 999px;
+  --shadow-sm: 0 1px 2px rgba(74, 48, 32, 0.06);
+  --shadow: 0 4px 16px rgba(74, 48, 32, 0.10);
+  --shadow-lg: 0 14px 36px rgba(74, 48, 32, 0.14);
+  --pad-tight: 10px;
+  --pad: 16px;
+  --pad-loose: 24px;
+  --gap: 16px;
+  --dur-fast: 140ms;
+  --dur: 220ms;
+  --ease: cubic-bezier(0.32, 0.72, 0, 1);
+  --ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+[data-flagship="warm"][data-mode="dark"] {
+  --bg: #1C1613;
+  --surface: #26201A;
+  --surface-2: #322A22;
+  --fg: #F5EDE6;
+  --fg-muted: #C0B2A7;
+  --fg-subtle: #8E8177;
+  --border: #3A302A;
+  --border-strong: #4F4239;
+  --accent: #F0805E;
+  --accent-fg: #2A1710;
+  --accent-weak: #3B251B;
+  --ring: #F0805E;
+  --success: #4FBE8A;
+  --warning: #F0AE4E;
+  --danger: #EF6A5A;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
+  --shadow: 0 4px 16px rgba(0, 0, 0, 0.40);
+  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.50);
+}
+
+/* ===== editorial — Every division on the page is a 1px hairline rule (true-black in light, warm-white in dark */
+[data-flagship="editorial"] {
+  --bg: #FFFFFF;
+  --surface: #FFFFFF;
+  --surface-2: #F4F2EF;
+  --fg: #0A0A0A;
+  --fg-muted: #55524C;
+  --fg-subtle: #6F6A63;
+  --border: #E4E1DB;
+  --border-strong: #1C1C1C;
+  --accent: #7A1F2B;
+  --accent-fg: #FFFFFF;
+  --accent-weak: #F6E9E7;
+  --ring: #7A1F2B;
+  --success: #2E5D3A;
+  --warning: #8A5A12;
+  --danger: #9B2226;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: ui-serif, Georgia, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --text-base: 17px;
+  --scale-ratio: 1.333;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-bold: 600;
+  --weight-display: 400;
+  --leading: 1.55;
+  --tracking-tight: -0.02em;
+  --radius-sm: 0px;
+  --radius: 1px;
+  --radius-lg: 2px;
+  --radius-full: 9999px;
+  --shadow-sm: 0 0 0 1px rgba(10,10,10,0.05);
+  --shadow: 0 1px 0 0 rgba(10,10,10,0.06), 0 0 0 1px rgba(10,10,10,0.04);
+  --shadow-lg: 0 24px 48px -24px rgba(10,10,10,0.20);
+  --pad-tight: 10px;
+  --pad: 20px;
+  --pad-loose: 40px;
+  --gap: 28px;
+  --dur-fast: 180ms;
+  --dur: 320ms;
+  --ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-emphasis: cubic-bezier(0.65, 0, 0.35, 1);
+}
+[data-flagship="editorial"][data-mode="dark"] {
+  --bg: #0A0A0A;
+  --surface: #141414;
+  --surface-2: #1C1B19;
+  --fg: #F5F3EF;
+  --fg-muted: #B0ABA2;
+  --fg-subtle: #85807A;
+  --border: #2A2A2A;
+  --border-strong: #EDEAE4;
+  --accent: #A62D3B;
+  --accent-weak: #2A1518;
+  --ring: #C25A67;
+  --success: #6FB07E;
+  --warning: #D9A441;
+  --danger: #E06B6E;
+  --shadow-sm: 0 0 0 1px rgba(255,255,255,0.06);
+  --shadow: 0 1px 0 0 rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
+  --shadow-lg: 0 24px 48px -24px rgba(0,0,0,0.70);
+}
+
+/* ===== enterprise — A solid 2px accent-colored focus ring drawn tight to near-square 4px corners — every contr */
+[data-flagship="enterprise"] {
+  --bg: #f4f4f4;
+  --surface: #ffffff;
+  --surface-2: #e8e8e8;
+  --fg: #161616;
+  --fg-muted: #525252;
+  --fg-subtle: #636363;
+  --border: #e0e0e0;
+  --border-strong: #8d8d8d;
+  --accent: #0f62fe;
+  --accent-fg: #ffffff;
+  --accent-weak: #d0e2ff;
+  --ring: #0f62fe;
+  --success: #147A33;
+  --warning: #8A6100;
+  --danger: #da1e28;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --text-base: 14px;
+  --scale-ratio: 1.2;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-bold: 600;
+  --weight-display: 600;
+  --leading: 1.45;
+  --tracking-tight: -0.01em;
+  --radius-sm: 2px;
+  --radius: 4px;
+  --radius-lg: 8px;
+  --radius-full: 9999px;
+  --shadow-sm: 0 1px 2px rgba(22,22,22,0.10);
+  --shadow: 0 2px 6px rgba(22,22,22,0.16);
+  --shadow-lg: 0 8px 20px rgba(22,22,22,0.22);
+  --pad-tight: 8px;
+  --pad: 12px;
+  --pad-loose: 20px;
+  --gap: 16px;
+  --dur-fast: 100ms;
+  --dur: 150ms;
+  --ease: cubic-bezier(0.2, 0, 0.38, 0.9);
+  --ease-emphasis: cubic-bezier(0.4, 0.14, 0.3, 1);
+}
+[data-flagship="enterprise"][data-mode="dark"] {
+  --bg: #161616;
+  --surface: #262626;
+  --surface-2: #393939;
+  --fg: #f4f4f4;
+  --fg-muted: #c6c6c6;
+  --fg-subtle: #8d8d8d;
+  --border: #393939;
+  --border-strong: #6f6f6f;
+  --accent-weak: #002d9c;
+  --ring: #ffffff;
+  --success: #42be65;
+  --warning: #f1c21b;
+  --danger: #fa4d56;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
+  --shadow: 0 2px 6px rgba(0,0,0,0.44);
+  --shadow-lg: 0 8px 20px rgba(0,0,0,0.56);
+}
+
+/* ===== expressive — Every interactive surface floats on a hard, blur-free offset shadow — pure ink in light mo */
+[data-flagship="expressive"] {
+  --bg: #FBF6EF;
+  --surface: #FFFFFF;
+  --surface-2: #F3ECE0;
+  --fg: #17110D;
+  --fg-muted: #5C544B;
+  --fg-subtle: #6F675E;
+  --border: #1A130E;
+  --border-strong: #000000;
+  --accent: #FF2E88;
+  --accent-fg: #17110D;
+  --accent-weak: #FFD6EA;
+  --ring: #6D4BFF;
+  --success: #0E7A45;
+  --warning: #A65600;
+  --danger: #C2202A;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --text-base: 16px;
+  --scale-ratio: 1.25;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-bold: 700;
+  --weight-display: 800;
+  --leading: 1.5;
+  --tracking-tight: -0.03em;
+  --radius-sm: 4px;
+  --radius: 10px;
+  --radius-lg: 20px;
+  --radius-full: 999px;
+  --shadow-sm: 2px 2px 0 #17110D;
+  --shadow: 4px 4px 0 #17110D;
+  --shadow-lg: 8px 8px 0 #17110D;
+  --pad-tight: 8px;
+  --pad: 16px;
+  --pad-loose: 28px;
+  --gap: 16px;
+  --dur-fast: 120ms;
+  --dur: 240ms;
+  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-emphasis: cubic-bezier(0.68, -0.6, 0.32, 1.6);
+}
+[data-flagship="expressive"][data-mode="dark"] {
+  --bg: #14100C;
+  --surface: #1E1813;
+  --surface-2: #2A231C;
+  --fg: #FBF6EF;
+  --fg-muted: #C4B8A9;
+  --fg-subtle: #8E8375;
+  --border: #4A4038;
+  --border-strong: #FBF6EF;
+  --accent-weak: #3A1526;
+  --ring: #8B6DFF;
+  --success: #3ED686;
+  --warning: #FFB020;
+  --danger: #FF6166;
+  --shadow-sm: 2px 2px 0 #FF2E88;
+  --shadow: 4px 4px 0 #FF2E88;
+  --shadow-lg: 6px 6px 0 #FF2E88;
+}
+/* ============================================================
+   PREMIUM / ELEVATED themes (glass, aurora, dark-luxe, neumorph, bento, swiss).
+   Extended surface tokens: --surface-bg (page backdrop), --glass-bg/--glass-blur/
+   --glass-border (frosted panels), --glow, --gradient-accent, --elevation-inset.
+   Fonts held to system defaults; all critique-verified body text >= WCAG AA.
+   ============================================================ */
+/* --- glass : A frosted 72%-opaque panel floats on a calm three-stop aurora backdrop, sealed by a brig */
+[data-flagship="glass"] {
+  --bg: #eef1fb;
+  --surface: #ffffff;
+  --surface-2: #f5f7fe;
+  --fg: #191c2b;
+  --fg-muted: #4a5069;
+  --fg-subtle: #767c96;
+  --border: rgba(23,28,43,0.10);
+  --border-strong: rgba(23,28,43,0.20);
+  --accent: #5b6cff;
+  --accent-fg: #ffffff;
+  --accent-weak: #e6e9ff;
+  --ring: rgba(91,108,255,0.55);
+  --success: #1f9d6b;
+  --warning: #c77800;
+  --danger: #d64545;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --text-base: 16px;
+  --scale-ratio: 1.25;
+  --weight-normal: 400;
+  --weight-medium: 550;
+  --weight-bold: 680;
+  --weight-display: 720;
+  --leading: 1.55;
+  --tracking-tight: -0.02em;
+  --radius-sm: 10px;
+  --radius: 16px;
+  --radius-lg: 24px;
+  --radius-full: 999px;
+  --shadow-sm: 0 1px 2px rgba(20,24,50,0.06), 0 1px 1px rgba(20,24,50,0.04);
+  --shadow: 0 8px 24px rgba(20,24,50,0.12), 0 2px 6px rgba(20,24,50,0.08);
+  --shadow-lg: 0 24px 60px rgba(20,24,50,0.20), 0 8px 20px rgba(20,24,50,0.12);
+  --pad-tight: 10px;
+  --pad: 18px;
+  --pad-loose: 28px;
+  --gap: 14px;
+  --dur-fast: 130ms;
+  --dur: 220ms;
+  --ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-emphasis: cubic-bezier(0.2, 0.9, 0.25, 1);
+  --surface-bg: radial-gradient(100% 120% at 82% -12%, #d7e2ff 0%, rgba(215,226,255,0) 55%), radial-gradient(95% 115% at 0% 105%, #ffe0ec 0%, rgba(255,224,236,0) 52%), linear-gradient(158deg, #eef1fb 0%, #f3eefb 60%, #eaf1ff 100%);
+  --glass-bg: rgba(255,255,255,0.72);
+  --glass-blur: blur(22px) saturate(1.5);
+  --glass-border: rgba(255,255,255,0.85);
+  --glow: 0 0 0 4px rgba(91,108,255,0.18), 0 8px 30px rgba(91,108,255,0.28);
+  --gradient-accent: linear-gradient(135deg, #6b7bff 0%, #8a5bff 55%, #b25bff 100%);
+  --elevation-inset: inset 0 1px 0 rgba(255,255,255,0.9);
+}
+[data-flagship="glass"][data-mode="dark"] {
+  --bg: #0c0d16;
+  --surface: #171826;
+  --surface-2: #1e2032;
+  --fg: #f0f1f7;
+  --fg-muted: #b3b7c9;
+  --fg-subtle: #868ba3;
+  --border: rgba(255,255,255,0.12);
+  --border-strong: rgba(255,255,255,0.22);
+  --accent: #8b9bff;
+  --accent-fg: #0c0d16;
+  --accent-weak: rgba(139,155,255,0.16);
+  --ring: rgba(139,155,255,0.60);
+  --success: #43c98d;
+  --warning: #e0a23b;
+  --danger: #ff6b6b;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.50);
+  --shadow: 0 10px 30px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.40);
+  --shadow-lg: 0 30px 70px rgba(0,0,0,0.65), 0 10px 24px rgba(0,0,0,0.50);
+  --surface-bg: radial-gradient(100% 120% at 82% -12%, #24203f 0%, rgba(36,32,63,0) 55%), radial-gradient(95% 115% at 0% 105%, #10233f 0%, rgba(16,35,63,0) 50%), linear-gradient(158deg, #0b0c15 0%, #12101f 60%, #0d1420 100%);
+  --glass-bg: rgba(255,255,255,0.07);
+  --glass-blur: blur(24px) saturate(1.4);
+  --glass-border: rgba(255,255,255,0.14);
+  --glow: 0 0 0 4px rgba(139,155,255,0.22), 0 10px 40px rgba(139,155,255,0.35);
+  --gradient-accent: linear-gradient(135deg, #7d8bff 0%, #9a6bff 55%, #c06bff 100%);
+  --elevation-inset: inset 0 1px 0 rgba(255,255,255,0.16);
+}
+
+/* --- aurora : A living three-hue gradient-mesh backdrop (indigo, cyan, violet blobs) sits behind mostl */
+[data-flagship="aurora"] {
+  --bg: #E9ECF8;
+  --surface: #FBFCFE;
+  --surface-2: #F2F4FC;
+  --fg: #0F1729;
+  --fg-muted: #4A5578;
+  --fg-subtle: #78829D;
+  --border: rgba(15,23,41,0.10);
+  --border-strong: rgba(15,23,41,0.18);
+  --accent: #6D5EF6;
+  --accent-fg: #FFFFFF;
+  --accent-weak: #ECEBFE;
+  --ring: rgba(109,94,246,0.45);
+  --success: #0E9C86;
+  --warning: #B8760C;
+  --danger: #D93A40;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --text-base: 16px;
+  --scale-ratio: 1.25;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-bold: 680;
+  --weight-display: 620;
+  --leading: 1.55;
+  --tracking-tight: -0.02em;
+  --radius-sm: 8px;
+  --radius: 14px;
+  --radius-lg: 24px;
+  --radius-full: 999px;
+  --shadow-sm: 0 1px 2px rgba(23,27,70,0.06), 0 1px 1px rgba(23,27,70,0.04);
+  --shadow: 0 8px 24px -6px rgba(30,27,90,0.14), 0 2px 6px -2px rgba(30,27,90,0.08);
+  --shadow-lg: 0 32px 64px -16px rgba(30,27,90,0.26), 0 8px 24px -8px rgba(30,27,90,0.16);
+  --pad-tight: 10px;
+  --pad: 16px;
+  --pad-loose: 24px;
+  --gap: 12px;
+  --dur-fast: 140;
+  --dur: 250;
+  --ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
+  --surface-bg: radial-gradient(120% 120% at 12% 8%, #DCE4FF 0%, rgba(220,228,255,0) 42%), radial-gradient(100% 100% at 88% 12%, #CFF6F3 0%, rgba(207,246,243,0) 40%), radial-gradient(120% 120% at 70% 96%, #E7DBFF 0%, rgba(231,219,255,0) 46%), linear-gradient(180deg, #F4F6FE 0%, #EDF0FB 100%);
+  --glass-bg: rgba(255,255,255,0.72);
+  --glass-blur: blur(20px) saturate(1.6);
+  --glass-border: rgba(255,255,255,0.85);
+  --glow: 0 0 0 1px rgba(109,94,246,0.35), 0 0 28px rgba(109,94,246,0.35);
+  --gradient-accent: linear-gradient(120deg, #6D5EF6 0%, #4F8DF9 50%, #22D3EE 100%);
+  --elevation-inset: none;
+}
+[data-flagship="aurora"][data-mode="dark"] {
+  --bg: #080B18;
+  --surface: #121628;
+  --surface-2: #1A1F35;
+  --fg: #EAF0FF;
+  --fg-muted: #A6B0D0;
+  --fg-subtle: #6E789C;
+  --border: rgba(255,255,255,0.10);
+  --border-strong: rgba(255,255,255,0.18);
+  --accent-weak: rgba(124,116,255,0.16);
+  --ring: rgba(139,131,255,0.55);
+  --success: #3DD68C;
+  --warning: #F5C147;
+  --danger: #FF6369;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
+  --shadow: 0 8px 28px -6px rgba(0,0,0,0.55), 0 2px 8px -2px rgba(0,0,0,0.40);
+  --shadow-lg: 0 36px 72px -16px rgba(0,0,0,0.70), 0 10px 30px -10px rgba(0,0,0,0.50);
+  --surface-bg: radial-gradient(120% 120% at 10% 6%, #1E2A66 0%, rgba(30,42,102,0) 44%), radial-gradient(100% 100% at 90% 10%, #0E4D57 0%, rgba(14,77,87,0) 42%), radial-gradient(120% 120% at 72% 98%, #2B1E68 0%, rgba(43,30,104,0) 46%), linear-gradient(180deg, #0A0E1F 0%, #070A16 100%);
+  --glass-bg: rgba(22,27,48,0.62);
+  --glass-blur: blur(22px) saturate(1.5);
+  --glass-border: rgba(255,255,255,0.12);
+  --glow: 0 0 0 1px rgba(139,131,255,0.40), 0 0 32px rgba(109,94,246,0.50);
+  --gradient-accent: linear-gradient(120deg, #7C74FF 0%, #5B8DF9 50%, #34D8EE 100%);
+}
+
+/* --- darkluxe : A single electric-cyan accent that stays inert as a hairline until focus or hover, when  */
+[data-flagship="darkluxe"] {
+  --bg: #EDEFF3;
+  --surface: #FFFFFF;
+  --surface-2: #F6F7FA;
+  --fg: #14161C;
+  --fg-muted: #565C6B;
+  --fg-subtle: #8A909E;
+  --border: #E3E6EC;
+  --border-strong: #CCD1DB;
+  --accent: #0AB3A9;
+  --accent-fg: #032B27;
+  --accent-weak: rgba(10,179,169,0.12);
+  --ring: rgba(10,179,169,0.45);
+  --success: #0E9F6E;
+  --warning: #C77700;
+  --danger: #D64545;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --text-base: 15px;
+  --scale-ratio: 1.25;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-bold: 600;
+  --weight-display: 640;
+  --leading: 1.55;
+  --tracking-tight: -0.02em;
+  --radius-sm: 6px;
+  --radius: 10px;
+  --radius-lg: 16px;
+  --radius-full: 999px;
+  --shadow-sm: 0 1px 2px rgba(16,20,30,0.06);
+  --shadow: 0 6px 20px rgba(16,20,30,0.10);
+  --shadow-lg: 0 24px 60px rgba(16,20,30,0.16);
+  --pad-tight: 8px;
+  --pad: 14px;
+  --pad-loose: 22px;
+  --gap: 12px;
+  --dur-fast: 120ms;
+  --dur: 180ms;
+  --ease: cubic-bezier(0.2,0,0,1);
+  --ease-emphasis: cubic-bezier(0.22,1,0.36,1);
+  --surface-bg: radial-gradient(120% 90% at 15% 0%, #FFFFFF 0%, #EEF1F5 55%, #E7EBF1 100%);
+  --glass-bg: rgba(255,255,255,0.72);
+  --glass-blur: blur(18px) saturate(1.4);
+  --glass-border: rgba(255,255,255,0.9);
+  --glow: 0 0 20px rgba(10,179,169,0.35);
+  --gradient-accent: linear-gradient(135deg, #14C9BE 0%, #0E8FD0 100%);
+  --elevation-inset: inset 0 1px 0 rgba(255,255,255,0.65);
+}
+[data-flagship="darkluxe"][data-mode="dark"] {
+  --bg: #08090C;
+  --surface: #0E1014;
+  --surface-2: #16181F;
+  --fg: #ECEDF1;
+  --fg-muted: #A2A7B4;
+  --fg-subtle: #6B7180;
+  --border: #212530;
+  --border-strong: #343A48;
+  --accent: #3DE4E0;
+  --accent-fg: #04120F;
+  --accent-weak: rgba(61,228,224,0.12);
+  --ring: rgba(61,228,224,0.55);
+  --success: #4ADE80;
+  --warning: #FBBF24;
+  --danger: #FB6E6E;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
+  --shadow: 0 4px 16px rgba(0,0,0,0.50);
+  --shadow-lg: 0 24px 60px rgba(0,0,0,0.62);
+  --surface-bg: radial-gradient(130% 100% at 12% -5%, #12151C 0%, #0B0D12 55%, #08090C 100%);
+  --glass-bg: rgba(20,23,30,0.72);
+  --glass-blur: blur(20px) saturate(1.3);
+  --glass-border: rgba(255,255,255,0.08);
+  --glow: 0 0 24px rgba(61,228,224,0.45);
+  --gradient-accent: linear-gradient(135deg, #3DE4E0 0%, #2AA8F0 100%);
+  --elevation-inset: inset 0 1px 0 rgba(255,255,255,0.05);
+}
+
+/* --- neumorph : Every control is the same porcelain color as the page and is defined purely by a dual-sh */
+[data-flagship="neumorph"] {
+  --bg: #e4e8ef;
+  --surface: #e4e8ef;
+  --surface-2: #eaeef4;
+  --fg: #2b3140;
+  --fg-muted: #5a6478;
+  --fg-subtle: #8b95a8;
+  --border: #c9d0dc;
+  --border-strong: #a9b4c6;
+  --accent: #4f5bd5;
+  --accent-fg: #ffffff;
+  --accent-weak: #dfe2f7;
+  --ring: #4f5bd5;
+  --success: #1f8f5f;
+  --warning: #a9741a;
+  --danger: #c23a52;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --text-base: 16px;
+  --scale-ratio: 1.25;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-bold: 700;
+  --weight-display: 600;
+  --leading: 1.6;
+  --tracking-tight: -0.02em;
+  --radius-sm: 10px;
+  --radius: 18px;
+  --radius-lg: 28px;
+  --radius-full: 999px;
+  --shadow-sm: 3px 3px 6px #c4ccd8, -3px -3px 6px #ffffff;
+  --shadow: 6px 6px 14px #bcc4d4, -6px -6px 14px #ffffff;
+  --shadow-lg: 14px 14px 30px #b3bccb, -12px -12px 26px #ffffff;
+  --pad-tight: 10px;
+  --pad: 18px;
+  --pad-loose: 28px;
+  --gap: 16px;
+  --dur-fast: 140ms;
+  --dur: 240ms;
+  --ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-emphasis: cubic-bezier(0.34, 1.4, 0.64, 1);
+  --surface-bg: radial-gradient(circle at 30% 18%, #eef1f6 0%, #e4e8ef 58%, #dbe1ea 100%);
+  --glass-bg: #e4e8ef;
+  --glass-blur: none;
+  --glass-border: rgba(255, 255, 255, 0.9);
+  --glow: 0 0 24px rgba(79, 91, 213, 0.42);
+  --gradient-accent: linear-gradient(135deg, #5b67ef 0%, #4f5bd5 100%);
+  --elevation-inset: inset 3px 3px 6px #bcc4d4, inset -3px -3px 6px #ffffff;
+}
+[data-flagship="neumorph"][data-mode="dark"] {
+  --bg: #23272e;
+  --surface: #23272e;
+  --surface-2: #272c34;
+  --fg: #e6e9f0;
+  --fg-muted: #9aa4b8;
+  --fg-subtle: #6c7686;
+  --border: #30353f;
+  --border-strong: #40464f;
+  --accent: #6d79ef;
+  --accent-fg: #161922;
+  --accent-weak: #2b2f4a;
+  --ring: #8b95f7;
+  --success: #46c98d;
+  --warning: #e0a83a;
+  --danger: #ef6079;
+  --shadow-sm: 3px 3px 7px #191c22, -3px -3px 7px #2d323b;
+  --shadow: 6px 6px 16px #171a1f, -6px -6px 16px #2f343d;
+  --shadow-lg: 14px 14px 32px #141619, -12px -12px 26px #313742;
+  --surface-bg: radial-gradient(circle at 30% 18%, #272c34 0%, #23272e 58%, #1d2026 100%);
+  --glass-bg: #23272e;
+  --glass-border: rgba(255, 255, 255, 0.06);
+  --glow: 0 0 28px rgba(123, 134, 245, 0.5);
+  --gradient-accent: linear-gradient(135deg, #7b86f5 0%, #6d79ef 100%);
+  --elevation-inset: inset 3px 3px 7px #171a1f, inset -3px -3px 7px #2f343d;
+}
+
+/* --- bento : Crisp white (dark: graphite) tiles float on a softly radial-tinted page backdrop with la */
+[data-flagship="bento"] {
+  --bg: #eef1f6;
+  --surface: #ffffff;
+  --surface-2: #f6f8fb;
+  --fg: #0f1216;
+  --fg-muted: #565f6b;
+  --fg-subtle: #8b94a1;
+  --border: #e6e9ee;
+  --border-strong: #d3d8e0;
+  --accent: #2563eb;
+  --accent-fg: #ffffff;
+  --accent-weak: #e8eeff;
+  --ring: rgba(37,99,235,0.35);
+  --success: #0f7a52;
+  --warning: #b45309;
+  --danger: #dc2626;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --text-base: 15px;
+  --scale-ratio: 1.25;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-bold: 600;
+  --weight-display: 700;
+  --leading: 1.55;
+  --tracking-tight: -0.02em;
+  --radius-sm: 10px;
+  --radius: 16px;
+  --radius-lg: 24px;
+  --radius-full: 9999px;
+  --shadow-sm: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.06);
+  --shadow: 0 4px 12px rgba(16,24,40,0.06), 0 12px 28px rgba(16,24,40,0.08);
+  --shadow-lg: 0 8px 24px rgba(16,24,40,0.08), 0 24px 56px rgba(16,24,40,0.12);
+  --pad-tight: 12px;
+  --pad: 20px;
+  --pad-loose: 32px;
+  --gap: 16px;
+  --dur-fast: 140ms;
+  --dur: 240ms;
+  --ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --surface-bg: radial-gradient(120% 120% at 50% 0%, #ffffff 0%, #eef1f6 55%, #e7ebf2 100%);
+  --glass-bg: rgba(255,255,255,0.72);
+  --glass-blur: blur(20px) saturate(1.3);
+  --glass-border: rgba(255,255,255,0.85);
+  --glow: 0 0 0 4px rgba(37,99,235,0.12), 0 8px 24px rgba(37,99,235,0.18);
+  --gradient-accent: linear-gradient(135deg, #2f6bff 0%, #2563eb 55%, #1e4fd0 100%);
+  --elevation-inset: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 2px 4px rgba(16,24,40,0.04);
+}
+[data-flagship="bento"][data-mode="dark"] {
+  --bg: #0b0d10;
+  --surface: #16191e;
+  --surface-2: #1e2229;
+  --fg: #f4f6f8;
+  --fg-muted: #a2abb8;
+  --fg-subtle: #6b7480;
+  --border: #262b32;
+  --border-strong: #363c45;
+  --accent: #3b6bf0;
+  --accent-weak: #1a2340;
+  --ring: rgba(59,107,240,0.5);
+  --success: #34d399;
+  --warning: #fbbf24;
+  --danger: #f87171;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
+  --shadow: 0 4px 16px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4);
+  --shadow-lg: 0 12px 40px rgba(0,0,0,0.6), 0 8px 20px rgba(0,0,0,0.45);
+  --surface-bg: radial-gradient(120% 120% at 50% 0%, #14181f 0%, #0b0d10 55%, #070809 100%);
+  --glass-bg: rgba(24,28,34,0.66);
+  --glass-blur: blur(24px) saturate(1.4);
+  --glass-border: rgba(255,255,255,0.08);
+  --glow: 0 0 0 4px rgba(59,107,240,0.22), 0 8px 28px rgba(59,107,240,0.32);
+  --gradient-accent: linear-gradient(135deg, #3a63ea 0%, #3b6bf0 50%, #2f56d8 100%);
+  --elevation-inset: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 0 0 1px rgba(255,255,255,0.02);
+}
+
+/* --- swiss : A faint hairline column grid is printed into the page backdrop and shows through an ~85% */
+[data-flagship="swiss"] {
+  --bg: #FFFFFF;
+  --surface: #FFFFFF;
+  --surface-2: #F5F4F1;
+  --fg: #0A0A0A;
+  --fg-muted: #4A4A48;
+  --fg-subtle: #7A7A76;
+  --border: #E2E1DD;
+  --border-strong: #0A0A0A;
+  --accent: #E4002B;
+  --accent-fg: #FFFFFF;
+  --accent-weak: #FCE6EA;
+  --ring: #E4002B;
+  --success: #0F7B3B;
+  --warning: #B45309;
+  --danger: #C20016;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --text-base: 16px;
+  --scale-ratio: 1.2;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-bold: 700;
+  --weight-display: 700;
+  --leading: 1.45;
+  --tracking-tight: -0.02em;
+  --radius-sm: 0px;
+  --radius: 0px;
+  --radius-lg: 2px;
+  --radius-full: 9999px;
+  --shadow-sm: 0 0 0 1px rgba(10,10,10,0.08);
+  --shadow: 0 1px 0 0 rgba(10,10,10,0.12);
+  --shadow-lg: 8px 8px 0 0 rgba(10,10,10,1);
+  --pad-tight: 8px;
+  --pad: 16px;
+  --pad-loose: 32px;
+  --gap: 24px;
+  --dur-fast: 120ms;
+  --dur: 200ms;
+  --ease: cubic-bezier(0.2, 0, 0, 1);
+  --ease-emphasis: cubic-bezier(0.7, 0, 0.2, 1);
+  --surface-bg: repeating-linear-gradient(90deg, #EDECE8 0 1px, transparent 1px 64px), linear-gradient(180deg, #F6F5F2 0%, #EFEEEA 100%);
+  --glass-bg: color-mix(in srgb, #FFFFFF 88%, transparent);
+  --glass-blur: blur(8px) saturate(1.05);
+  --glass-border: rgba(255,255,255,0.8);
+  --glow: 0 0 0 3px rgba(228,0,43,0.30), 0 0 20px rgba(228,0,43,0.18);
+  --gradient-accent: linear-gradient(180deg, #E8102E 0%, #E4002B 50%, #C7001F 100%);
+  --elevation-inset: inset 0 1px 0 0 rgba(10,10,10,0.10);
+}
+[data-flagship="swiss"][data-mode="dark"] {
+  --bg: #0A0A0A;
+  --surface: #111110;
+  --surface-2: #171715;
+  --fg: #F5F4F1;
+  --fg-muted: #A6A5A0;
+  --fg-subtle: #6E6D68;
+  --border: #262624;
+  --border-strong: #F5F4F1;
+  --accent: #FF333F;
+  --accent-fg: #0A0A0A;
+  --accent-weak: #2A0D12;
+  --ring: #FF333F;
+  --success: #2FB463;
+  --warning: #E0A63A;
+  --danger: #FF4D4D;
+  --shadow-sm: 0 0 0 1px rgba(255,255,255,0.10);
+  --shadow: 0 1px 0 0 rgba(255,255,255,0.14);
+  --shadow-lg: 8px 8px 0 0 rgba(255,51,63,0.9);
+  --surface-bg: repeating-linear-gradient(90deg, #1A1A18 0 1px, transparent 1px 64px), radial-gradient(120% 120% at 50% 0%, #141412 0%, #0A0A0A 100%);
+  --glass-bg: color-mix(in srgb, #131311 82%, transparent);
+  --glass-blur: blur(10px) saturate(1.1);
+  --glass-border: rgba(255,255,255,0.08);
+  --glow: 0 0 0 3px rgba(255,51,63,0.35), 0 0 24px rgba(255,51,63,0.22);
+  --gradient-accent: linear-gradient(180deg, #FF4351 0%, #FF333F 55%, #E0202D 100%);
+  --elevation-inset: inset 0 1px 0 0 rgba(255,255,255,0.06);
+}
+
+/* ============================================================
+   TEMPLATE-PLATFORM styles (learned from Wix / Canva / Figma template
+   vocabularies, 2026): collage (Canva scrapbook), retro (70s revival),
+   pastelpop (playful presentation), boutique (Wix luxury/hotel),
+   organic (Wix wellness/restaurant). System fonts; body text AA.
+   ============================================================ */
+
+/* --- collage : Canva scrapbook — paper cream, sticker chips, marker-pink accent, hard paper shadows */
+[data-flagship="collage"] {
+  --bg: #FAF3E9; --surface: #FFFFFF; --surface-2: #FFF8EE;
+  --fg: #33302B; --fg-muted: #6B6459; --fg-subtle: #8C8577;
+  --border: #E8DCC9; --border-strong: #33302B;
+  --accent: #D6336C; --accent-fg: #FFFFFF; --accent-weak: #FBE3EC;
+  --ring: rgba(214,51,108,0.45);
+  --success: #2F7D4F; --warning: #9A6700; --danger: #C13B2E;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --text-base: 15px; --scale-ratio: 1.25;
+  --weight-normal: 400; --weight-medium: 600; --weight-bold: 700; --weight-display: 800;
+  --leading: 1.55; --tracking-tight: -0.005em;
+  --radius-sm: 10px; --radius: 14px; --radius-lg: 18px; --radius-full: 999px;
+  --shadow-sm: 1px 2px 0 rgba(51,48,43,0.14);
+  --shadow: 2px 3px 0 rgba(51,48,43,0.16);
+  --shadow-lg: 4px 6px 0 rgba(51,48,43,0.18);
+  --pad-tight: 10px; --pad: 16px; --pad-loose: 22px; --gap: 12px;
+  --dur-fast: 140ms; --dur: 220ms;
+  --ease: cubic-bezier(0.3, 0.9, 0.4, 1); --ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --surface-bg: linear-gradient(180deg, #FAF3E9 0%, #F7EDDF 100%);
+  --glass-bg: #FFFFFF; --glass-blur: none; --glass-border: #E8DCC9;
+  --glow: none; --gradient-accent: linear-gradient(120deg, #D6336C 0%, #E8590C 100%);
+  --elevation-inset: none;
+}
+[data-flagship="collage"][data-mode="dark"] {
+  --bg: #221E19; --surface: #2C2721; --surface-2: #35302A;
+  --fg: #F4EDE2; --fg-muted: #BDB3A4; --fg-subtle: #918778;
+  --border: #453E35; --border-strong: #F4EDE2;
+  --accent: #F06595; --accent-fg: #2A1219; --accent-weak: #3D2530;
+  --ring: rgba(240,101,149,0.55);
+  --success: #69B98A; --warning: #D9A33C; --danger: #E8705F;
+  --shadow-sm: 1px 2px 0 rgba(0,0,0,0.45); --shadow: 2px 3px 0 rgba(0,0,0,0.5);
+  --shadow-lg: 4px 6px 0 rgba(0,0,0,0.55);
+  --surface-bg: linear-gradient(180deg, #221E19 0%, #1C1813 100%);
+  --glass-bg: #2C2721; --glass-border: #453E35;
+  --gradient-accent: linear-gradient(120deg, #F06595 0%, #F0875E 100%);
+}
+
+/* --- retro : 70s revival — warm cream, burnt orange, chunky offset shadows, mustard/brown */
+[data-flagship="retro"] {
+  --bg: #F6EBDB; --surface: #FFF6E9; --surface-2: #F3E3CB;
+  --fg: #3B2F23; --fg-muted: #6E5C49; --fg-subtle: #8C7A64;
+  --border: #E0CDB2; --border-strong: #3B2F23;
+  --accent: #B54A16; --accent-fg: #FFF6E9; --accent-weak: #F6DCC8;
+  --ring: rgba(181,74,22,0.45);
+  --success: #4E7A3A; --warning: #8F5F0B; --danger: #A83C2C;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: ui-serif, Georgia, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --text-base: 15px; --scale-ratio: 1.3;
+  --weight-normal: 400; --weight-medium: 600; --weight-bold: 700; --weight-display: 800;
+  --leading: 1.55; --tracking-tight: 0em;
+  --radius-sm: 8px; --radius: 12px; --radius-lg: 22px; --radius-full: 999px;
+  --shadow-sm: 0 2px 0 #D9B98F; --shadow: 0 3px 0 #D9B98F; --shadow-lg: 0 5px 0 #CBA878;
+  --pad-tight: 10px; --pad: 16px; --pad-loose: 24px; --gap: 13px;
+  --dur-fast: 150ms; --dur: 240ms;
+  --ease: cubic-bezier(0.33, 1, 0.68, 1); --ease-emphasis: cubic-bezier(0.34, 1.4, 0.64, 1);
+  --surface-bg: linear-gradient(180deg, #F6EBDB 0%, #F1E1CB 100%);
+  --glass-bg: #FFF6E9; --glass-blur: none; --glass-border: #E0CDB2;
+  --glow: none; --gradient-accent: linear-gradient(120deg, #B54A16 0%, #C98A1B 100%);
+  --elevation-inset: none;
+}
+[data-flagship="retro"][data-mode="dark"] {
+  --bg: #241B12; --surface: #2E2318; --surface-2: #382B1D;
+  --fg: #F3E7D3; --fg-muted: #C4B097; --fg-subtle: #97846B;
+  --border: #4A3A27; --border-strong: #F3E7D3;
+  --accent: #E07B3C; --accent-fg: #241B12; --accent-weak: #453022;
+  --ring: rgba(224,123,60,0.55);
+  --success: #8FBB6E; --warning: #D9A33C; --danger: #E0684F;
+  --shadow-sm: 0 2px 0 #120D07; --shadow: 0 3px 0 #120D07; --shadow-lg: 0 5px 0 #0C0804;
+  --surface-bg: linear-gradient(180deg, #241B12 0%, #1D150D 100%);
+  --glass-bg: #2E2318; --glass-border: #4A3A27;
+  --gradient-accent: linear-gradient(120deg, #E07B3C 0%, #D9A33C 100%);
+}
+
+/* --- pastelpop : playful presentation — lilac tint, candy violet, big radius, soft candy shadows */
+[data-flagship="pastelpop"] {
+  --bg: #F4F1FB; --surface: #FFFFFF; --surface-2: #F8F5FE;
+  --fg: #2B2640; --fg-muted: #5D5578; --fg-subtle: #837BA0;
+  --border: #E5DFF5; --border-strong: #CFC5EC;
+  --accent: #6D4AEF; --accent-fg: #FFFFFF; --accent-weak: #EAE3FE;
+  --ring: rgba(109,74,239,0.45);
+  --success: #178A5B; --warning: #96640A; --danger: #D02F55;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --text-base: 15px; --scale-ratio: 1.22;
+  --weight-normal: 400; --weight-medium: 600; --weight-bold: 700; --weight-display: 800;
+  --leading: 1.6; --tracking-tight: -0.01em;
+  --radius-sm: 12px; --radius: 16px; --radius-lg: 24px; --radius-full: 999px;
+  --shadow-sm: 0 2px 8px rgba(109,74,239,0.08);
+  --shadow: 0 6px 16px rgba(109,74,239,0.12);
+  --shadow-lg: 0 14px 34px rgba(109,74,239,0.16);
+  --pad-tight: 10px; --pad: 16px; --pad-loose: 24px; --gap: 14px;
+  --dur-fast: 150ms; --dur: 230ms;
+  --ease: cubic-bezier(0.34, 1.2, 0.64, 1); --ease-emphasis: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --surface-bg: linear-gradient(160deg, #F6F2FD 0%, #F0EDFA 55%, #EFF5F8 100%);
+  --glass-bg: #FFFFFF; --glass-blur: none; --glass-border: #E5DFF5;
+  --glow: 0 0 0 4px rgba(109,74,239,0.12);
+  --gradient-accent: linear-gradient(120deg, #6D4AEF 0%, #B44AEF 60%, #EF4AA8 100%);
+  --elevation-inset: none;
+}
+[data-flagship="pastelpop"][data-mode="dark"] {
+  --bg: #1D1930; --surface: #272140; --surface-2: #2F2950;
+  --fg: #EFEBFB; --fg-muted: #B9B1D6; --fg-subtle: #8880AA;
+  --border: #3B3460; --border-strong: #4E4680;
+  --accent: #9B82FF; --accent-fg: #171226; --accent-weak: #322A58;
+  --ring: rgba(155,130,255,0.55);
+  --success: #5CC493; --warning: #D9A33C; --danger: #F06A8A;
+  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35); --shadow: 0 6px 16px rgba(0,0,0,0.4);
+  --shadow-lg: 0 14px 34px rgba(0,0,0,0.5);
+  --surface-bg: linear-gradient(160deg, #201A38 0%, #1B1730 55%, #172030 100%);
+  --glass-bg: #272140; --glass-border: #3B3460;
+  --glow: 0 0 0 4px rgba(155,130,255,0.2);
+  --gradient-accent: linear-gradient(120deg, #9B82FF 0%, #C87BFF 60%, #FF7BC1 100%);
+}
+
+/* --- boutique : Wix luxury/hotel — ivory + bronze, hairlines, near-zero radius, wide tracking */
+[data-flagship="boutique"] {
+  --bg: #F7F4EE; --surface: #FDFBF7; --surface-2: #F1ECE2;
+  --fg: #262117; --fg-muted: #5C5546; --fg-subtle: #7E7663;
+  --border: #DCD3C2; --border-strong: #262117;
+  --accent: #8A6D2F; --accent-fg: #FDFBF7; --accent-weak: #EFE7D3;
+  --ring: rgba(138,109,47,0.45);
+  --success: #3F7052; --warning: #8A6100; --danger: #A04236;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: ui-serif, Georgia, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --text-base: 14px; --scale-ratio: 1.32;
+  --weight-normal: 400; --weight-medium: 500; --weight-bold: 600; --weight-display: 500;
+  --leading: 1.62; --tracking-tight: 0.01em;
+  --radius-sm: 1px; --radius: 2px; --radius-lg: 3px; --radius-full: 999px;
+  --shadow-sm: none; --shadow: 0 1px 0 rgba(38,33,23,0.08); --shadow-lg: 0 10px 30px rgba(38,33,23,0.10);
+  --pad-tight: 12px; --pad: 18px; --pad-loose: 28px; --gap: 16px;
+  --dur-fast: 180ms; --dur: 300ms;
+  --ease: cubic-bezier(0.25, 0.8, 0.25, 1); --ease-emphasis: cubic-bezier(0.25, 0.9, 0.2, 1);
+  --surface-bg: #F7F4EE;
+  --glass-bg: #FDFBF7; --glass-blur: none; --glass-border: #DCD3C2;
+  --glow: none; --gradient-accent: linear-gradient(120deg, #8A6D2F 0%, #B08D45 100%);
+  --elevation-inset: none;
+}
+[data-flagship="boutique"][data-mode="dark"] {
+  --bg: #17150F; --surface: #1F1C14; --surface-2: #27231A;
+  --fg: #EFE9DC; --fg-muted: #BDB39D; --fg-subtle: #8D8570;
+  --border: #383223; --border-strong: #EFE9DC;
+  --accent: #C8A85C; --accent-fg: #17150F; --accent-weak: #332C1B;
+  --ring: rgba(200,168,92,0.5);
+  --success: #7FAF8E; --warning: #D9A33C; --danger: #CF6B58;
+  --shadow-sm: none; --shadow: 0 1px 0 rgba(0,0,0,0.5); --shadow-lg: 0 12px 34px rgba(0,0,0,0.6);
+  --surface-bg: #17150F;
+  --glass-bg: #1F1C14; --glass-border: #383223;
+  --gradient-accent: linear-gradient(120deg, #C8A85C 0%, #E0C88A 100%);
+}
+
+/* --- organic : Wix wellness/restaurant — stone + sage + terracotta, organic radius, natural shadow */
+[data-flagship="organic"] {
+  --bg: #F3F1EA; --surface: #FBFAF5; --surface-2: #EDEADF;
+  --fg: #2E332B; --fg-muted: #5C6355; --fg-subtle: #7E8574;
+  --border: #DEDACB; --border-strong: #A8A28D;
+  --accent: #4F7250; --accent-fg: #FBFAF5; --accent-weak: #E2EADF;
+  --ring: rgba(79,114,80,0.45);
+  --success: #3F7A4E; --warning: #96700F; --danger: #B65C3F;
+  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: ui-serif, Georgia, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  --text-base: 15px; --scale-ratio: 1.26;
+  --weight-normal: 400; --weight-medium: 500; --weight-bold: 650; --weight-display: 550;
+  --leading: 1.62; --tracking-tight: 0em;
+  --radius-sm: 12px; --radius: 18px; --radius-lg: 26px; --radius-full: 999px;
+  --shadow-sm: 0 1px 3px rgba(46,51,43,0.07);
+  --shadow: 0 6px 18px rgba(46,51,43,0.09);
+  --shadow-lg: 0 16px 40px rgba(46,51,43,0.12);
+  --pad-tight: 11px; --pad: 17px; --pad-loose: 26px; --gap: 14px;
+  --dur-fast: 170ms; --dur: 260ms;
+  --ease: cubic-bezier(0.3, 0.85, 0.3, 1); --ease-emphasis: cubic-bezier(0.3, 1.1, 0.3, 1);
+  --surface-bg: linear-gradient(180deg, #F3F1EA 0%, #EFECE2 100%);
+  --glass-bg: #FBFAF5; --glass-blur: none; --glass-border: #DEDACB;
+  --glow: none; --gradient-accent: linear-gradient(120deg, #4F7250 0%, #7C9A5E 100%);
+  --elevation-inset: none;
+}
+[data-flagship="organic"][data-mode="dark"] {
+  --bg: #1C1F1A; --surface: #252921; --surface-2: #2D3228;
+  --fg: #EDEEE6; --fg-muted: #B7BCA9; --fg-subtle: #878D7A;
+  --border: #3A4033; --border-strong: #EDEEE6;
+  --accent: #8FB98B; --accent-fg: #161913; --accent-weak: #2C3A2B;
+  --ring: rgba(143,185,139,0.5);
+  --success: #7FBF8E; --warning: #D9A33C; --danger: #D97B5B;
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow: 0 6px 18px rgba(0,0,0,0.45);
+  --shadow-lg: 0 16px 40px rgba(0,0,0,0.55);
+  --surface-bg: linear-gradient(180deg, #1C1F1A 0%, #171A15 100%);
+  --glass-bg: #252921; --glass-border: #3A4033;
+  --gradient-accent: linear-gradient(120deg, #8FB98B 0%, #B9CF8A 100%);
+}
+
+/* ============================================================
+   LAYOUT AXIS — structure as tokens, orthogonal to the style axis.
+   Style tokens answer "what does it look like"; these answer "how is it
+   arranged". Named by the product archetype each arrangement comes from,
+   because that is how the difference actually reaches a designer: a portfolio
+   and a dashboard disagree about density and measure far more than they
+   disagree about hue.
+
+   The discipline that makes this an experiment: DOM ORDER NEVER CHANGES. Only
+   box arrangement does (direction, width, column count, label placement,
+   density, whether decorative media renders). If the substrate is right, an
+   agent reading a linearised DOM should be indifferent to all of it — which is
+   a stronger claim than skin-invariance and is separately measurable.
+
+   --lay-dir      stack direction of the component's main sections
+   --lay-width    max inline size
+   --lay-cols     columns used by a repeating group (options, specs, fields)
+   --lay-label    label placement: block (above) | inline (beside)
+   --lay-density  multiplier on padding and gaps
+   --lay-media    block | none — decorative media
+   --lay-rule     hairline separators between sections: none | 1px
+   ============================================================ */
+
+/* card — the default product card / form panel most component libraries ship */
+[data-layout="card"] {
+  --lay-dir: column; --lay-width: 360px; --lay-cols: 3;
+  --lay-label: block; --lay-density: 1; --lay-media: block; --lay-rule: 0px;
+}
+
+/* dashboard — data-dense console tile: narrow, tight, no decoration, rules
+   between sections so scanning is by row */
+[data-layout="dashboard"] {
+  --lay-dir: column; --lay-width: 296px; --lay-cols: 2;
+  --lay-label: inline; --lay-density: 0.68; --lay-media: none; --lay-rule: 1px;
+}
+
+/* commerce — product-detail row: media beside the buy controls, wide measure,
+   the arrangement a complex storefront uses above the fold */
+[data-layout="commerce"] {
+  --lay-dir: row; --lay-width: 660px; --lay-cols: 3;
+  --lay-label: block; --lay-density: 1.05; --lay-media: block; --lay-rule: 0px;
+}
+
+/* saas — settings/console form: labels beside their controls, moderate width,
+   single column of options so each is a full-width row */
+[data-layout="saas"] {
+  --lay-dir: column; --lay-width: 520px; --lay-cols: 1;
+  --lay-label: inline; --lay-density: 0.9; --lay-media: none; --lay-rule: 1px;
+}
+
+/* portfolio — personal/editorial site: generous measure and rhythm, media
+   forward, one option per row, nothing packed */
+[data-layout="portfolio"] {
+  --lay-dir: column; --lay-width: 480px; --lay-cols: 1;
+  --lay-label: block; --lay-density: 1.55; --lay-media: block; --lay-rule: 0px;
+}
+
+/* catalog — grid/listing idiom: compact repeating cells, media kept but small,
+   the arrangement a category page repeats dozens of times */
+[data-layout="catalog"] {
+  --lay-dir: column; --lay-width: 260px; --lay-cols: 3;
+  --lay-label: block; --lay-density: 0.8; --lay-media: block; --lay-rule: 0px;
+}