@almadar/shell-web 0.0.0-stage → 1.0.0

package/themes/frutiger-aero.css

@@ -0,0 +1,458 @@
+/**
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/frutiger-aero.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
+ */
+
+[data-theme="frutiger-aero-light"] {
+    --color-primary: #0873b8;
+    --color-primary-hover: #065f9b;
+    --color-primary-foreground: #ffffff;
+    --color-secondary: #7ddb8a;
+    --color-secondary-hover: #66cf76;
+    --color-secondary-foreground: #06300c;
+    --color-accent: #177a31;
+    --color-accent-foreground: #ffffff;
+    --color-muted: #dcf0fb;
+    --color-muted-foreground: #3d5a70;
+    --color-background: #d9f2ff;
+    --color-foreground: #0d3350;
+    --color-card: rgba(255, 255, 255, 0.78);
+    --color-card-foreground: #0d3350;
+    --color-surface: #eaf7ff;
+    --color-border: rgba(255, 255, 255, 0.85);
+    --color-input: rgba(8, 115, 184, 0.45);
+    --color-ring: #0873b8;
+    --color-table-header: #eaf7ff;
+    --color-table-border: rgba(255, 255, 255, 0.85);
+    --color-table-row-hover: #cdeafb;
+    --color-surface-hover: #cdeafb;
+    --color-border-hover: #0873b8;
+    --color-placeholder: #56718a;
+    --color-error: #c62a2a;
+    --color-error-foreground: #ffffff;
+    --color-success: #177a31;
+    --color-success-foreground: #ffffff;
+    --color-warning: #ffc93c;
+    --color-warning-foreground: #2a1e00;
+    --color-info: #0873b8;
+    --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
+    --color-series-1: #5081f4;
+    --color-series-2: #3f9d4c;
+    --color-series-3: #0e8fa0;
+    --color-series-4: #b8820a;
+    --color-series-5: #c84a8a;
+    --color-series-6: #6a5ac8;
+    --color-series-7: #dc6a14;
+    --color-series-8: #e26144;
+    --color-diagram-ink: #0d3350;
+    --color-diagram-label: #0d3350;
+    --color-diagram-guide: #7a9ab0;
+    --color-diagram-axis: #3a6a8a;
+    --color-diagram-grid: #cfe6f2;
+    --color-diagram-highlight: #0873b8;
+    --color-diagram-fill: #0873b8;
+    --radius-none: 0px;
+    --radius-sm: 10px;
+    --radius-md: 16px;
+    --radius-lg: 18px;
+    --radius-xl: 24px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+    --font-family: "Nunito", "Quicksand", system-ui, sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --letter-spacing: 0em;
+    --line-height: 1.55;
+    --icon-color: #0873b8;
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.22, 1, 0.36, 1);
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0px;
+    --active-scale: 0.98;
+    --active-translate-y: 1px;
+    --focus-ring-width: 3px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #0873b8;
+    --shadow-main: 0 8px 24px rgba(10,90,150,.18), 0 2px 6px rgba(10,90,150,.12), inset 0 1px 0 rgba(255,255,255,.9);
+    --shadow-sm: 0 3px 10px rgba(10,90,150,.16), 0 1px 3px rgba(10,90,150,.1), inset 0 1px 0 rgba(255,255,255,.9);
+    --shadow-lg: 0 16px 40px rgba(10,90,150,.22), 0 4px 10px rgba(10,90,150,.14), inset 0 1px 0 rgba(255,255,255,.9);
+    --shadow-inner: inset 0 2px 6px rgba(10,90,150,.2);
+    --shadow-none: none;
+    --shadow-hover: 0 6px 16px rgba(10,90,150,.28), inset 0 1px 0 rgba(255,255,255,.75);
+    --shadow-active: inset 0 2px 6px rgba(10,90,150,.35);
+    --space-0: 0px;
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 13px;
+    --space-4: 17px;
+    --space-5: 21px;
+    --space-6: 25px;
+    --space-7: 29px;
+    --space-8: 34px;
+    --space-9: 38px;
+    --space-10: 42px;
+    --space-11: 46px;
+    --space-12: 50px;
+    --button-height-sm: 28px;
+    --button-height-md: 38px;
+    --button-height-lg: 48px;
+    --input-height-sm: 28px;
+    --input-height-md: 38px;
+    --input-height-lg: 48px;
+    --row-height-compact: 34px;
+    --row-height-normal: 44px;
+    --row-height-spacious: 52px;
+    --card-padding-sm: 14px;
+    --card-padding-md: 20px;
+    --card-padding-lg: 28px;
+    --dialog-padding: 28px;
+    --section-gap: 36px;
+    --font-family-display: "Quicksand", "Nunito", system-ui, sans-serif;
+    --font-family-body: var(--font-family);
+    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --heading-weight: 700;
+    --heading-transform: none;
+    --heading-tracking: 0em;
+    --heading-style: normal;
+    --text-xs: 12px;
+    --leading-xs: 16px;
+    --text-sm: 14px;
+    --leading-sm: 20px;
+    --text-base: 16px;
+    --leading-base: 24px;
+    --text-lg: 18px;
+    --leading-lg: 28px;
+    --text-xl: 20px;
+    --leading-xl: 28px;
+    --text-2xl: 24px;
+    --leading-2xl: 32px;
+    --text-3xl: 30px;
+    --leading-3xl: 36px;
+    --text-4xl: 36px;
+    --leading-4xl: 40px;
+    --text-display-1: 48px;
+    --leading-display-1: 52px;
+    --text-display-2: 60px;
+    --leading-display-2: 64px;
+    --intent-heading-major-size: var(--text-2xl);
+    --intent-heading-major-weight: var(--font-weight-bold);
+    --intent-heading-major-leading: var(--leading-2xl);
+    --intent-heading-minor-size: var(--text-lg);
+    --intent-heading-minor-weight: var(--font-weight-bold);
+    --intent-heading-minor-leading: var(--leading-lg);
+    --intent-body-emphasis-size: var(--text-base);
+    --intent-body-emphasis-weight: var(--font-weight-medium);
+    --intent-body-emphasis-leading: var(--leading-base);
+    --intent-body-default-size: var(--text-sm);
+    --intent-body-default-weight: var(--font-weight-normal);
+    --intent-body-default-leading: var(--leading-sm);
+    --intent-body-quiet-size: var(--text-sm);
+    --intent-body-quiet-weight: var(--font-weight-normal);
+    --intent-body-quiet-leading: var(--leading-sm);
+    --intent-caption-size: var(--text-xs);
+    --intent-caption-weight: var(--font-weight-normal);
+    --intent-caption-leading: var(--leading-xs);
+    --intent-numeric-size: var(--text-sm);
+    --intent-numeric-weight: var(--font-weight-medium);
+    --intent-numeric-leading: var(--leading-sm);
+    --duration-instant: 0ms;
+    --duration-fast: 150ms;
+    --duration-normal: 250ms;
+    --duration-slow: 400ms;
+    --duration-dramatic: 600ms;
+    --easing-linear: linear;
+    --easing-standard: cubic-bezier(0.22, 1, 0.36, 1);
+    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --motion-modal-enter-from-transform: scale(0.9) translateY(16px);
+    --motion-modal-exit-to-transform: scale(0.9) translateY(16px);
+    --motion-popover-enter-from-transform: scale(0.94);
+    --motion-popover-exit-to-transform: scale(0.94);
+    --motion-toast-enter-from-transform: translateY(20px);
+    --motion-toast-exit-to-transform: translateY(20px);
+    --motion-page-enter-from-transform: translateY(12px);
+    --icon-family: phosphor-duotone;
+    --icon-stroke-width: 1.5;
+    --icon-default-size: 18px;
+    --elevation-card: var(--shadow-main);
+    --elevation-popover: var(--shadow-lg);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-lg);
+    --elevation-interactive: var(--shadow-sm);
+    --elevation-pressed: var(--shadow-active);
+    --radius-container: 18px;
+    --radius-interactive: 16px;
+    --radius-pill: var(--radius-full);
+    --border-hairline: 1px;
+    --border-standard: var(--border-width);
+    --border-heavy: var(--border-width-thick);
+    --corner-shape: squircle;
+    --corner-shape-pill: round;
+    --border-style: solid;
+    --border-style-interactive: solid;
+    --surface-backdrop: blur(14px) saturate(1.4);
+    --surface-card-image: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%);
+    --surface-page-image: radial-gradient(circle at 12% 18%, rgba(255,255,255,.85) 0 5%, transparent 5.5%), radial-gradient(circle at 84% 10%, rgba(255,255,255,.7) 0 3.5%, transparent 4%), radial-gradient(circle at 72% 72%, rgba(255,255,255,.45) 0 7%, transparent 7.5%), radial-gradient(circle at 25% 80%, rgba(255,255,255,.4) 0 4%, transparent 4.5%), radial-gradient(ellipse at 50% 115%, rgba(90,200,120,.5), transparent 55%), linear-gradient(180deg, #8fd3ff 0%, #d9f2ff 55%, #e9fbe8 100%);
+    --surface-page-image-size: cover;
+    --surface-diagram: #f4fbff;
+    --diagram-stroke-thin: 1.5px;
+    --diagram-stroke-normal: 2.5px;
+    --diagram-stroke-bold: 4px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 6 4;
+    --diagram-dot: 1 4;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.28;
+    --diagram-roughness: 0;
+    --diagram-glow: 3;
+    --diagram-shadow: 0 3px 8px rgba(10, 90, 150, 0.25);
+    --diagram-marker: dot;
+    --diagram-label-font: body;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 600;
+    --diagram-label-case: none;
+    --diagram-corner: 12px;
+    --material-roughness: 0.2;
+    --material-metalness: 0.1;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.7;
+    --light-key: 1.1;
+    --light-key-color: #f0fbff;
+    --scene-fog: 0.2;
+}
+
+[data-theme="frutiger-aero-dark"] {
+    --color-primary: #5cc4ff;
+    --color-primary-hover: #3aaef2;
+    --color-primary-foreground: #04243a;
+    --color-secondary: #49c463;
+    --color-secondary-hover: #36b052;
+    --color-secondary-foreground: #032a0c;
+    --color-accent: #8ce99a;
+    --color-accent-foreground: #032a0c;
+    --color-muted: #16406a;
+    --color-muted-foreground: #b9dcf5;
+    --color-background: #0a2a4a;
+    --color-foreground: #e6f6ff;
+    --color-card: rgba(18, 62, 104, 0.78);
+    --color-card-foreground: #e6f6ff;
+    --color-surface: #0f3558;
+    --color-border: rgba(255, 255, 255, 0.28);
+    --color-input: rgba(140, 215, 255, 0.5);
+    --color-ring: #7fd4ff;
+    --color-table-header: #0f3558;
+    --color-table-border: rgba(255, 255, 255, 0.28);
+    --color-table-row-hover: #184a78;
+    --color-surface-hover: #184a78;
+    --color-border-hover: #5cc4ff;
+    --color-placeholder: #8fb6d6;
+    --color-error: #ff7a7a;
+    --color-error-foreground: #2a0505;
+    --color-success: #57d878;
+    --color-success-foreground: #032010;
+    --color-warning: #ffd45c;
+    --color-warning-foreground: #2a1e00;
+    --color-info: #5cc4ff;
+    --color-info-foreground: #04243a;
+    --color-scrim: rgba(0, 0, 0, 0.7);
+    --color-series-1: #3394cf;
+    --color-series-2: #93c842;
+    --color-series-3: #0b9f82;
+    --color-series-4: #c97505;
+    --color-series-5: #bb7a9b;
+    --color-series-6: #8e77ae;
+    --color-series-7: #eb621a;
+    --color-series-8: #bf7a5f;
+    --color-diagram-ink: #ffffff;
+    --color-diagram-label: #cdeaff;
+    --color-diagram-guide: #7ab4d8;
+    --color-diagram-axis: #9ad0f0;
+    --color-diagram-grid: #1f5a8c;
+    --color-diagram-highlight: #719e38;
+    --color-diagram-fill: #5cc4ff;
+    --radius-none: 0px;
+    --radius-sm: 10px;
+    --radius-md: 16px;
+    --radius-lg: 18px;
+    --radius-xl: 24px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+    --font-family: "Nunito", "Quicksand", system-ui, sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --letter-spacing: 0em;
+    --line-height: 1.55;
+    --icon-color: #7fd4ff;
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.22, 1, 0.36, 1);
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0px;
+    --active-scale: 0.98;
+    --active-translate-y: 1px;
+    --focus-ring-width: 3px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #7fd4ff;
+    --shadow-main: 0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
+    --shadow-sm: 0 3px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2);
+    --shadow-lg: 0 16px 40px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2);
+    --shadow-inner: inset 0 2px 6px rgba(0,0,0,.5);
+    --shadow-none: none;
+    --shadow-hover: 0 6px 16px rgba(80,200,255,.35), inset 0 1px 0 rgba(255,255,255,.3);
+    --shadow-active: inset 0 2px 6px rgba(0,0,0,.55);
+    --space-0: 0px;
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 13px;
+    --space-4: 17px;
+    --space-5: 21px;
+    --space-6: 25px;
+    --space-7: 29px;
+    --space-8: 34px;
+    --space-9: 38px;
+    --space-10: 42px;
+    --space-11: 46px;
+    --space-12: 50px;
+    --button-height-sm: 28px;
+    --button-height-md: 38px;
+    --button-height-lg: 48px;
+    --input-height-sm: 28px;
+    --input-height-md: 38px;
+    --input-height-lg: 48px;
+    --row-height-compact: 34px;
+    --row-height-normal: 44px;
+    --row-height-spacious: 52px;
+    --card-padding-sm: 14px;
+    --card-padding-md: 20px;
+    --card-padding-lg: 28px;
+    --dialog-padding: 28px;
+    --section-gap: 36px;
+    --font-family-display: "Quicksand", "Nunito", system-ui, sans-serif;
+    --font-family-body: var(--font-family);
+    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --heading-weight: 700;
+    --heading-transform: none;
+    --heading-tracking: 0em;
+    --heading-style: normal;
+    --text-xs: 12px;
+    --leading-xs: 16px;
+    --text-sm: 14px;
+    --leading-sm: 20px;
+    --text-base: 16px;
+    --leading-base: 24px;
+    --text-lg: 18px;
+    --leading-lg: 28px;
+    --text-xl: 20px;
+    --leading-xl: 28px;
+    --text-2xl: 24px;
+    --leading-2xl: 32px;
+    --text-3xl: 30px;
+    --leading-3xl: 36px;
+    --text-4xl: 36px;
+    --leading-4xl: 40px;
+    --text-display-1: 48px;
+    --leading-display-1: 52px;
+    --text-display-2: 60px;
+    --leading-display-2: 64px;
+    --intent-heading-major-size: var(--text-2xl);
+    --intent-heading-major-weight: var(--font-weight-bold);
+    --intent-heading-major-leading: var(--leading-2xl);
+    --intent-heading-minor-size: var(--text-lg);
+    --intent-heading-minor-weight: var(--font-weight-bold);
+    --intent-heading-minor-leading: var(--leading-lg);
+    --intent-body-emphasis-size: var(--text-base);
+    --intent-body-emphasis-weight: var(--font-weight-medium);
+    --intent-body-emphasis-leading: var(--leading-base);
+    --intent-body-default-size: var(--text-sm);
+    --intent-body-default-weight: var(--font-weight-normal);
+    --intent-body-default-leading: var(--leading-sm);
+    --intent-body-quiet-size: var(--text-sm);
+    --intent-body-quiet-weight: var(--font-weight-normal);
+    --intent-body-quiet-leading: var(--leading-sm);
+    --intent-caption-size: var(--text-xs);
+    --intent-caption-weight: var(--font-weight-normal);
+    --intent-caption-leading: var(--leading-xs);
+    --intent-numeric-size: var(--text-sm);
+    --intent-numeric-weight: var(--font-weight-medium);
+    --intent-numeric-leading: var(--leading-sm);
+    --duration-instant: 0ms;
+    --duration-fast: 150ms;
+    --duration-normal: 250ms;
+    --duration-slow: 400ms;
+    --duration-dramatic: 600ms;
+    --easing-linear: linear;
+    --easing-standard: cubic-bezier(0.22, 1, 0.36, 1);
+    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --motion-modal-enter-from-transform: scale(0.9) translateY(16px);
+    --motion-modal-exit-to-transform: scale(0.9) translateY(16px);
+    --motion-popover-enter-from-transform: scale(0.94);
+    --motion-popover-exit-to-transform: scale(0.94);
+    --motion-toast-enter-from-transform: translateY(20px);
+    --motion-toast-exit-to-transform: translateY(20px);
+    --motion-page-enter-from-transform: translateY(12px);
+    --icon-family: phosphor-duotone;
+    --icon-stroke-width: 1.5;
+    --icon-default-size: 18px;
+    --elevation-card: var(--shadow-main);
+    --elevation-popover: var(--shadow-lg);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-lg);
+    --elevation-interactive: var(--shadow-sm);
+    --elevation-pressed: var(--shadow-active);
+    --radius-container: 18px;
+    --radius-interactive: 16px;
+    --radius-pill: var(--radius-full);
+    --border-hairline: 1px;
+    --border-standard: var(--border-width);
+    --border-heavy: var(--border-width-thick);
+    --corner-shape: squircle;
+    --corner-shape-pill: round;
+    --border-style: solid;
+    --border-style-interactive: solid;
+    --surface-backdrop: blur(14px) saturate(1.4);
+    --surface-card-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 45%);
+    --surface-page-image: radial-gradient(circle at 12% 18%, rgba(160,230,255,.28) 0 5%, transparent 5.5%), radial-gradient(circle at 84% 10%, rgba(160,230,255,.22) 0 3.5%, transparent 4%), radial-gradient(circle at 72% 72%, rgba(160,230,255,.16) 0 7%, transparent 7.5%), radial-gradient(ellipse at 50% 115%, rgba(40,160,90,.45), transparent 55%), linear-gradient(180deg, #0b3a66 0%, #0a2a4a 60%, #0a2a30 100%);
+    --surface-page-image-size: cover;
+    --diagram-stroke-thin: 1.5px;
+    --diagram-stroke-normal: 2.5px;
+    --diagram-stroke-bold: 4px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 6 4;
+    --diagram-dot: 1 4;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.28;
+    --diagram-roughness: 0;
+    --diagram-glow: 3;
+    --diagram-shadow: 0 3px 8px rgba(10, 90, 150, 0.25);
+    --diagram-marker: dot;
+    --diagram-label-font: body;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 600;
+    --diagram-label-case: none;
+    --diagram-corner: 12px;
+    --material-roughness: 0.2;
+    --material-metalness: 0.1;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.7;
+    --light-key: 1.1;
+    --light-key-color: #f0fbff;
+    --scene-fog: 0.2;
+}

