@almadar/shell-web 0.0.0-stage → 0.1.0

package/themes/almadar-website.css

@@ -0,0 +1,269 @@
+/**
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/almadar-website.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
+ */
+
+[data-theme="almadar-website-light"] {
+    --color-primary: #0f766e;
+    --color-primary-hover: #115e59;
+    --color-primary-foreground: #ffffff;
+    --color-secondary: #f1f5f9;
+    --color-secondary-hover: #e2e8f0;
+    --color-secondary-foreground: #0f172a;
+    --color-accent: #c9a227;
+    --color-accent-foreground: #0f172a;
+    --color-muted: #f1f5f9;
+    --color-muted-foreground: #5c6b80;
+    --color-background: #ffffff;
+    --color-foreground: #0f172a;
+    --color-card: #ffffff;
+    --color-card-foreground: #0f172a;
+    --color-surface: #f8fafc;
+    --color-border: #e2e8f0;
+    --color-input: #e2e8f0;
+    --color-ring: #14b8a6;
+    --color-error: #dc2626;
+    --color-error-foreground: #ffffff;
+    --color-success: #15803d;
+    --color-success-foreground: #ffffff;
+    --color-warning: #f59e0b;
+    --color-warning-foreground: #000000;
+    --color-info: #1d4ed8;
+    --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
+    --color-series-1: #0f766e;
+    --color-series-2: #b8702a;
+    --color-series-3: #1f5dac;
+    --color-series-4: #9a3b3b;
+    --color-series-5: #6b7d2a;
+    --color-series-6: #7c4a8d;
+    --color-series-7: #a54803;
+    --color-series-8: #484a60;
+    --color-diagram-ink: #1e293b;
+    --color-diagram-label: #334155;
+    --color-diagram-guide: #8590a0;
+    --color-diagram-axis: #64748b;
+    --color-diagram-grid: #e2e8f0;
+    --color-diagram-highlight: #a67c0a;
+    --color-diagram-fill: #0f766e;
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+    --icon-color: #14b8a6;
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #14b8a6;
+    --shadow-main: 0 4px 14px rgba(15, 23, 42, 0.1), 0 1px 3px rgba(15, 23, 42, 0.06);
+    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
+    --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.15);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-none: none;
+    --shadow-hover: 0 12px 40px rgba(15, 23, 42, 0.15);
+    --shadow-active: 0 2px 8px rgba(15, 23, 42, 0.1);
+    --font-family-display: "Crimson Pro", Georgia, serif;
+    --heading-weight: 600;
+    --heading-tracking: -0.01em;
+    --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: var(--transition-timing);
+    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --icon-family: lucide;
+    --icon-stroke-width: 1.75;
+    --icon-default-size: 16px;
+    --elevation-card: var(--shadow-sm);
+    --elevation-popover: var(--shadow-main);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-main);
+    --radius-container: var(--radius-md);
+    --radius-interactive: var(--radius-md);
+    --radius-pill: var(--radius-full);
+    --border-hairline: 1px;
+    --border-standard: var(--border-width);
+    --border-heavy: var(--border-width-thick);
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z'/></svg>");
+    --surface-edge-height: clamp(24px, 6vw, 96px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='3' cy='3' r='1.5'/></svg>");
+    --surface-texture-size: 24px 24px;
+    --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);
+    --diagram-stroke-thin: 0.75px;
+    --diagram-stroke-normal: 1.5px;
+    --diagram-stroke-bold: 2.25px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 5 4;
+    --diagram-dot: 1 4;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.14;
+    --diagram-roughness: 0;
+    --diagram-glow: 0;
+    --diagram-shadow: none;
+    --diagram-marker: open;
+    --diagram-label-font: display;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 500;
+    --diagram-label-case: none;
+    --diagram-corner: 6px;
+    --material-roughness: 0.7;
+    --material-metalness: 0.1;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.6;
+    --light-key: 0.9;
+    --light-key-color: #fff6e0;
+    --scene-fog: 0.05;
+}
+
+[data-theme="almadar-website-dark"] {
+    --color-primary: #14b8a6;
+    --color-primary-hover: #2dd4bf;
+    --color-primary-foreground: #042f2e;
+    --color-secondary: #1e293b;
+    --color-secondary-hover: #334155;
+    --color-secondary-foreground: #f1f5f9;
+    --color-accent: #d4b44a;
+    --color-accent-foreground: #0f172a;
+    --color-muted: #1e293b;
+    --color-muted-foreground: #94a3b8;
+    --color-background: #0f172a;
+    --color-foreground: #f8fafc;
+    --color-card: #1e293b;
+    --color-card-foreground: #f8fafc;
+    --color-surface: #1e293b;
+    --color-border: #334155;
+    --color-input: #334155;
+    --color-ring: #14b8a6;
+    --color-tertiary: #c9a227;
+    --color-tertiary-hover: #d4b44a;
+    --color-tertiary-foreground: #0f172a;
+    --color-tertiary-muted: rgba(201, 162, 39, 0.15);
+    --color-error: #f87171;
+    --color-error-foreground: #000000;
+    --color-success: #4ade80;
+    --color-success-foreground: #000000;
+    --color-warning: #fbbf24;
+    --color-warning-foreground: #000000;
+    --color-info: #38bdf8;
+    --color-info-foreground: #000000;
+    --color-scrim: rgba(0, 0, 0, 0.7);
+    --color-series-1: #1fa399;
+    --color-series-2: #b9861a;
+    --color-series-3: #5e8ac3;
+    --color-series-4: #bb7178;
+    --color-series-5: #85993c;
+    --color-series-6: #a981b7;
+    --color-series-7: #d3782f;
+    --color-series-8: #767e95;
+    --color-diagram-ink: #e2e8f0;
+    --color-diagram-label: #cbd5e1;
+    --color-diagram-guide: #7d8aa0;
+    --color-diagram-axis: #94a3b8;
+    --color-diagram-grid: #334155;
+    --color-diagram-highlight: #c3ae41;
+    --color-diagram-fill: #14b8a6;
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+    --icon-color: #14b8a6;
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #14b8a6;
+    --shadow-main: 0 4px 14px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    --shadow-none: none;
+    --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.5);
+    --shadow-active: 0 2px 8px rgba(0, 0, 0, 0.3);
+    --font-family-display: "Crimson Pro", Georgia, serif;
+    --heading-weight: 600;
+    --heading-tracking: -0.01em;
+    --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: var(--transition-timing);
+    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --icon-family: lucide;
+    --icon-stroke-width: 1.75;
+    --icon-default-size: 16px;
+    --elevation-card: var(--shadow-sm);
+    --elevation-popover: var(--shadow-main);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-main);
+    --radius-container: var(--radius-md);
+    --radius-interactive: var(--radius-md);
+    --radius-pill: var(--radius-full);
+    --border-hairline: 1px;
+    --border-standard: var(--border-width);
+    --border-heavy: var(--border-width-thick);
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z'/></svg>");
+    --surface-edge-height: clamp(24px, 6vw, 96px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='3' cy='3' r='1.5'/></svg>");
+    --surface-texture-size: 24px 24px;
+    --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);
+    --diagram-stroke-thin: 0.75px;
+    --diagram-stroke-normal: 1.5px;
+    --diagram-stroke-bold: 2.25px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 5 4;
+    --diagram-dot: 1 4;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.14;
+    --diagram-roughness: 0;
+    --diagram-glow: 0;
+    --diagram-shadow: none;
+    --diagram-marker: open;
+    --diagram-label-font: display;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 500;
+    --diagram-label-case: none;
+    --diagram-corner: 6px;
+    --material-roughness: 0.7;
+    --material-metalness: 0.1;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.6;
+    --light-key: 0.9;
+    --light-key-color: #fff6e0;
+    --scene-fog: 0.05;
+}

