@almadar/shell-web 0.0.0-stage → 0.1.0

package/themes/prism.css

@@ -0,0 +1,309 @@
+/**
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/prism.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
+ */
+
+[data-theme="prism-light"] {
+    --color-primary: #6d3fd6;
+    --color-primary-hover: #5b31bd;
+    --color-primary-foreground: #ffffff;
+    --color-secondary: #f1f5f9;
+    --color-secondary-hover: #e2e8f0;
+    --color-secondary-foreground: #0f172a;
+    --color-accent: #c2410c;
+    --color-accent-foreground: #ffffff;
+    --color-muted: #f1f5f9;
+    --color-muted-foreground: #59677c;
+    --color-background: #fafafa;
+    --color-foreground: #0f172a;
+    --color-card: #ffffff;
+    --color-card-foreground: #0f172a;
+    --color-surface: #f5f5f7;
+    --color-border: #e2e8f0;
+    --color-input: #cbd5e1;
+    --color-ring: #6d3fd6;
+    --color-error: #dc2626;
+    --color-error-foreground: #ffffff;
+    --color-success: #15803d;
+    --color-success-foreground: #ffffff;
+    --color-warning: #b45309;
+    --color-warning-foreground: #ffffff;
+    --color-info: #2563eb;
+    --color-info-foreground: #ffffff;
+    --color-scrim: rgba(0, 0, 0, 0.6);
+    --color-series-1: #ae3cc4;
+    --color-series-2: #a41c00;
+    --color-series-3: #be185d;
+    --color-series-4: #0e7490;
+    --color-series-5: #618305;
+    --color-series-6: #2d62ed;
+    --color-series-7: #a66e0e;
+    --color-series-8: #2708bb;
+    --color-diagram-ink: #0f172a;
+    --color-diagram-label: #475569;
+    --color-diagram-guide: #94a3b8;
+    --color-diagram-axis: #334155;
+    --color-diagram-grid: #e2e8f0;
+    --color-diagram-highlight: #6d3fd6;
+    --color-diagram-fill: #ede9fe;
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 18px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+    --icon-color: currentColor;
+    --transition-fast: 80ms;
+    --transition-normal: 120ms;
+    --transition-slow: 180ms;
+    --transition-timing: linear;
+    --hover-scale: 1.0;
+    --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: #6d3fd6;
+    --font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --letter-spacing: -0.01em;
+    --line-height: 1.55;
+    --shadow-main: 0 6px 20px -4px rgba(109, 63, 214, 0.22), 0 2px 6px rgba(194, 65, 12, 0.10);
+    --shadow-sm: 0 3px 10px -2px rgba(109, 63, 214, 0.18);
+    --shadow-lg: 0 16px 40px -8px rgba(109, 63, 214, 0.30), 0 4px 12px rgba(194, 65, 12, 0.12);
+    --shadow-inner: inset 0 1px 2px rgba(109, 63, 214, 0.10);
+    --shadow-none: none;
+    --shadow-hover: 0 10px 28px -6px rgba(109, 63, 214, 0.34), 0 3px 8px rgba(194, 65, 12, 0.14);
+    --shadow-active: 0 2px 6px -2px rgba(109, 63, 214, 0.25);
+    --font-family-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    --heading-weight: 800;
+    --heading-transform: none;
+    --heading-tracking: -0.035em;
+    --heading-style: normal;
+    --heading-shadow: none;
+    --duration-instant: 0ms;
+    --duration-fast: 80ms;
+    --duration-normal: 120ms;
+    --duration-slow: 180ms;
+    --duration-dramatic: 240ms;
+    --easing-linear: linear;
+    --easing-standard: linear;
+    --easing-emphasized: linear;
+    --easing-spring: linear;
+    --motion-modal-enter-from-transform: scale(0.95);
+    --motion-modal-exit-to-transform: scale(0.95);
+    --motion-popover-enter-from-transform: scale(0.96);
+    --motion-popover-exit-to-transform: scale(0.96);
+    --motion-toast-enter-from-transform: translateY(12px);
+    --motion-toast-exit-to-transform: translateY(12px);
+    --motion-page-enter-from-transform: translateY(8px);
+    --icon-family: lucide;
+    --icon-stroke-width: 1.5;
+    --icon-default-size: 14px;
+    --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-inner);
+    --radius-container: 10px;
+    --radius-interactive: 10px;
+    --radius-pill: 9999px;
+    --border-hairline: 1px;
+    --border-standard: 1px;
+    --border-heavy: 2px;
+    --corner-shape: superellipse(1.5);
+    --corner-shape-pill: superellipse(1.5);
+    --border-style: solid;
+    --border-style-interactive: solid;
+    --surface-card-image: linear-gradient(135deg, rgba(109, 63, 214, 0.08) 0%, rgba(236, 72, 153, 0.05) 50%, rgba(194, 65, 12, 0.06) 100%);
+    --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 5;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.22;
+    --diagram-roughness: 0;
+    --diagram-glow: 2;
+    --diagram-shadow: 0 4px 12px rgba(109, 63, 214, 0.25);
+    --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.25;
+    --material-metalness: 0.15;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.5;
+    --light-key: 1.15;
+    --light-key-color: #f5e9ff;
+    --scene-fog: 0.05;
+}
+
+[data-theme="prism-dark"] {
+    --color-primary: #a78bfa;
+    --color-primary-hover: #c4b5fd;
+    --color-primary-foreground: #1e1b4b;
+    --color-secondary: #1f1d3a;
+    --color-secondary-hover: #2a2748;
+    --color-secondary-foreground: #e2e8f0;
+    --color-accent: #fb923c;
+    --color-accent-foreground: #1a0e05;
+    --color-muted: #1f1d3a;
+    --color-muted-foreground: #94a3b8;
+    --color-background: #0c0a1a;
+    --color-foreground: #e2e8f0;
+    --color-card: #14122a;
+    --color-card-foreground: #e2e8f0;
+    --color-surface: #1f1d3a;
+    --color-border: #2a2748;
+    --color-input: #3a3658;
+    --color-ring: #a78bfa;
+    --color-error: #f87171;
+    --color-error-foreground: #000000;
+    --color-success: #4ade80;
+    --color-success-foreground: #000000;
+    --color-warning: #fbbf24;
+    --color-warning-foreground: #000000;
+    --color-info: #60a5fa;
+    --color-info-foreground: #000000;
+    --color-scrim: rgba(0, 0, 0, 0.7);
+    --color-series-1: #6987ef;
+    --color-series-2: #fb923c;
+    --color-series-3: #f472b6;
+    --color-series-4: #22d3ee;
+    --color-series-5: #a3e635;
+    --color-series-6: #51a8f8;
+    --color-series-7: #e6d50d;
+    --color-series-8: #e879f9;
+    --color-diagram-ink: #e2e8f0;
+    --color-diagram-label: #94a3b8;
+    --color-diagram-guide: #64748b;
+    --color-diagram-axis: #cbd5e1;
+    --color-diagram-grid: #2a2748;
+    --color-diagram-highlight: #a78bfa;
+    --color-diagram-fill: #2e2a5a;
+    --radius-none: 0px;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-xl: 18px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+    --icon-color: currentColor;
+    --transition-fast: 80ms;
+    --transition-normal: 120ms;
+    --transition-slow: 180ms;
+    --transition-timing: linear;
+    --hover-scale: 1.0;
+    --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: #a78bfa;
+    --font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --letter-spacing: -0.01em;
+    --line-height: 1.55;
+    --shadow-main: 0 6px 20px -4px rgba(167, 139, 250, 0.35), 0 2px 6px rgba(251, 146, 60, 0.10);
+    --shadow-sm: 0 3px 10px -2px rgba(167, 139, 250, 0.30);
+    --shadow-lg: 0 16px 40px -8px rgba(167, 139, 250, 0.45), 0 4px 12px rgba(251, 146, 60, 0.12);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.35);
+    --shadow-none: none;
+    --shadow-hover: 0 10px 28px -6px rgba(167, 139, 250, 0.50), 0 3px 8px rgba(251, 146, 60, 0.14);
+    --shadow-active: 0 2px 6px -2px rgba(167, 139, 250, 0.40);
+    --font-family-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    --heading-weight: 800;
+    --heading-transform: none;
+    --heading-tracking: -0.035em;
+    --heading-style: normal;
+    --heading-shadow: none;
+    --duration-instant: 0ms;
+    --duration-fast: 80ms;
+    --duration-normal: 120ms;
+    --duration-slow: 180ms;
+    --duration-dramatic: 240ms;
+    --easing-linear: linear;
+    --easing-standard: linear;
+    --easing-emphasized: linear;
+    --easing-spring: linear;
+    --motion-modal-enter-from-transform: scale(0.95);
+    --motion-modal-exit-to-transform: scale(0.95);
+    --motion-popover-enter-from-transform: scale(0.96);
+    --motion-popover-exit-to-transform: scale(0.96);
+    --motion-toast-enter-from-transform: translateY(12px);
+    --motion-toast-exit-to-transform: translateY(12px);
+    --motion-page-enter-from-transform: translateY(8px);
+    --icon-family: lucide;
+    --icon-stroke-width: 1.5;
+    --icon-default-size: 14px;
+    --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-inner);
+    --radius-container: 10px;
+    --radius-interactive: 10px;
+    --radius-pill: 9999px;
+    --border-hairline: 1px;
+    --border-standard: 1px;
+    --border-heavy: 2px;
+    --corner-shape: superellipse(1.5);
+    --corner-shape-pill: superellipse(1.5);
+    --border-style: solid;
+    --border-style-interactive: solid;
+    --surface-card-image: linear-gradient(135deg, rgba(167, 139, 250, 0.14) 0%, rgba(236, 72, 153, 0.08) 50%, rgba(190, 242, 100, 0.10) 100%);
+    --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 5;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.22;
+    --diagram-roughness: 0;
+    --diagram-glow: 2;
+    --diagram-shadow: 0 4px 12px rgba(109, 63, 214, 0.25);
+    --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.25;
+    --material-metalness: 0.15;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.5;
+    --light-key: 1.15;
+    --light-key-color: #f5e9ff;
+    --scene-fog: 0.05;
+}