package/themes/game-adventure.css

@@ -0,0 +1,201 @@
+/**
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/game-adventure.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
+ */
+
+[data-theme="game-adventure-dark"] {
+    --color-primary: #b5793a;
+    --color-primary-hover: #c98d4c;
+    --color-primary-foreground: #241608;
+    --color-secondary: #3a2712;
+    --color-secondary-hover: #4a3319;
+    --color-secondary-foreground: #f3e3c4;
+    --color-accent: #e0a52c;
+    --color-accent-foreground: #241608;
+    --color-muted: #e8d6ae;
+    --color-muted-foreground: #6b4f2a;
+    --color-background: #241608;
+    --color-foreground: #f3e3c4;
+    --color-card: #fff1d2;
+    --color-card-foreground: #4a2f14;
+    --color-surface: #2e1d0d;
+    --color-border: #7a5228;
+    --color-input: #3a2712;
+    --color-ring: #e0a52c;
+    --color-error: #d9534f;
+    --color-error-foreground: #1a0808;
+    --color-success: #7ba05b;
+    --color-success-foreground: #0d1a08;
+    --color-warning: #e0a52c;
+    --color-warning-foreground: #241608;
+    --color-info: #b5793a;
+    --color-info-foreground: #241608;
+    --color-scrim: rgba(0, 0, 0, 0.7);
+    --color-diagram-ink: #3a2712;
+    --color-diagram-label: #4a3319;
+    --color-diagram-guide: #9a7a4a;
+    --color-diagram-axis: #6b4f2a;
+    --color-diagram-grid: #e3cfa3;
+    --color-diagram-highlight: #ab3f20;
+    --color-diagram-fill: #f3dcae;
+    --color-series-1: #701e08;
+    --color-series-2: #2f5f8a;
+    --color-series-3: #5f7f2a;
+    --color-series-4: #7a3f7a;
+    --color-series-5: #b0702a;
+    --color-series-6: #2a7a6a;
+    --color-series-7: #8a2a3a;
+    --color-series-8: #5a5a2a;
+    --radius-none: 0px;
+    --radius-sm: 8px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 18px;
+    --radius-full: 9999px;
+    --border-width: 3px;
+    --border-width-thin: 2px;
+    --border-width-thick: 4px;
+    --game-panel-border-image: url('https://almadar-kflow-assets.web.app/shared/ui-game-shell/kenney-ui-pack-adventure/ui/panel_brownimg.png');
+    --game-panel-border-image-slice: 17 fill;
+    --game-panel-border-image-width: 14px;
+    --font-family: "Kenney Blocks", ui-sans-serif, system-ui, sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --letter-spacing: 0.02em;
+    --line-height: 1.5;
+    --icon-color: #e0a52c;
+    --transition-fast: 100ms;
+    --transition-normal: 200ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+    --hover-scale: 1.01;
+    --hover-translate-y: -1px;
+    --hover-translate-x: 0;
+    --active-scale: 0.99;
+    --active-translate-y: 0;
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #e0a52c;
+    --shadow-main: inset 0 2px 0 rgba(255,220,160,0.28), inset 0 -3px 0 rgba(0,0,0,0.35), 0 3px 8px rgba(0,0,0,0.55);
+    --shadow-sm: inset 0 1px 0 rgba(255,220,160,0.25), inset 0 -2px 0 rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.5);
+    --shadow-lg: inset 0 2px 0 rgba(255,220,160,0.3), inset 0 -4px 0 rgba(0,0,0,0.4), 0 10px 24px rgba(0,0,0,0.6);
+    --shadow-inner: inset 0 3px 6px rgba(0,0,0,0.5);
+    --shadow-none: none;
+    --shadow-hover: inset 0 2px 0 rgba(255,220,160,0.4), inset 0 -3px 0 rgba(0,0,0,0.35), 0 5px 12px rgba(0,0,0,0.55);
+    --shadow-active: inset 0 3px 0 rgba(0,0,0,0.45);
+    --space-0: 0px;
+    --space-1: 4px;
+    --space-2: 8px;
+    --space-3: 12px;
+    --space-4: 16px;
+    --space-5: 20px;
+    --space-6: 24px;
+    --space-7: 28px;
+    --space-8: 32px;
+    --space-9: 36px;
+    --space-10: 40px;
+    --space-11: 44px;
+    --space-12: 48px;
+    --button-height-sm: 28px;
+    --button-height-md: 36px;
+    --button-height-lg: 44px;
+    --input-height-sm: 28px;
+    --input-height-md: 36px;
+    --input-height-lg: 44px;
+    --row-height-compact: 32px;
+    --row-height-normal: 40px;
+    --row-height-spacious: 48px;
+    --card-padding-sm: 12px;
+    --card-padding-md: 16px;
+    --card-padding-lg: 24px;
+    --dialog-padding: 24px;
+    --section-gap: 32px;
+    --font-family-display: var(--font-family);
+    --font-family-body: var(--font-family);
+    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    --heading-weight: 700;
+    --heading-transform: uppercase;
+    --heading-tracking: 0.05em;
+    --heading-style: normal;
+    --text-xs: 12px;
+    --leading-xs: 16px;
+    --text-sm: 14px;
+    --leading-sm: 20px;
+    --text-base: 16px;
+    --leading-base: 24px;
+    --text-lg: 18px;
+    --leading-lg: 28px;
+    --text-xl: 20px;
+    --leading-xl: 28px;
+    --text-2xl: 24px;
+    --leading-2xl: 32px;
+    --text-3xl: 30px;
+    --leading-3xl: 36px;
+    --text-4xl: 36px;
+    --leading-4xl: 40px;
+    --text-display-1: 48px;
+    --leading-display-1: 52px;
+    --text-display-2: 60px;
+    --leading-display-2: 64px;
+    --intent-heading-major-size: var(--text-2xl);
+    --intent-heading-major-weight: var(--font-weight-bold);
+    --intent-heading-major-leading: var(--leading-2xl);
+    --intent-heading-minor-size: var(--text-lg);
+    --intent-heading-minor-weight: var(--font-weight-bold);
+    --intent-heading-minor-leading: var(--leading-lg);
+    --intent-body-emphasis-size: var(--text-base);
+    --intent-body-emphasis-weight: var(--font-weight-medium);
+    --intent-body-emphasis-leading: var(--leading-base);
+    --intent-body-default-size: var(--text-sm);
+    --intent-body-default-weight: var(--font-weight-normal);
+    --intent-body-default-leading: var(--leading-sm);
+    --intent-body-quiet-size: var(--text-sm);
+    --intent-body-quiet-weight: var(--font-weight-normal);
+    --intent-body-quiet-leading: var(--leading-sm);
+    --intent-caption-size: var(--text-xs);
+    --intent-caption-weight: var(--font-weight-normal);
+    --intent-caption-leading: var(--leading-xs);
+    --intent-numeric-size: var(--text-sm);
+    --intent-numeric-weight: var(--font-weight-medium);
+    --intent-numeric-leading: var(--leading-sm);
+    --duration-instant: 0ms;
+    --duration-fast: var(--transition-fast);
+    --duration-normal: var(--transition-normal);
+    --duration-slow: var(--transition-slow);
+    --duration-dramatic: 600ms;
+    --easing-linear: linear;
+    --easing-standard: cubic-bezier(0.34, 1.3, 0.64, 1);
+    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --motion-modal-enter-from-transform: scale(0.8);
+    --motion-modal-exit-to-transform: scale(0.8);
+    --motion-popover-enter-from-transform: scale(0.9);
+    --motion-popover-exit-to-transform: scale(0.9);
+    --motion-toast-enter-from-transform: translateY(20px);
+    --motion-toast-exit-to-transform: translateY(20px);
+    --motion-page-enter-from-transform: translateY(12px);
+    --icon-family: fa-solid;
+    --icon-stroke-width: 0;
+    --icon-default-size: 16px;
+    --elevation-card: var(--shadow-main);
+    --elevation-popover: var(--shadow-lg);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-main);
+    --elevation-interactive: var(--shadow-sm);
+    --elevation-pressed: var(--shadow-active);
+    --radius-container: var(--radius-lg);
+    --radius-interactive: var(--radius-md);
+    --radius-pill: var(--radius-full);
+    --border-hairline: 1px;
+    --border-standard: var(--border-width);
+    --border-heavy: var(--border-width-thick);
+    --corner-shape: round;
+    --corner-shape-pill: round;
+    --border-style: outset;
+    --border-style-interactive: outset;
+    --surface-card-image: linear-gradient(180deg, rgba(122,82,40,0.06), rgba(122,82,40,0.14));
+    --surface-page-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 2px, transparent 2px, transparent 9px);
+    --surface-page-image-size: auto;
+}