@almadar/ui 6.53.1 → 6.55.0

package/themes/_base.css

@@ -361,3 +361,64 @@ body {
 .ui-slot-renderer {
     padding-inline-end: var(--almadar-dock-contained-inset, 0px);
 }
+
+/* --------------------------------------------------------------------
+ * Drawing surfaces — canvas, chart, diagram, game board, 3D scene.
+ * Defaults derived from each theme's own tokens, so a theme that sets no
+ * `diagram`/`scene` axis still draws in its own palette, border weight,
+ * faces and corners. Declared on every theme scope (not only :root): a
+ * var() alias resolves where it is declared, so a :root-only default would
+ * freeze the root theme's colors inside a [data-theme] subtree.
+ * -------------------------------------------------------------------- */
+:root,
+[data-theme],
+[data-orbital-theme] {
+    --surface-diagram: var(--color-card);
+
+    --color-diagram-ink: var(--color-foreground);
+    --color-diagram-label: var(--color-muted-foreground);
+    --color-diagram-guide: var(--color-muted-foreground);
+    --color-diagram-axis: var(--color-foreground);
+    --color-diagram-grid: var(--color-border);
+    --color-diagram-highlight: var(--color-primary);
+    --color-diagram-fill: var(--color-muted);
+
+    /* A categorical palette carries no status meaning: the theme's primary
+     * turned around the hue wheel at its own lightness and chroma. */
+    --color-series-1: var(--color-primary);
+    --color-series-2: oklch(from var(--color-primary) clamp(0.45, l, 0.72) max(c, 0.12) calc(h + 45));
+    --color-series-3: oklch(from var(--color-primary) clamp(0.45, l, 0.72) max(c, 0.12) calc(h + 90));
+    --color-series-4: oklch(from var(--color-primary) clamp(0.45, l, 0.72) max(c, 0.12) calc(h + 135));
+    --color-series-5: oklch(from var(--color-primary) clamp(0.45, l, 0.72) max(c, 0.12) calc(h + 180));
+    --color-series-6: oklch(from var(--color-primary) clamp(0.45, l, 0.72) max(c, 0.12) calc(h + 225));
+    --color-series-7: oklch(from var(--color-primary) clamp(0.45, l, 0.72) max(c, 0.12) calc(h + 270));
+    --color-series-8: oklch(from var(--color-primary) clamp(0.45, l, 0.72) max(c, 0.12) calc(h + 315));
+
+    --diagram-stroke-thin: var(--border-hairline, var(--border-width-thin, 1px));
+    --diagram-stroke-normal: calc(var(--border-standard, var(--border-width, 1px)) * 1.5);
+    --diagram-stroke-bold: calc(var(--border-heavy, var(--border-width-thick, 2px)) * 1.5);
+    --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: none;
+    --diagram-marker: triangle;
+    --diagram-label-font: body;
+    --diagram-label-size: sm;
+    --diagram-label-weight: var(--font-weight-medium, 500);
+    --diagram-label-case: none;
+    --diagram-corner: var(--radius-sm, 4px);
+
+    --material-roughness: 0.6;
+    --material-metalness: 0;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.55;
+    --light-key: 1;
+    --light-key-color: #ffffff;
+    --scene-fog: 0;
+}

package/themes/_contract.md

@@ -253,6 +253,37 @@ These separate artistic styles (Art Deco vs Win95 vs wabi-sabi) along dimensions
 
 ---
 
+### Drawing axes — `diagram`, `scene`, diagram colors, `--surface-diagram`
+
+How every drawing surface (learning canvases, charts, graph canvases, game boards, AVL, 3D
+scenes) draws its marks. Components never hardcode a drawing color, weight or face; they resolve
+these through `useCanvasTheme` (`hooks/useCanvasTheme.ts`). Defaults in `_base.css` derive every
+var from the theme's own tokens, so a preset that sets nothing still draws in its own palette,
+border weight, faces and corners. A preset sets them to give its drawings a hand of their own
+(sketch wobble, neon glow, blueprint dashes, Bauhaus square caps).
+
+| Var | Source key | Meaning |
+|---|---|---|
+| `--surface-diagram` | `surface.diagram` | Ground a drawing sits on (default `--color-card`) |
+| `--color-series-1…8` | `colors.series-N` | Categorical data palette with no status meaning (default: primary turned around the hue wheel) |
+| `--color-diagram-ink` / `-label` / `-guide` / `-axis` / `-grid` / `-highlight` / `-fill` | `colors.diagram-*` | Mark roles: default stroke, label text, construction lines, axes, grid, the one emphasized mark, default fill |
+| `--diagram-stroke-thin` / `-normal` / `-bold` | `diagram.strokeThin/Normal/Bold` | Stroke weights for guides / marks / emphasis (default from the border rhythm) |
+| `--diagram-line-cap` / `-line-join` | `diagram.lineCap/lineJoin` | `butt\|round\|square` / `miter\|round\|bevel` |
+| `--diagram-dash` / `-dot` | `diagram.dash/dot` | Dash patterns (space-separated lengths) of dashed / dotted marks |
+| `--diagram-fill-style` / `-fill-opacity` | `diagram.fillStyle/fillOpacity` | `solid\|tint\|outline\|hatch`; tint strength |
+| `--diagram-roughness` | `diagram.roughness` | Hand-drawn wobble in px (`0` = exact) |
+| `--diagram-glow` | `diagram.glow` | Glow blur in px around strokes (`0` = none) |
+| `--diagram-shadow` | `diagram.shadow` | Shadow recipe on filled marks |
+| `--diagram-marker` | `diagram.marker` | Arrowhead: `triangle\|open\|line\|dot` |
+| `--diagram-label-font` / `-size` / `-weight` / `-case` | `diagram.label*` | Label face (`body\|display\|mono`), type-scale step, weight, `none\|uppercase` |
+| `--diagram-corner` | `diagram.corner` | Corner radius of rects and bars |
+| `--material-roughness` / `-metalness` / `-flat` / `-outline` | `scene.material*` | 3D material response; `flat` `1` = flat shading; `outline` = toon outline px |
+| `--light-ambient` / `-key` / `-key-color` | `scene.light*` | 3D lighting |
+| `--scene-fog` | `scene.fog` | Depth haze 0–1 |
+
+Motion has no drawing-specific vars: animated surfaces use `--duration-*` / `--easing-*` and stop
+when `--motion-enable: off` or `prefers-reduced-motion` is set.
+
 ## Authoring rules
 
 1. **Backfill agents** (B1, B2, B3): copy the defaults above verbatim into each existing theme's light and dark blocks. Do not change any pre-existing variable. The migration must produce pixel-identical output to today for every pre-Layer-1 theme.
@@ -262,3 +293,9 @@ These separate artistic styles (Art Deco vs Win95 vs wabi-sabi) along dimensions
 5. **Wireframe and trait-wars exceptions**. Wireframe's `--easing-standard` is `linear` not the default cubic-bezier; trait-wars's iconography may remain `lucide` even if its visual personality diverges. Document any per-theme override at the top of the theme file.
 6. **Contrast is gated.** Every theme's canonical foreground/fill pairs must pass WCAG AA 4.5:1 — enforced by `scripts/theme-contrast-audit.mjs` (`pnpm verify:themes`), which runs in CI and before every npm publish and exits non-zero on any violation. A new or edited theme that fails the audit blocks the publish. The script also accepts `--dir <themes-dir>` (`scripts/` is published) so another package can audit its own theme dir with the same rules.
 7. **No hardcoded palette colors in components.** Components must consume these tokens only (no `text-white`, `bg-gray-800`, `border-indigo-300`, `text-[#hex]`). Enforced by the `almadar/no-hardcoded-colors` ESLint rule (`@almadar/eslint-plugin`, enabled in this package's `eslint.config.cjs`). The single sanctioned exception is media-overlay chrome (white text / dark scrims painted over images or video), which requires an inline `eslint-disable-next-line almadar/no-hardcoded-colors` comment stating the reason.
+
+**Drawing roles stay apart.** In every theme mode the roles a canvas draws meaning with — `diagram-ink`,
+`diagram-highlight`, `muted-foreground`, `success`, `warning`, `error`, `series-1`…`series-8` — are at least
+ΔE 10 (CIEDE2000) from each other (`@almadar/core` `__tests__/theme-tone-colors.test.ts`; `INDISTINCT_DELTA_E`).
+A monochrome theme keeps its UI monochrome and gives its drawings a small on-identity palette. In an `outline`
+fill-style theme a mark's meaningful fill becomes its (bold) outline, so the outline look never erases a state.

package/themes/_fonts.css

@@ -4,7 +4,9 @@
  * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
  */
 
-@import url("https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Anton&family=Archivo:wght@400;500;700;800&family=Archivo+Black&family=Baloo+2:wght@500;600;700;800&family=Bangers&family=Bungee&family=Cairo:wght@300;400;500;600;700&family=Cinzel:wght@400;600;700;900&family=Cinzel+Decorative:wght@400;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,700;1,500;1,700&family=Crimson+Pro:wght@500;600;700&family=DM+Sans:wght@400;500;700&family=DM+Serif+Display&family=DotGothic16&family=EB+Garamond:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600;700&family=Fraunces:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Fredoka:wght@400;500;600;700&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Hanken+Grotesk:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&family=IM+Fell+English&family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500;700&family=Josefin+Sans:wght@400;500;700&family=Jost:wght@300;400;500;700;800&family=Kalam:wght@300;400;700&family=Karla:wght@400;500;700&family=Libre+Baskerville:wght@400;700&family=Lilita+One&family=Limelight&family=Lora:wght@400;500;600;700&family=M+PLUS+Rounded+1c:wght@400;500;700;800&family=Ma+Shan+Zheng&family=Manrope:wght@400;500;600;700;800&family=MedievalSharp&family=Newsreader:wght@400;500;600&family=Noto+Naskh+Arabic:wght@400;500;700&family=Noto+Sans:wght@400;500;700;800&family=Noto+Sans+Arabic:wght@400;500;600;700&family=Noto+Sans+Mono:wght@400;500&family=Noto+Serif+JP:wght@400;500;700&family=Noto+Serif+SC:wght@400;500;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Nunito+Sans:wght@400;600;700&family=Old+Standard+TT&family=Orbitron:wght@500;700;900&family=Oswald:wght@500;700&family=Outfit:wght@300;400;500;600&family=Patrick+Hand&family=Pixelify+Sans:wght@400;500;700&family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,900;1,500;1,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&family=Poiret+One&family=Poppins:wght@500;600;700&family=Press+Start+2P&family=Quicksand:wght@500;600;700&family=Rajdhani:wght@400;500;600;700&family=Reem+Kufi:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;500;700&family=Roboto+Flex:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&family=Rubik:wght@400;500;700&family=Rubik+Mono+One&family=Russo+One&family=Schibsted+Grotesk:wght@400;500;600;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Shippori+Mincho:wght@400;500&family=Shrikhand&family=Silkscreen:wght@400;700&family=Sora:wght@400;600;700&family=Source+Serif+4:wght@400;600;700&family=Space+Mono:wght@400;700&family=Special+Elite&family=Tilt+Neon&family=UnifrakturCook:wght@700&family=VT323&family=Work+Sans:wght@400;500;600;700&family=Zen+Antique&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Anton&family=Archivo:wght@400;500;700;800&family=Archivo+Black&family=Baloo+2:wght@500;600;700;800&family=Bangers&family=Bungee&family=Cairo:wght@300;400;500;600;700&family=Cinzel:wght@400;600;700;900&family=Cinzel+Decorative:wght@400;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,700;1,500;1,700&family=Crimson+Pro:wght@500;600;700&family=DM+Sans:wght@400;500;700&family=DM+Serif+Display&family=DotGothic16&family=EB+Garamond:wght@400;500;600;700&family=Exo+2:wght@300;400;500;600;700&family=Fraunces:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Fredoka:wght@400;500;600;700&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Hanken+Grotesk:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@400;500;600;700&family=IM+Fell+English&family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500;700&family=Josefin+Sans:wght@400;500;700&family=Jost:wght@300;400;500;700;800&family=Kalam:wght@300;400;700&family=Karla:wght@400;500;700&family=Libre+Baskerville:wght@400;700&family=Lilita+One&family=Limelight&family=Lora:wght@400;500;600;700&family=M+PLUS+Rounded+1c:wght@400;500;700;800&family=Ma+Shan+Zheng&family=Manrope:wght@400;500;600;700;800&family=MedievalSharp&family=Newsreader:wght@400;500;600&family=Noto+Naskh+Arabic:wght@400;500;700&family=Noto+Sans:wght@400;500;700;800&family=Noto+Sans+Arabic:wght@400;500;600;700&family=Noto+Sans+Mono:wght@400;500&family=Noto+Serif+JP:wght@400;500;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&family=Nunito:wght@400;500;600;700;800&family=Nunito+Sans:wght@400;600;700&family=Old+Standard+TT&family=Orbitron:wght@500;700;900&family=Oswald:wght@500;700&family=Outfit:wght@300;400;500;600&family=Patrick+Hand&family=Pixelify+Sans:wght@400;500;700&family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,900;1,500;1,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Poiret+One&family=Poppins:wght@500;600;700&family=Press+Start+2P&family=Quicksand:wght@500;600;700&family=Rajdhani:wght@400;500;600;700&family=Reem+Kufi:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;500;700&family=Roboto+Flex:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&family=Rubik:wght@400;500;700&family=Rubik+Mono+One&family=Russo+One&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&family=Share+Tech+Mono&family=Shippori+Mincho:wght@400;500&family=Shrikhand&family=Silkscreen:wght@400;700&family=Sora:wght@400;600;700&family=Space+Mono:wght@400;700&family=Special+Elite&family=Tilt+Neon&family=UnifrakturCook:wght@700&family=VT323&family=Work+Sans:wght@400;500;600;700&family=Zen+Antique&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&display=swap");

package/themes/_presets.css

@@ -5,6 +5,7 @@
  */
 
 @import "./almadar.css";
+@import "./almadar-heritage.css";
 @import "./almadar-website.css";
 @import "./aqua.css";
 @import "./arabesque.css";
@@ -42,6 +43,7 @@
 @import "./neumorphic.css";
 @import "./newsprint.css";
 @import "./notion-editorial.css";
+@import "./orb.css";
 @import "./pixel.css";
 @import "./prism.css";
 @import "./retro.css";

package/themes/almadar-heritage.css

@@ -0,0 +1,455 @@
+/**
+ * GENERATED — do not edit by hand.
+ * Source: packages/almadar-core/themes/almadar-heritage.json
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
+ */
+
+[data-theme="almadar-heritage-light"] {
+    --color-primary: #00767c;
+    --color-primary-hover: #006369;
+    --color-primary-foreground: #ffffff;
+    --color-secondary: #eef2f2;
+    --color-secondary-hover: #e2e9e9;
+    --color-secondary-foreground: #0f172a;
+    --color-accent: #c9a227;
+    --color-accent-foreground: #0f172a;
+    --color-tertiary: #b3412f;
+    --color-tertiary-hover: #9c3727;
+    --color-tertiary-foreground: #ffffff;
+    --color-tertiary-muted: rgba(179, 65, 47, 0.12);
+    --color-muted: #f1eee8;
+    --color-muted-foreground: #475569;
+    --color-background: #faf8f5;
+    --color-foreground: #0f172a;
+    --color-card: #ffffff;
+    --color-card-foreground: #0f172a;
+    --color-surface: #f3f0ea;
+    --color-border: #e4e0d8;
+    --color-input: #d6d1c6;
+    --color-ring: #00b1b8;
+    --color-error: #b42318;
+    --color-error-foreground: #ffffff;
+    --color-success: #15803d;
+    --color-success-foreground: #ffffff;
+    --color-warning: #b45309;
+    --color-warning-foreground: #ffffff;
+    --color-info: #00767c;
+    --color-info-foreground: #ffffff;
+    --color-scrim: rgba(15, 23, 42, 0.55);
+    --color-series-1: #00767c;
+    --color-series-2: #7d7d12;
+    --color-series-3: #215eac;
+    --color-series-4: #a4444c;
+    --color-series-5: #536225;
+    --color-series-6: #7a4a8a;
+    --color-series-7: #875c27;
+    --color-series-8: #6b7689;
+    --color-diagram-ink: #1f2d3d;
+    --color-diagram-label: #334155;
+    --color-diagram-guide: #8a8f98;
+    --color-diagram-axis: #64748b;
+    --color-diagram-grid: #e4e0d8;
+    --color-diagram-highlight: #a07a10;
+    --color-diagram-fill: #00767c;
+    --radius-none: 0px;
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 10px;
+    --radius-xl: 14px;
+    --radius-full: 9999px;
+    --border-width: 1px;
+    --border-width-thin: 1px;
+    --border-width-thick: 2px;
+    --font-family: "Cairo", "Noto Naskh Arabic", "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --letter-spacing: 0em;
+    --line-height: 1.6;
+    --icon-color: #0f766e;
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+    --hover-scale: 1;
+    --hover-translate-y: 0px;
+    --hover-translate-x: 0px;
+    --active-scale: 1;
+    --active-translate-y: 0px;
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #14b8a6;
+    --shadow-main: 0 6px 20px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.05);
+    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
+    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
+    --shadow-inner: inset 0 1px 3px rgba(31,63,143,0.12);
+    --shadow-none: none;
+    --shadow-hover: 0 18px 44px rgba(15, 23, 42, 0.12);
+    --shadow-active: 0 1px 2px rgba(31,63,143,0.15);
+    --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: 30px;
+    --button-height-md: 40px;
+    --button-height-lg: 48px;
+    --input-height-sm: 30px;
+    --input-height-md: 40px;
+    --input-height-lg: 48px;
+    --row-height-compact: 32px;
+    --row-height-normal: 40px;
+    --row-height-spacious: 48px;
+    --card-padding-sm: 12px;
+    --card-padding-md: 18px;
+    --card-padding-lg: 24px;
+    --dialog-padding: 24px;
+    --section-gap: 32px;
+    --font-family-display: "Plus Jakarta Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
+    --font-family-body: "Plus Jakarta Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
+    --font-family-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, SFMono-Regular, Menlo, monospace;
+    --heading-weight: 700;
+    --heading-transform: none;
+    --heading-tracking: -0.02em;
+    --heading-style: normal;
+    --heading-shadow: none;
+    --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: 700ms;
+    --easing-linear: linear;
+    --easing-standard: var(--transition-timing);
+    --easing-emphasized: cubic-bezier(0.22, 0.61, 0.36, 1);
+    --easing-spring: cubic-bezier(0.25, 0.8, 0.25, 1);
+    --motion-modal-enter-from-transform: scale(0.96);
+    --motion-modal-exit-to-transform: scale(0.96);
+    --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(8px);
+    --icon-family: phosphor-duotone;
+    --icon-stroke-width: 1.5;
+    --icon-default-size: 18px;
+    --elevation-card: var(--shadow-sm);
+    --elevation-popover: var(--shadow-main);
+    --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: none;
+    --border-style-interactive: solid;
+    --surface-backdrop: none;
+    --surface-card-image: none;
+    --surface-page-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><g fill='none' stroke='%2300767c' stroke-opacity='0.07' stroke-width='1'><path d='M24 0V48M0 24H48'/><path d='M24 18L30 24L24 30L18 24Z'/></g></svg>");
+    --surface-page-image-size: 48px 48px;
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 1.5px;
+    --diagram-stroke-bold: 2.5px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 6 4;
+    --diagram-dot: 1 4;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.16;
+    --diagram-roughness: 0;
+    --diagram-glow: 0;
+    --diagram-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
+    --diagram-marker: triangle;
+    --diagram-label-font: body;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 600;
+    --diagram-label-case: none;
+    --diagram-corner: 6px;
+    --material-roughness: 0.55;
+    --material-metalness: 0.25;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.55;
+    --light-key: 1;
+    --light-key-color: #fff4d6;
+    --scene-fog: 0.05;
+}
+
+[data-theme="almadar-heritage-dark"] {
+    --color-primary: #00b1b8;
+    --color-primary-hover: #2cc7cd;
+    --color-primary-foreground: #0f172a;
+    --color-secondary: #1e293b;
+    --color-secondary-hover: #283548;
+    --color-secondary-foreground: #f1f5f9;
+    --color-accent: #d4b44a;
+    --color-accent-foreground: #0f172a;
+    --color-tertiary: #e0715e;
+    --color-tertiary-hover: #e8887a;
+    --color-tertiary-foreground: #0f172a;
+    --color-tertiary-muted: rgba(224, 113, 94, 0.16);
+    --color-muted: #1a2436;
+    --color-muted-foreground: #9aa6b8;
+    --color-background: #0f172a;
+    --color-foreground: #f5f2ea;
+    --color-card: #152036;
+    --color-card-foreground: #f5f2ea;
+    --color-surface: #152036;
+    --color-border: #2a3750;
+    --color-input: #334360;
+    --color-ring: #00b1b8;
+    --color-error: #f87171;
+    --color-error-foreground: #000000;
+    --color-success: #4ade80;
+    --color-success-foreground: #000000;
+    --color-warning: #fbbf24;
+    --color-warning-foreground: #000000;
+    --color-info: #2cc7cd;
+    --color-info-foreground: #000000;
+    --color-scrim: rgba(0, 0, 0, 0.7);
+    --color-series-1: #0a98a0;
+    --color-series-2: #a9841b;
+    --color-series-3: #568acf;
+    --color-series-4: #b86a60;
+    --color-series-5: #7d9146;
+    --color-series-6: #a379b1;
+    --color-series-7: #b57b43;
+    --color-series-8: #758091;
+    --color-diagram-ink: #e6e1d4;
+    --color-diagram-label: #c9ced8;
+    --color-diagram-guide: #7f8aa0;
+    --color-diagram-axis: #98a2b6;
+    --color-diagram-grid: #2a3650;
+    --color-diagram-highlight: #c3ae41;
+    --color-diagram-fill: #00b1b8;
+    --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;
+    --font-family: "Cairo", "Noto Naskh Arabic", "Segoe UI", sans-serif;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+    --letter-spacing: 0em;
+    --line-height: 1.6;
+    --icon-color: #2dd4bf;
+    --transition-fast: 150ms;
+    --transition-normal: 250ms;
+    --transition-slow: 400ms;
+    --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
+    --hover-scale: 1;
+    --hover-translate-y: 0px;
+    --hover-translate-x: 0px;
+    --active-scale: 1;
+    --active-translate-y: 0px;
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-color: #2dd4bf;
+    --shadow-main: 0 6px 20px rgba(0, 0, 0, 0.45);
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
+    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
+    --shadow-inner: inset 0 1px 3px rgba(0,0,0,0.4);
+    --shadow-none: none;
+    --shadow-hover: 0 18px 44px rgba(0, 0, 0, 0.55);
+    --shadow-active: 0 1px 2px rgba(0,0,0,0.5);
+    --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: 30px;
+    --button-height-md: 40px;
+    --button-height-lg: 48px;
+    --input-height-sm: 30px;
+    --input-height-md: 40px;
+    --input-height-lg: 48px;
+    --row-height-compact: 32px;
+    --row-height-normal: 40px;
+    --row-height-spacious: 48px;
+    --card-padding-sm: 12px;
+    --card-padding-md: 18px;
+    --card-padding-lg: 24px;
+    --dialog-padding: 24px;
+    --section-gap: 32px;
+    --font-family-display: "Source Serif 4", "IBM Plex Sans Arabic", Georgia, serif;
+    --font-family-body: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif;
+    --font-family-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+    --heading-weight: 600;
+    --heading-transform: none;
+    --heading-tracking: -0.02em;
+    --heading-style: normal;
+    --heading-shadow: none;
+    --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: 700ms;
+    --easing-linear: linear;
+    --easing-standard: var(--transition-timing);
+    --easing-emphasized: cubic-bezier(0.22, 0.61, 0.36, 1);
+    --easing-spring: cubic-bezier(0.25, 0.8, 0.25, 1);
+    --motion-modal-enter-from-transform: scale(0.96);
+    --motion-modal-exit-to-transform: scale(0.96);
+    --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(8px);
+    --icon-family: phosphor-duotone;
+    --icon-stroke-width: 1.5;
+    --icon-default-size: 18px;
+    --elevation-card: var(--shadow-sm);
+    --elevation-popover: var(--shadow-main);
+    --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: none;
+    --border-style-interactive: solid;
+    --surface-backdrop: none;
+    --surface-card-image: none;
+    --surface-page-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><g fill='none' stroke='%2300b1b8' stroke-opacity='0.06' stroke-width='1'><path d='M24 0V48M0 24H48'/><path d='M24 18L30 24L24 30L18 24Z'/></g></svg>");
+    --surface-page-image-size: 72px 72px;
+    --diagram-stroke-thin: 1px;
+    --diagram-stroke-normal: 1.5px;
+    --diagram-stroke-bold: 2.5px;
+    --diagram-line-cap: round;
+    --diagram-line-join: round;
+    --diagram-dash: 6 4;
+    --diagram-dot: 1 4;
+    --diagram-fill-style: tint;
+    --diagram-fill-opacity: 0.16;
+    --diagram-roughness: 0;
+    --diagram-glow: 0;
+    --diagram-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
+    --diagram-marker: triangle;
+    --diagram-label-font: body;
+    --diagram-label-size: sm;
+    --diagram-label-weight: 600;
+    --diagram-label-case: none;
+    --diagram-corner: 6px;
+    --material-roughness: 0.55;
+    --material-metalness: 0.25;
+    --material-flat: 0;
+    --material-outline: 0;
+    --light-ambient: 0.55;
+    --light-key: 1;
+    --light-key-color: #fff4d6;
+    --scene-fog: 0.05;
+}