/* RIME Design System (First Light) v1 — generated from tokens.json */
:root, [data-theme="light"] {
  --rime-navy-950: #0a0e1a; /* Navy, the night-to-structure ramp. Midnight, darkest field / ink. Raw brand scale; never in new work. */
  --rime-navy-900: #101b33; /* Navy, the night-to-structure ramp. Deep Navy, dark surface. Raw brand scale; never in new work. */
  --rime-navy-800: #16233f; /* Navy, the night-to-structure ramp. Navy ramp step between Deep Navy and Horizon Blue. Raw brand scale; never in new work. */
  --rime-navy-700: #1e3a5f; /* Navy, the night-to-structure ramp. Horizon Blue, structure accent. Raw brand scale; never in new work. */
  --rime-navy-600: #2a4a73; /* Navy, the night-to-structure ramp. Navy ramp step (the light-theme link colour). Raw brand scale; never in new work. */
  --rime-navy-500: #3d5e88; /* Navy, the night-to-structure ramp. Readable secondary text on light. Raw brand scale; never in new work. */
  --rime-navy-400: #5d7b9f; /* Navy, the night-to-structure ramp. Navy ramp step (the light-theme tertiary text). Raw brand scale; never in new work. */
  --rime-navy-300: #8ba0b8; /* Navy, the night-to-structure ramp. Navy ramp step. Raw brand scale; never in new work. */
  --rime-navy-200: #c9d4e3; /* Navy, the night-to-structure ramp. Rime Frost, light structure. Raw brand scale; never in new work. */
  --rime-navy-100: #e2e8f0; /* Navy, the night-to-structure ramp. Navy ramp step (the light-theme border). Raw brand scale; never in new work. */
  --rime-navy-50: #f1f4f8; /* Navy, the night-to-structure ramp. Navy ramp step (the light-theme inner panel). Raw brand scale; never in new work. */
  --rime-orange-100: #fce4d6; /* First Light, the 5% orange (single accent). Raw brand scale; never in new work. */
  --rime-orange-200: #fac9ac; /* First Light, the 5% orange (single accent). Raw brand scale; never in new work. */
  --rime-orange-300: #f7a87a; /* First Light, the 5% orange (single accent). Raw brand scale; never in new work. */
  --rime-orange-400: #f58e52; /* First Light, the 5% orange (single accent). Raw brand scale; never in new work. */
  --rime-orange-500: #f2762e; /* First Light, the 5% orange (single accent). 500 is First Light. Raw brand scale; never in new work. */
  --rime-orange-600: #dc6519; /* First Light, the 5% orange (single accent). 600 is the hover. Raw brand scale; never in new work. */
  --rime-orange-700: #b44e10; /* First Light, the 5% orange (single accent). Raw brand scale; never in new work. */
  --rime-amber-100: #fdecd0; /* Amber Dawn, chart/highlight support only, never the signature. Raw brand scale; never in new work. */
  --rime-amber-300: #f9cb7c; /* Amber Dawn, chart/highlight support only, never the signature. Raw brand scale; never in new work. */
  --rime-amber-500: #f5a623; /* Amber Dawn, chart/highlight support only, never the signature. Raw brand scale; never in new work. */
  --rime-amber-700: #8a4b0a; /* Amber Dawn, chart/highlight support only, never the signature. Raw brand scale; never in new work. */
  --rime-green-100: #dcf1da; /* Green. Functional status hue (operational necessity, retuned into the v2.0 world); always paired with text + icon/shape. Raw brand scale; never in new work. */
  --rime-green-300: #92de8c; /* Green. Functional status hue (operational necessity, retuned into the v2.0 world); always paired with text + icon/shape. Raw brand scale; never in new work. */
  --rime-green-500: #3fa847; /* Green. Functional status hue (operational necessity, retuned into the v2.0 world); always paired with text + icon/shape. Raw brand scale; never in new work. */
  --rime-green-700: #1e6e2e; /* Green. Functional status hue (operational necessity, retuned into the v2.0 world); always paired with text + icon/shape. Raw brand scale; never in new work. */
  --rime-red-100: #f7deda; /* Red. Functional status hue (operational necessity, retuned into the v2.0 world); always paired with text + icon/shape. Raw brand scale; never in new work. */
  --rime-red-300: #e39189; /* Red. Functional status hue (operational necessity, retuned into the v2.0 world); always paired with text + icon/shape. Raw brand scale; never in new work. */
  --rime-red-500: #c4443d; /* Red. Functional status hue (operational necessity, retuned into the v2.0 world); always paired with text + icon/shape. Raw brand scale; never in new work. */
  --rime-red-600: #b0392f; /* Red. Functional status hue (operational necessity, retuned into the v2.0 world); always paired with text + icon/shape. Raw brand scale; never in new work. */
  --rime-red-700: #a62a22; /* Red. Functional status hue (operational necessity, retuned into the v2.0 world); always paired with text + icon/shape. Raw brand scale; never in new work. */
  --rime-zinc-50: #fafafa; /* Zinc, the dark-theme neutral field (Tailwind zinc). Raw brand scale; never in new work. */
  --rime-zinc-100: #f4f4f5; /* Zinc, the dark-theme neutral field (Tailwind zinc). Raw brand scale; never in new work. */
  --rime-zinc-200: #e4e4e7; /* Zinc, the dark-theme neutral field (Tailwind zinc). Raw brand scale; never in new work. */
  --rime-zinc-300: #d4d4d8; /* Zinc, the dark-theme neutral field (Tailwind zinc). Raw brand scale; never in new work. */
  --rime-zinc-400: #a1a1aa; /* Zinc, the dark-theme neutral field (Tailwind zinc). Raw brand scale; never in new work. */
  --rime-zinc-500: #71717a; /* Zinc, the dark-theme neutral field (Tailwind zinc). Raw brand scale; never in new work. */
  --rime-zinc-600: #52525b; /* Zinc, the dark-theme neutral field (Tailwind zinc). Raw brand scale; never in new work. */
  --rime-zinc-700: #3f3f46; /* Zinc, the dark-theme neutral field (Tailwind zinc). Raw brand scale; never in new work. */
  --rime-zinc-800: #27272a; /* Zinc, the dark-theme neutral field (Tailwind zinc). Raw brand scale; never in new work. */
  --rime-zinc-900: #18181b; /* Zinc, the dark-theme neutral field (Tailwind zinc). Raw brand scale; never in new work. */
  --rime-zinc-950: #09090b; /* Zinc, the dark-theme neutral field (Tailwind zinc). Raw brand scale; never in new work. */
  --rime-neutral-50: #fafaf7; /* Neutral, cool slate generic grey; prefer navy/frost. Raw brand scale; never in new work. */
  --rime-neutral-100: #f1f4f8; /* Neutral, cool slate generic grey; prefer navy/frost. Raw brand scale; never in new work. */
  --rime-neutral-200: #e2e8f0; /* Neutral, cool slate generic grey; prefer navy/frost. Raw brand scale; never in new work. */
  --rime-neutral-300: #c9d4e3; /* Neutral, cool slate generic grey; prefer navy/frost. Raw brand scale; never in new work. */
  --rime-neutral-400: #8ba0b8; /* Neutral, cool slate generic grey; prefer navy/frost. Raw brand scale; never in new work. */
  --rime-neutral-500: #5d7b9f; /* Neutral, cool slate generic grey; prefer navy/frost. Raw brand scale; never in new work. */
  --rime-neutral-600: #3d5e88; /* Neutral, cool slate generic grey; prefer navy/frost. Raw brand scale; never in new work. */
  --rime-neutral-700: #2a4a73; /* Neutral, cool slate generic grey; prefer navy/frost. Raw brand scale; never in new work. */
  --rime-neutral-800: #16233f; /* Neutral, cool slate generic grey; prefer navy/frost. Raw brand scale; never in new work. */
  --rime-neutral-900: #101b33; /* Neutral, cool slate generic grey; prefer navy/frost. Raw brand scale; never in new work. */
  --rime-neutral-950: #0a0e1a; /* Neutral, cool slate generic grey; prefer navy/frost. Raw brand scale; never in new work. */
  --rime-ink: #0a0e1a; /* Ink, Midnight. Raw brand scale; never in new work. */
  --rime-midnight: #0a0e1a; /* Midnight (وسط الليل), one of the seven brand anchors on the journey from night to light. Exact anchor, for specimens. Raw brand scale; never in new work. */
  --rime-deep-navy: #101b33; /* Deep Navy (كحلي عميق), one of the seven brand anchors on the journey from night to light. Exact anchor, for specimens. Raw brand scale; never in new work. */
  --rime-horizon: #1e3a5f; /* Horizon Blue (أزرق الأفق), one of the seven brand anchors on the journey from night to light. Exact anchor, for specimens. Raw brand scale; never in new work. */
  --rime-first-light: #f2762e; /* First Light (الضوء الأول), one of the seven brand anchors on the journey from night to light. Exact anchor, for specimens. Raw brand scale; never in new work. */
  --rime-amber-dawn: #f5a623; /* Amber Dawn (فجر عنبري), one of the seven brand anchors on the journey from night to light. Exact anchor, for specimens. Raw brand scale; never in new work. */
  --rime-clarity-white: #fafaf7; /* Clarity White (أبيض الوضوح), one of the seven brand anchors on the journey from night to light. Exact anchor, for specimens. Raw brand scale; never in new work. */
  --rime-frost: #c9d4e3; /* Rime Frost (الصقيع), one of the seven brand anchors on the journey from night to light. Exact anchor, for specimens. Raw brand scale; never in new work. */
  --bg-base: #f4f4f5; /* The 70% field: zinc-100 in light, zinc-950 in dark. App background; flat, no glow. */
  --bg-elevated: #ffffff; /* Menus and popovers. */
  --bg-hover: rgba(10,14,26,0.04); /* Hover wash on the field. */
  --surface-primary: #ffffff; /* Cards. Pair with a 1px border-color; never float on shadow alone. */
  --surface-secondary: #f1f4f8; /* Inner panels and table headers, the cool frost structure. */
  --surface-tertiary: #e7edf4; /* Input fill, a clear step from the card (dark: a clear step lighter than secondary). */
  --surface-hover: #f0f3f8; /* Hover wash. The dark value is a color-mix of zinc-800 and zinc-600, declared in components/bundle.css. */
  --surface-selected: rgba(242,118,46,0.08); /* Selected / active wash: First Light at 8% (dark 14%), with orange text. */
  --nav-bg: #52525b; /* Navigation rail background, a fixed #52525b in both themes (change log #33). */
  --nav-surface: #ffffff; /* User card / raised block on the rail. */
  --nav-border: #e2e8f0; /* Rail dividers and the rail edge. */
  --nav-text: var(--rime-zinc-50); /* Rail labels on nav-bg: 7.4:1 in light (change log #34). Dark #a1a1aa on nav-bg is 3.0:1, below 4.5:1; kept as the source has it. */
  --nav-text-strong: var(--rime-zinc-50); /* Wordmark, active avatar and user name on nav-bg, 7.4:1 in both themes. */
  --nav-muted: #6b84a3; /* Rail section labels, email, meta. On nav-bg this is 2.0:1 (light) and 1.6:1 (dark), below 4.5:1; kept as the source has it. */
  --nav-hover-bg: rgba(10,14,26,0.04); /* Rail item hover. */
  --nav-active-bg: #fbe3d3; /* Active nav pill, the First Light wash. */
  --nav-active-text: #dc6519; /* Active nav label on nav-active-bg: 2.9:1 (light) and 2.3:1 (dark), below 4.5:1; kept as the source has it. */
  --color-primary: #f2762e; /* First Light, the 5%: the primary action and the single most important thing on a surface. */
  --color-primary-hover: #dc6519; /* Primary hover. */
  --color-on-primary: #ffffff; /* White text on the First Light fill, brand parity with rime.sa. 2.8:1 on color-primary: a ratified brand exception to 4.5:1 (governance change log). */
  --accent-color: #f2762e; /* Accent, the same First Light as color-primary. */
  --color-error: #c4443d; /* Error text, icons and borders: 4.9:1 on surface-primary in light, 7.3:1 in dark. */
  --color-link: #2a4a73; /* Links on the surfaces: navy-600, 9.0:1 on surface-primary in light (7.7:1 in dark); moves toward First Light on hover. */
  --border-color: #e2e8f0; /* Default 1px border: navy-100 in light, zinc-700 in dark. */
  --border-color-strong: #c9d4e3; /* Strong border: Rime Frost in light, zinc-600 in dark. */
  --text-primary: #0a0e1a; /* Body text on bg-base and every surface: Midnight, 17.5:1 on the field in light; zinc-50 in dark (7.4:1 or more on every surface). */
  --text-secondary: #3d5e88; /* Content meta on bg-base and the surfaces: navy-500, 6.1:1 on the light field and 5.6:1 on surface-tertiary; zinc-300 in dark (5.2:1 or more). */
  --text-tertiary: #5d7b9f; /* WCAG-exempt only: placeholder, disabled, decorative meta; never content text. 4.0:1 on the light field, below 4.5:1, as the source intends. */
  --text-muted: #5d7b9f; /* Same as text-tertiary: WCAG-exempt uses only. */
  --text-inverse: #fafaf7; /* Text on inverted fills (Midnight in light, zinc-50 in dark). */
  --avatar-bg: #f1f4f8; /* Avatar fill. */
  --avatar-border: rgba(10,14,26,0.10); /* Avatar ring. */
  --focus-ring: var(--color-primary); /* Keyboard focus: a 2px ring in color-primary at 2px offset, always visible. */
  --overlay-active: rgba(10,14,26,0.12); /* Pressed overlay. */
  --body-gradient-1: rgba(242,118,46,0.05); /* Ambient backdrop wash, First Light on the field (gentle, never glowing). */
  --body-gradient-2: rgba(30,58,95,0.04); /* Ambient backdrop wash, Horizon on the field. */
  --scrollbar-track: rgba(10,14,26,0.03); /* Scrollbar track. */
  --scrollbar-thumb: rgba(10,14,26,0.14); /* Scrollbar thumb. */
  --scrollbar-thumb-hover: rgba(10,14,26,0.24); /* Scrollbar thumb on hover. */
  --info-bg: #e4ebf3; /* Info chip fill. Status family: solid chip in light, translucent chip on the zinc field in dark. Always colour + text + icon/shape. */
  --info-text: #1e3a5f; /* Info text on info-bg: 9.6:1 in light, 9.0:1 in dark. */
  --info-border: #c9d4e3; /* Info chip border. */
  --success-bg: #dcf1da; /* Success chip fill. Status family: solid chip in light, translucent chip on the zinc field in dark. Always colour + text + icon/shape. */
  --success-text: #1e6e2e; /* Success text on success-bg: 5.3:1 in light, 9.3:1 in dark. */
  --success-border: #bce9b9; /* Success chip border. */
  --warning-bg: #fdecd0; /* Warning chip fill. Status family: solid chip in light, translucent chip on the zinc field in dark. Always colour + text + icon/shape. */
  --warning-text: #8a4b0a; /* Warning text on warning-bg: 5.8:1 in light, 8.9:1 in dark. */
  --warning-border: #f8d9a6; /* Warning chip border. */
  --critical-bg: #f7deda; /* Critical chip fill. Status family: solid chip in light, translucent chip on the zinc field in dark. Always colour + text + icon/shape. */
  --critical-text: #a62a22; /* Critical text on critical-bg: 5.5:1 in light, 8.6:1 in dark. */
  --critical-border: #e8beb8; /* Critical chip border. */
  --rime-bg-app: var(--bg-base); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write bg-base in new work. */
  --rime-surface: var(--surface-primary); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write surface-primary in new work. */
  --rime-surface-muted: var(--surface-secondary); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write surface-secondary in new work. */
  --rime-text-primary: var(--text-primary); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write text-primary in new work. */
  --rime-text-secondary: var(--text-secondary); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write text-secondary in new work. */
  --rime-text-disabled: var(--text-tertiary); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write text-tertiary in new work. */
  --rime-text-inverse: var(--text-inverse); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write text-inverse in new work. */
  --rime-border-default: var(--border-color); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write border-color in new work. */
  --rime-border-strong: var(--border-color-strong); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write border-color-strong in new work. */
  --rime-action-primary-bg: var(--color-primary); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write color-primary in new work. */
  --rime-action-primary-text: var(--color-on-primary); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write color-on-primary in new work. */
  --rime-action-secondary-bg: var(--surface-secondary); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write surface-secondary in new work. */
  --rime-action-secondary-text: var(--text-primary); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write text-primary in new work. */
  --rime-action-link: var(--color-link); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write color-link in new work. */
  --rime-accent: var(--color-primary); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write color-primary in new work. */
  --rime-accent-strong: var(--color-primary-hover); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write color-primary-hover in new work. */
  --rime-focus-ring: var(--focus-ring); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write focus-ring in new work. */
  --rime-overlay-hover: var(--bg-hover); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write bg-hover in new work. */
  --rime-overlay-active: var(--overlay-active); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write overlay-active in new work. */
  --rime-info-bg: var(--info-bg); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write info-bg in new work. */
  --rime-info-text: var(--info-text); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write info-text in new work. */
  --rime-info-border: var(--info-border); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write info-border in new work. */
  --rime-success-bg: var(--success-bg); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write success-bg in new work. */
  --rime-success-text: var(--success-text); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write success-text in new work. */
  --rime-success-border: var(--success-border); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write success-border in new work. */
  --rime-warning-bg: var(--warning-bg); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write warning-bg in new work. */
  --rime-warning-text: var(--warning-text); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write warning-text in new work. */
  --rime-warning-border: var(--warning-border); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write warning-border in new work. */
  --rime-critical-bg: var(--critical-bg); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write critical-bg in new work. */
  --rime-critical-text: var(--critical-text); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write critical-text in new work. */
  --rime-critical-border: var(--critical-border); /* Legacy alias, deprecated back-compat; auto-flips with theme. Write critical-border in new work. */
  --rime-glass-tint: rgba(250,250,247,0.72); /* Glass veil for chrome over the field: Clarity White in light, zinc in dark. Frosted glass is for chrome floating over scrolling content only (.rime-glass in components/bundle.css). */
  --rime-glass-tint-strong: rgba(250,250,247,0.88); /* Stronger glass veil (.rime-glass-strong). Frosted glass is for chrome floating over scrolling content only (.rime-glass in components/bundle.css). */
  --rime-glass-tint-dark: rgba(10,14,26,0.72); /* Dark glass over imagery and video tiles (.rime-glass-dark). Frosted glass is for chrome floating over scrolling content only (.rime-glass in components/bundle.css). */
  --rime-glass-border: rgba(10,14,26,0.08); /* The hairline every glass surface keeps. Frosted glass is for chrome floating over scrolling content only (.rime-glass in components/bundle.css). */
  --rime-glass-scrim: rgba(10,14,26,0.44); /* Modal / drawer backdrop. */
  --rime-backdrop: var(--bg-base); /* App background: resolves to the flat field (bg-base). The ambient radial-blob backdrop is retired. */
  --rime-shadow-none: none; /* In-flow content. */
  --rime-shadow-sm: 0 1px 2px rgba(10, 14, 26, 0.06), 0 1px 1px rgba(10, 14, 26, 0.04); /* Raised: cards and tables. */
  --rime-shadow-md: 0 4px 12px rgba(10, 14, 26, 0.10), 0 1px 3px rgba(10, 14, 26, 0.06); /* Floating: menus and popovers. */
  --rime-shadow-lg: 0 16px 40px rgba(10, 14, 26, 0.16), 0 4px 12px rgba(10, 14, 26, 0.08); /* Overlaying: modals, drawers, the floating sidebar. */
}
[data-theme="dark"] {
  --bg-base: #09090b;
  --bg-elevated: #27272a;
  --bg-hover: rgba(255,255,255,0.10);
  --surface-primary: #18181b;
  --surface-secondary: #27272a;
  --surface-tertiary: #52525b;
  --surface-selected: rgba(242,118,46,0.14);
  --nav-bg: #52525b;
  --nav-surface: rgba(255,255,255,0.06);
  --nav-border: rgba(255,255,255,0.10);
  --nav-text: #a1a1aa;
  --nav-text-strong: #fafafa;
  --nav-muted: #71717a;
  --nav-hover-bg: rgba(255,255,255,0.06);
  --nav-active-bg: rgba(242,118,46,0.18);
  --nav-active-text: #f2762e;
  --color-on-primary: #ffffff;
  --color-error: #e39189;
  --color-link: #8facdc;
  --border-color: #3f3f46;
  --border-color-strong: #52525b;
  --text-primary: #fafafa;
  --text-secondary: #d4d4d8;
  --text-tertiary: #a1a1aa;
  --text-muted: #a1a1aa;
  --text-inverse: #09090b;
  --avatar-bg: #27272a;
  --avatar-border: rgba(255,255,255,0.14);
  --focus-ring: var(--color-primary);
  --overlay-active: rgba(255,255,255,0.14);
  --body-gradient-1: rgba(242,118,46,0.08);
  --body-gradient-2: rgba(255,255,255,0.03);
  --scrollbar-track: rgba(255,255,255,0.03);
  --scrollbar-thumb: rgba(255,255,255,0.18);
  --scrollbar-thumb-hover: rgba(255,255,255,0.28);
  --info-bg: rgba(143,172,220,0.18);
  --info-text: #b6c9e8;
  --info-border: rgba(143,172,220,0.40);
  --success-bg: rgba(63,168,71,0.18);
  --success-text: #8fd69a;
  --success-border: rgba(63,168,71,0.42);
  --warning-bg: rgba(245,166,35,0.18);
  --warning-text: #f5c066;
  --warning-border: rgba(245,166,35,0.42);
  --critical-bg: rgba(196,68,61,0.20);
  --critical-text: #eda79f;
  --critical-border: rgba(196,68,61,0.45);
  --rime-bg-app: var(--bg-base);
  --rime-surface: var(--surface-primary);
  --rime-surface-muted: var(--surface-secondary);
  --rime-text-primary: var(--text-primary);
  --rime-text-secondary: var(--text-secondary);
  --rime-text-disabled: var(--text-tertiary);
  --rime-text-inverse: var(--text-inverse);
  --rime-border-default: var(--border-color);
  --rime-border-strong: var(--border-color-strong);
  --rime-action-primary-bg: var(--color-primary);
  --rime-action-primary-text: var(--color-on-primary);
  --rime-action-secondary-bg: var(--surface-secondary);
  --rime-action-secondary-text: var(--text-primary);
  --rime-action-link: var(--color-link);
  --rime-accent: var(--color-primary);
  --rime-accent-strong: var(--color-primary-hover);
  --rime-focus-ring: var(--focus-ring);
  --rime-overlay-hover: var(--bg-hover);
  --rime-overlay-active: var(--overlay-active);
  --rime-info-bg: var(--info-bg);
  --rime-info-text: var(--info-text);
  --rime-info-border: var(--info-border);
  --rime-success-bg: var(--success-bg);
  --rime-success-text: var(--success-text);
  --rime-success-border: var(--success-border);
  --rime-warning-bg: var(--warning-bg);
  --rime-warning-text: var(--warning-text);
  --rime-warning-border: var(--warning-border);
  --rime-critical-bg: var(--critical-bg);
  --rime-critical-text: var(--critical-text);
  --rime-critical-border: var(--critical-border);
  --rime-glass-tint: rgba(24,24,27,0.72);
  --rime-glass-tint-strong: rgba(24,24,27,0.90);
  --rime-glass-tint-dark: rgba(9,9,11,0.78);
  --rime-glass-border: rgba(255,255,255,0.10);
  --rime-glass-scrim: rgba(0,0,0,0.58);
  --rime-backdrop: var(--bg-base);
}
:root {
  --rime-space-0: 0; /* Spacing step 0 on the 4px base grid. */
  --rime-space-1: 4px; /* Spacing step 1 on the 4px base grid. */
  --rime-space-2: 8px; /* Spacing step 2 on the 4px base grid. */
  --rime-space-3: 12px; /* Spacing step 3 on the 4px base grid. */
  --rime-space-4: 16px; /* Spacing step 4 on the 4px base grid. */
  --rime-space-5: 20px; /* Spacing step 5 on the 4px base grid. */
  --rime-space-6: 24px; /* Spacing step 6 on the 4px base grid. */
  --rime-space-8: 32px; /* Spacing step 8 on the 4px base grid. */
  --rime-space-10: 40px; /* Spacing step 10 on the 4px base grid. */
  --rime-space-12: 48px; /* Spacing step 12 on the 4px base grid. */
  --rime-space-16: 64px; /* Spacing step 16 on the 4px base grid. */
  --rime-space-20: 80px; /* Spacing step 20 on the 4px base grid. */
  --rime-row-comfortable: 56px; /* Table row height, comfortable density (§5.3). */
  --rime-row-compact: 44px; /* Table row height, compact density (§5.3). */
  --rime-row-dense: 36px; /* Table row height, dense density for control-room grids (§5.3). */
  --rime-touch-min: 44px; /* Minimum touch target (§8.1). */
  --rime-radius-none: 0; /* Square corners. */
  --rime-radius-xs: 4px; /* Checkbox box (18px): about a fifth of its side. Corners scale with the element and nest concentrically (governance §5). */
  --rime-radius-sm: 6px; /* Inputs. */
  --rime-radius-md: 8px; /* Cards. */
  --rime-radius-button: 12px; /* Buttons, every Button variant and size and IconButton: a plain circular corner (matches the product sign-in CTA); softer than cards. */
  --rime-radius-lg: 12px; /* Panels, drawers, tables. */
  --rime-radius-xl: 16px; /* Large surfaces. */
  --rime-radius-full: 999px; /* Pills, avatars, badges, status dots. */
  --rime-text-2xs: 11px; /* Metadata & times. Pairs with rime-lh-2xs. */
  --rime-text-xs: 12px; /* Helper & badges. Pairs with rime-lh-xs. */
  --rime-text-sm: 14px; /* Secondary text. Pairs with rime-lh-sm. */
  --rime-text-md: 16px; /* Default text. Pairs with rime-lh-md. */
  --rime-text-lg: 18px; /* Section heading. Pairs with rime-lh-lg. */
  --rime-text-xl: 24px; /* Page heading. Pairs with rime-lh-xl. */
  --rime-text-2xl: 32px; /* Page hero. Pairs with rime-lh-2xl. */
  --rime-text-3xl: 40px; /* Dashboard hero. Pairs with rime-lh-3xl. */
  --rime-lh-2xs: 16px; /* Line height for rime-text-2xs. */
  --rime-lh-xs: 16px; /* Line height for rime-text-xs. */
  --rime-lh-sm: 20px; /* Line height for rime-text-sm. */
  --rime-lh-md: 24px; /* Line height for rime-text-md. */
  --rime-lh-lg: 28px; /* Line height for rime-text-lg. */
  --rime-lh-xl: 32px; /* Line height for rime-text-xl. */
  --rime-lh-2xl: 40px; /* Line height for rime-text-2xl. */
  --rime-lh-3xl: 48px; /* Line height for rime-text-3xl. */
  --rime-weight-regular: 400; /* Body copy. */
  --rime-weight-medium: 500; /* Section headings, display Medium, labels. */
  --rime-weight-semibold: 600; /* Headings, display SemiBold, table headers, badges. */
  --rime-weight-bold: 700; /* Bold (IBM Plex Sans Arabic carries a 700 face). */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-display-arabic: "Alexandria", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-english: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --text-scale-3xl: 600 40px/48px var(--font-english); /* Dashboard hero: 40/48 · 600 (rime-text-3xl / rime-lh-3xl). */
  --text-scale-2xl: 600 32px/40px var(--font-english); /* Page hero: 32/40 · 600 (rime-text-2xl / rime-lh-2xl). */
  --text-scale-xl: 600 24px/32px var(--font-english); /* Page heading: 24/32 · 600 (rime-text-xl / rime-lh-xl). */
  --text-scale-lg: 500 18px/28px var(--font-english); /* Section heading: 18/28 · 500 (rime-text-lg / rime-lh-lg). */
  --text-scale-md: 400 16px/24px var(--font-english); /* Default text: 16/24 · 400 (rime-text-md / rime-lh-md). */
  --text-scale-sm: 400 14px/20px var(--font-english); /* Secondary text: 14/20 · 400 (rime-text-sm / rime-lh-sm). */
  --text-scale-xs: 400 12px/16px var(--font-english); /* Helper & badges: 12/16 · 400 (rime-text-xs / rime-lh-xs). */
  --text-scale-2xs: 400 11px/16px var(--font-english); /* Metadata & times: 11/16 · 400 (rime-text-2xs / rime-lh-2xs). */
  --text-display-hero: 600 44px/1.02 var(--font-display); /* Hero scale; may go all-caps (the master command). */
  --text-display-heading: 500 24px/1.02 var(--font-display); /* Content headline, sentence case. */
  --text-arabic-display: 600 34px/1.2 var(--font-display-arabic); /* Arabic display, Alexandria. */
  --text-arabic-heading: 600 19px/1.6 var(--font-arabic); /* Arabic heading, IBM Plex Sans Arabic. */
  --text-arabic-body: 400 16px/1.9 var(--font-arabic); /* Arabic body: ~1.9 line-height, never justified. */
  --text-data-log: 400 13px/1.7 var(--font-mono); /* Logs and data rows, wherever precise character alignment matters. */
}
.scale-3xl {
  font-family: var(--font-english);
  font-size: 40px;
  line-height: 48px;
  font-weight: 600;
  letter-spacing: 0;
}
.scale-2xl {
  font-family: var(--font-english);
  font-size: 32px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: 0;
}
.scale-xl {
  font-family: var(--font-english);
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: 0;
}
.scale-lg {
  font-family: var(--font-english);
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: 0;
}
.scale-md {
  font-family: var(--font-english);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.scale-sm {
  font-family: var(--font-english);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.scale-xs {
  font-family: var(--font-english);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
}
.scale-2xs {
  font-family: var(--font-english);
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
}
.display-hero {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.display-heading {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.arabic-display {
  font-family: var(--font-display-arabic);
  font-size: 34px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0;
}
.arabic-heading {
  font-family: var(--font-arabic);
  font-size: 19px;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: 0;
}
.arabic-body {
  font-family: var(--font-arabic);
  font-size: 16px;
  line-height: 1.9;
  font-weight: 400;
  letter-spacing: 0;
}
.data-log {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: 0;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Variable.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alexandria";
  src: url("fonts/Alexandria-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("fonts/IBMPlexSansArabic-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("fonts/IBMPlexSansArabic-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}