package/themes/rawi.css

@@ -0,0 +1,310 @@
+/**
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/rawi.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
+ */
+
+[data-theme="rawi-light"] {
+    --color-primary: #b0566a;
+    --color-primary-hover: #9a4a5c;
+    --color-primary-foreground: #ffffff;
+    --color-secondary: #fdecef;
+    --color-secondary-hover: #fbd5dc;
+    --color-secondary-foreground: #4c0519;
+    --color-accent: #7c3aed;
+    --color-accent-foreground: #ffffff;
+    --color-muted: #f8eef1;
+    --color-muted-foreground: #6b4d57;
+    --color-background: #fcf8f9;
+    --color-foreground: #1a0b10;
+    --color-card: #ffffff;
+    --color-card-foreground: #1a0b10;
+    --color-surface: #f9f0f3;
+    --color-border: #f0dde3;
+    --color-input: #e3c6cf;
+    --color-ring: #b0566a;
+    --color-error: #dc2626;
+    --color-error-foreground: #ffffff;
+    --color-success: #047857;
+    --color-success-foreground: #ffffff;
+    --color-warning: #b45309;
+    --color-warning-foreground: #ffffff;
+    --color-info: #0369a1;
+    --color-info-foreground: #ffffff;
+    --color-scrim: rgba(26, 11, 16, 0.55);
+    --color-series-1: #0891b2;
+    --color-series-2: #c026d3;
+    --color-series-3: #65a30d;
+    --color-series-4: #ea580c;
+    --color-series-5: #db2777;
+    --color-series-6: #2563eb;
+    --color-series-7: #854d0e;
+    --color-series-8: #0d9488;
+    --color-diagram-ink: #1a0b10;
+    --color-diagram-label: #6b4d57;
+    --color-diagram-guide: #94a0bd;
+    --color-diagram-axis: #3d2830;
+    --color-diagram-grid: #f0dde3;
+    --color-diagram-highlight: #7c3aed;
+    --color-diagram-fill: #ffe4e9;
+    --radius-none: 0px;
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 22px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+    --icon-color: currentColor;
+    --transition-fast: 120ms;
+    --transition-normal: 200ms;
+    --transition-slow: 320ms;
+    --transition-timing: cubic-bezier(0.2, 0, 0, 1);
+    --hover-scale: 1.0;
+    --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: #4f46e5;
+    --font-family: "Plus Jakarta Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --letter-spacing: -0.005em;
+    --line-height: 1.6;
+    --shadow-main: 0 8px 24px -8px rgba(79, 70, 229, 0.20), 0 2px 6px rgba(8, 145, 178, 0.08);
+    --shadow-sm: 0 2px 8px -2px rgba(79, 70, 229, 0.16);
+    --shadow-lg: 0 24px 48px -12px rgba(79, 70, 229, 0.28), 0 6px 16px rgba(8, 145, 178, 0.10);
+    --shadow-inner: inset 0 1px 2px rgba(79, 70, 229, 0.10);
+    --shadow-none: none;
+    --shadow-hover: 0 14px 32px -10px rgba(79, 70, 229, 0.32), 0 4px 10px rgba(16, 185, 129, 0.10);
+    --shadow-active: 0 2px 6px -2px rgba(79, 70, 229, 0.24);
+    --font-family-display: "Bricolage Grotesque", "IBM Plex Sans Arabic", system-ui, sans-serif;
+    --font-family-body: "Nunito", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+    --heading-weight: 600;
+    --heading-transform: none;
+    --heading-tracking: -0.02em;
+    --heading-style: normal;
+    --heading-shadow: none;
+    --duration-instant: 0ms;
+    --duration-fast: 120ms;
+    --duration-normal: 200ms;
+    --duration-slow: 320ms;
+    --duration-dramatic: 640ms;
+    --easing-linear: linear;
+    --easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --easing-emphasized: cubic-bezier(0.22, 0.61, 0.36, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --motion-modal-enter-from-transform: translateY(12px) scale(0.98);
+    --motion-modal-exit-to-transform: scale(0.98);
+    --motion-popover-enter-from-transform: scale(0.97);
+    --motion-popover-exit-to-transform: scale(0.97);
+    --motion-toast-enter-from-transform: translateY(-12px);
+    --motion-toast-exit-to-transform: translateY(-12px);
+    --motion-page-enter-from-transform: translateY(10px);
+    --icon-family: lucide;
+    --icon-stroke-width: 1.75;
+    --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-inner);
+    --radius-container: 24px;
+    --radius-interactive: 16px;
+    --radius-pill: 9999px;
+    --border-hairline: 1px;
+    --border-standard: 1px;
+    --border-heavy: 2px;
+    --corner-shape: round;
+    --corner-shape-pill: round;
+    --border-style: solid;
+    --border-style-interactive: solid;
+    --illustration-loading: url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22%3E%3Cdefs%3E%3C/defs%3E%3Cstyle%3E.osc%7Banimation:o 1.2s ease-in-out infinite alternate%7D%40keyframes o%7Bfrom%7Btransform:translateY(-4px)%7Dto%7Btransform:translateY(4px)%7D%7D.w%7Bfill:none;stroke:%23b0566a;stroke-width:2.6;stroke-linecap:round;opacity:0;transform-origin:50px 50px;animation:w 2.4s ease-out infinite%7D%40keyframes w%7B0%25%7Bopacity:0;transform:scale(.55)%7D15%25%7Bopacity:1%7D100%25%7Bopacity:0;transform:scale(1.25)%7D%7D.w2%7Banimation-delay:.8s%7D.w3%7Banimation-delay:1.6s%7D%40media (prefers-reduced-motion:reduce)%7B*%7Banimation:none!important%7D%7D%3C/style%3E%3Cpath class=%22w w1%22 d=%22M27,34 A28,28 0 0 0 27,66%22/%3E%3Cpath class=%22w w1%22 d=%22M73,34 A28,28 0 0 1 73,66%22/%3E%3Cpath class=%22w w2%22 d=%22M27,34 A28,28 0 0 0 27,66%22/%3E%3Cpath class=%22w w2%22 d=%22M73,34 A28,28 0 0 1 73,66%22/%3E%3Cpath class=%22w w3%22 d=%22M27,34 A28,28 0 0 0 27,66%22/%3E%3Cpath class=%22w w3%22 d=%22M73,34 A28,28 0 0 1 73,66%22/%3E%3Cg class=%22osc%22%3E%3Cpath d=%22M50,52 C37,48 32,34 36,24 C40,14 60,14 64,24 C68,34 63,48 50,52 Z%22 fill=%22%23b0566a%22/%3E%3Cpath d=%22M50,52 C43,55 41,62 43,67 C45,72 55,72 57,67 C59,62 57,55 50,52 Z%22 fill=%22%23e8b4bf%22/%3E%3C/g%3E%3C/svg%3E");
+    --loader-mark-display: inline-block;
+    --loader-icon-display: none;
+    --surface-card-image: linear-gradient(135deg, rgba(225, 29, 72, 0.07) 0%, rgba(124, 58, 237, 0.05) 100%);
+    --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 5;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.2;
+    --diagram-roughness: 0;
+    --diagram-glow: 2;
+    --diagram-shadow: 0 4px 14px rgba(79, 70, 229, 0.22);
+    --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.25;
+    --material-metalness: 0.15;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.5;
+    --light-key: 1.15;
+    --light-key-color: #eef2ff;
+    --scene-fog: 0.05;
+}
+
+[data-theme="rawi-dark"] {
+    --color-primary: #f2a7b0;
+    --color-primary-hover: #f6c0c6;
+    --color-primary-foreground: #1a0b10;
+    --color-secondary: #2a1219;
+    --color-secondary-hover: #3a1a24;
+    --color-secondary-foreground: #fde8ec;
+    --color-accent: #a78bfa;
+    --color-accent-foreground: #120a24;
+    --color-muted: #241016;
+    --color-muted-foreground: #c7a4ae;
+    --color-background: #12070b;
+    --color-foreground: #fbeef1;
+    --color-card: #1c0d12;
+    --color-card-foreground: #fbeef1;
+    --color-surface: #22111a;
+    --color-border: #3a1d27;
+    --color-input: #4d2633;
+    --color-ring: #f2a7b0;
+    --color-error: #f87171;
+    --color-error-foreground: #000000;
+    --color-success: #34d399;
+    --color-success-foreground: #022c22;
+    --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: #22d3ee;
+    --color-series-2: #e879f9;
+    --color-series-3: #a3e635;
+    --color-series-4: #fb923c;
+    --color-series-5: #f472b6;
+    --color-series-6: #60a5fa;
+    --color-series-7: #fef08a;
+    --color-series-8: #2dd4bf;
+    --color-diagram-ink: #fbeef1;
+    --color-diagram-label: #c7a4ae;
+    --color-diagram-guide: #5d6890;
+    --color-diagram-axis: #e3cbd2;
+    --color-diagram-grid: #3a1d27;
+    --color-diagram-highlight: #a78bfa;
+    --color-diagram-fill: #4a1d2a;
+    --radius-none: 0px;
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 22px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+    --icon-color: currentColor;
+    --transition-fast: 120ms;
+    --transition-normal: 200ms;
+    --transition-slow: 320ms;
+    --transition-timing: cubic-bezier(0.2, 0, 0, 1);
+    --hover-scale: 1.0;
+    --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: #818cf8;
+    --font-family: "Plus Jakarta Sans", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --letter-spacing: -0.005em;
+    --line-height: 1.6;
+    --shadow-main: 0 8px 28px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(129, 140, 248, 0.08);
+    --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.5);
+    --shadow-lg: 0 24px 56px -12px rgba(0, 0, 0, 0.7), 0 0 32px -8px rgba(99, 102, 241, 0.25);
+    --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.4);
+    --shadow-none: none;
+    --shadow-hover: 0 14px 36px -10px rgba(99, 102, 241, 0.35);
+    --shadow-active: 0 2px 6px -2px rgba(0, 0, 0, 0.5);
+    --font-family-display: "Bricolage Grotesque", "IBM Plex Sans Arabic", system-ui, sans-serif;
+    --font-family-body: "Nunito", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+    --heading-weight: 600;
+    --heading-transform: none;
+    --heading-tracking: -0.02em;
+    --heading-style: normal;
+    --heading-shadow: none;
+    --duration-instant: 0ms;
+    --duration-fast: 120ms;
+    --duration-normal: 200ms;
+    --duration-slow: 320ms;
+    --duration-dramatic: 640ms;
+    --easing-linear: linear;
+    --easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --easing-emphasized: cubic-bezier(0.22, 0.61, 0.36, 1);
+    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+    --motion-modal-enter-from-transform: translateY(12px) scale(0.98);
+    --motion-modal-exit-to-transform: scale(0.98);
+    --motion-popover-enter-from-transform: scale(0.97);
+    --motion-popover-exit-to-transform: scale(0.97);
+    --motion-toast-enter-from-transform: translateY(-12px);
+    --motion-toast-exit-to-transform: translateY(-12px);
+    --motion-page-enter-from-transform: translateY(10px);
+    --icon-family: lucide;
+    --icon-stroke-width: 1.75;
+    --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-inner);
+    --radius-container: 24px;
+    --radius-interactive: 16px;
+    --radius-pill: 9999px;
+    --border-hairline: 1px;
+    --border-standard: 1px;
+    --border-heavy: 2px;
+    --corner-shape: round;
+    --corner-shape-pill: round;
+    --border-style: solid;
+    --border-style-interactive: solid;
+    --illustration-loading: url("data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22none%22%3E%3Cdefs%3E%3C/defs%3E%3Cstyle%3E.osc%7Banimation:o 1.2s ease-in-out infinite alternate%7D%40keyframes o%7Bfrom%7Btransform:translateY(-4px)%7Dto%7Btransform:translateY(4px)%7D%7D.w%7Bfill:none;stroke:%23f2a7b0;stroke-width:2.6;stroke-linecap:round;opacity:0;transform-origin:50px 50px;animation:w 2.4s ease-out infinite%7D%40keyframes w%7B0%25%7Bopacity:0;transform:scale(.55)%7D15%25%7Bopacity:1%7D100%25%7Bopacity:0;transform:scale(1.25)%7D%7D.w2%7Banimation-delay:.8s%7D.w3%7Banimation-delay:1.6s%7D%40media (prefers-reduced-motion:reduce)%7B*%7Banimation:none!important%7D%7D%3C/style%3E%3Cpath class=%22w w1%22 d=%22M27,34 A28,28 0 0 0 27,66%22/%3E%3Cpath class=%22w w1%22 d=%22M73,34 A28,28 0 0 1 73,66%22/%3E%3Cpath class=%22w w2%22 d=%22M27,34 A28,28 0 0 0 27,66%22/%3E%3Cpath class=%22w w2%22 d=%22M73,34 A28,28 0 0 1 73,66%22/%3E%3Cpath class=%22w w3%22 d=%22M27,34 A28,28 0 0 0 27,66%22/%3E%3Cpath class=%22w w3%22 d=%22M73,34 A28,28 0 0 1 73,66%22/%3E%3Cg class=%22osc%22%3E%3Cpath d=%22M50,52 C37,48 32,34 36,24 C40,14 60,14 64,24 C68,34 63,48 50,52 Z%22 fill=%22%23f2a7b0%22/%3E%3Cpath d=%22M50,52 C43,55 41,62 43,67 C45,72 55,72 57,67 C59,62 57,55 50,52 Z%22 fill=%22%239c5664%22/%3E%3C/g%3E%3C/svg%3E");
+    --loader-mark-display: inline-block;
+    --loader-icon-display: none;
+    --surface-card-image: linear-gradient(135deg, rgba(129, 140, 248, 0.10) 0%, rgba(34, 211, 238, 0.06) 55%, rgba(52, 211, 153, 0.07) 100%);
+    --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 5;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.2;
+    --diagram-roughness: 0;
+    --diagram-glow: 2;
+    --diagram-shadow: 0 4px 14px rgba(79, 70, 229, 0.22);
+    --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.25;
+    --material-metalness: 0.15;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.5;
+    --light-key: 1.15;
+    --light-key-color: #eef2ff;
+    --scene-fog: 0.05;
+}