package/themes/almadar.css

@@ -0,0 +1,269 @@
+/**
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/almadar.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
+ */
+
+[data-theme="almadar-light"] {
+    --color-primary: #0f766e;
+    --color-primary-hover: #115e59;
+    --color-primary-foreground: #ffffff;
+    --color-secondary: #f1f5f9;
+    --color-secondary-hover: #e2e8f0;
+    --color-secondary-foreground: #0f172a;
+    --color-accent: #0e7490;
+    --color-accent-foreground: #ffffff;
+    --color-muted: #f1f5f9;
+    --color-muted-foreground: #607080;
+    --color-background: #f8fafc;
+    --color-foreground: #0f172a;
+    --color-card: #ffffff;
+    --color-card-foreground: #0f172a;
+    --color-surface: #f1f5f9;
+    --color-border: rgba(20, 184, 166, 0.3);
+    --color-input: rgba(20, 184, 166, 0.2);
+    --color-ring: #14b8a6;
+    --color-error: #dc2626;
+    --color-error-foreground: #ffffff;
+    --color-success: #15803d;
+    --color-success-foreground: #ffffff;
+    --color-warning: #ca8a04;
+    --color-warning-foreground: #000000;
+    --color-info: #0369a1;
+    --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
+    --color-series-1: #0f766e;
+    --color-series-2: #2b92a3;
+    --color-series-3: #4f46e5;
+    --color-series-4: #a739eb;
+    --color-series-5: #b45309;
+    --color-series-6: #be185d;
+    --color-series-7: #65807a;
+    --color-series-8: #1e6db9;
+    --color-diagram-ink: #0f2a3a;
+    --color-diagram-label: #334155;
+    --color-diagram-guide: #8590a0;
+    --color-diagram-axis: #64748b;
+    --color-diagram-grid: #dbe7ee;
+    --color-diagram-highlight: #0e7490;
+    --color-diagram-fill: #0f766e;
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 20px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+    --icon-color: #0d9488;
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #14b8a6;
+    --shadow-main: 0 4px 14px rgba(20, 184, 166, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
+    --shadow-sm: 0 2px 4px rgba(20, 184, 166, 0.08);
+    --shadow-lg: 0 8px 30px rgba(20, 184, 166, 0.18), 0 4px 10px rgba(0, 0, 0, 0.06);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-none: none;
+    --shadow-hover: 0 12px 40px rgba(20, 184, 166, 0.2);
+    --shadow-active: 0 2px 8px rgba(20, 184, 166, 0.15);
+    --font-family-display: "Inter", "Noto Sans Arabic", system-ui, sans-serif;
+    --heading-weight: 800;
+    --heading-tracking: -0.03em;
+    --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: var(--transition-timing);
+    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --icon-family: lucide;
+    --icon-stroke-width: 1.75;
+    --icon-default-size: 16px;
+    --elevation-card: var(--shadow-sm);
+    --elevation-popover: var(--shadow-main);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-main);
+    --radius-container: 16px;
+    --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: squircle;
+    --surface-card-image: linear-gradient(160deg, rgba(20,184,166,0.07), rgba(20,184,166,0) 55%);
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z'/></svg>");
+    --surface-edge-height: clamp(24px, 6vw, 96px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='3' cy='3' r='1.5'/></svg>");
+    --surface-texture-size: 24px 24px;
+    --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 2px;
+    --diagram-stroke-bold: 3px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 6 4;
+    --diagram-dot: 1 4;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.18;
+    --diagram-roughness: 0;
+    --diagram-glow: 0;
+    --diagram-shadow: 0 2px 8px rgba(20, 184, 166, 0.18);
+    --diagram-marker: triangle;
+    --diagram-label-font: body;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 500;
+    --diagram-label-case: none;
+    --diagram-corner: 8px;
+    --material-roughness: 0.45;
+    --material-metalness: 0.35;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.55;
+    --light-key: 1.1;
+    --light-key-color: #e6fffb;
+    --scene-fog: 0.08;
+}
+
+[data-theme="almadar-dark"] {
+    --color-primary: #14b8a6;
+    --color-primary-hover: #2dd4bf;
+    --color-primary-foreground: #042f2e;
+    --color-secondary: #1e293b;
+    --color-secondary-hover: #334155;
+    --color-secondary-foreground: #f1f5f9;
+    --color-accent: #06b6d4;
+    --color-accent-foreground: #083344;
+    --color-muted: #1e293b;
+    --color-muted-foreground: #94a3b8;
+    --color-background: #0f172a;
+    --color-foreground: #f1f5f9;
+    --color-card: #1e293b;
+    --color-card-foreground: #f1f5f9;
+    --color-surface: #1e293b;
+    --color-border: rgba(20, 184, 166, 0.25);
+    --color-input: rgba(20, 184, 166, 0.3);
+    --color-ring: #14b8a6;
+    --color-error: #f87171;
+    --color-error-foreground: #000000;
+    --color-success: #4ade80;
+    --color-success-foreground: #000000;
+    --color-warning: #fbbf24;
+    --color-warning-foreground: #000000;
+    --color-info: #38bdf8;
+    --color-info-foreground: #000000;
+    --color-scrim: rgba(0, 0, 0, 0.7);
+    --color-series-1: #1fa399;
+    --color-series-2: #1d90b8;
+    --color-series-3: #9584e4;
+    --color-series-4: #c56ddd;
+    --color-series-5: #e17019;
+    --color-series-6: #e26499;
+    --color-series-7: #7d9690;
+    --color-series-8: #608ac4;
+    --color-diagram-ink: #e2e8f0;
+    --color-diagram-label: #cbd5e1;
+    --color-diagram-guide: #7a8aa3;
+    --color-diagram-axis: #94a3b8;
+    --color-diagram-grid: #2f3e55;
+    --color-diagram-highlight: #06b6d4;
+    --color-diagram-fill: #14b8a6;
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 20px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+    --icon-color: #14b8a6;
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+    --hover-scale: 1.02;
+    --hover-translate-y: -2px;
+    --hover-translate-x: 0;
+    --active-scale: 0.98;
+    --active-translate-y: 0;
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #14b8a6;
+    --shadow-main: 0 4px 14px rgba(20, 184, 166, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
+    --shadow-sm: 0 2px 4px rgba(20, 184, 166, 0.1);
+    --shadow-lg: 0 8px 30px rgba(20, 184, 166, 0.25), 0 4px 10px rgba(0, 0, 0, 0.1);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    --shadow-none: none;
+    --shadow-hover: 0 12px 40px rgba(20, 184, 166, 0.35), 0 4px 12px rgba(6, 182, 212, 0.2);
+    --shadow-active: 0 2px 8px rgba(20, 184, 166, 0.2);
+    --font-family-display: "Inter", "Noto Sans Arabic", system-ui, sans-serif;
+    --heading-weight: 800;
+    --heading-tracking: -0.03em;
+    --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: var(--transition-timing);
+    --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --icon-family: lucide;
+    --icon-stroke-width: 1.75;
+    --icon-default-size: 16px;
+    --elevation-card: var(--shadow-sm);
+    --elevation-popover: var(--shadow-main);
+    --elevation-dialog: var(--shadow-lg);
+    --elevation-toast: var(--shadow-main);
+    --radius-container: 16px;
+    --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: squircle;
+    --surface-card-image: linear-gradient(160deg, rgba(20,184,166,0.07), rgba(20,184,166,0) 55%);
+    --surface-edge-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z'/></svg>");
+    --surface-edge-height: clamp(24px, 6vw, 96px);
+    --surface-texture-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'><circle cx='3' cy='3' r='1.5'/></svg>");
+    --surface-texture-size: 24px 24px;
+    --surface-accent-image: radial-gradient(60% 80% at 15% 20%, color-mix(in oklab, var(--color-primary) 22%, transparent), transparent 70%), radial-gradient(50% 70% at 85% 30%, color-mix(in oklab, var(--color-accent) 20%, transparent), transparent 70%);
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 2px;
+    --diagram-stroke-bold: 3px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 6 4;
+    --diagram-dot: 1 4;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.18;
+    --diagram-roughness: 0;
+    --diagram-glow: 0;
+    --diagram-shadow: 0 2px 8px rgba(20, 184, 166, 0.18);
+    --diagram-marker: triangle;
+    --diagram-label-font: body;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 500;
+    --diagram-label-case: none;
+    --diagram-corner: 8px;
+    --material-roughness: 0.45;
+    --material-metalness: 0.35;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.55;
+    --light-key: 1.1;
+    --light-key-color: #e6fffb;
+    --scene-fog: 0.08;
+}