/*
 * tokens.css: EVERY value in the system. Nothing else holds a colour.
 * Light on :root, dark on :root.dark (the theme switch in the profile menu
 * sets the class on <html>). Values are the React build's, copied as they were
 * (index.css + ui.css, the ".om" design).
 */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("../fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
}
/* Arabic letters only (unicode-range), so Latin keeps its own fonts beside it */
@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("../fonts/noto-sans-arabic-arabic-wght-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  color-scheme: light;

  /* type */
  --font-body: "Figtree", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, sans-serif; /* navigation, headings */
  --font-brand: "Poppins", system-ui, sans-serif; /* the wordmark only */
  --font-mono: "Geist Mono", ui-monospace, monospace; /* ids, numbers */

  /* radius scale (the React build's --radius: 1rem) */
  --radius: 16px;
  --r-sm: 9.6px;
  --r-md: 12.8px;
  --r-lg: 16px;
  --r-field: 8px; /* slim fields in the agent screens */
  --r-pill: 999px;

  /* the page */
  --om-base: #e4e4e4;
  --om-ink: #1b2230;
  --om-ink-soft: rgba(27, 34, 48, 0.68);
  --om-bloom:
    radial-gradient(46% 42% at 14% 100%, rgba(236, 178, 168, 0.8) 0%, transparent 100%),
    radial-gradient(42% 44% at 40% 100%, rgba(232, 160, 192, 0.72) 0%, transparent 100%),
    radial-gradient(52% 50% at 76% 100%, rgba(202, 168, 242, 0.8) 0%, transparent 100%),
    linear-gradient(0deg, rgba(226, 204, 220, 0.55) 0%, rgba(228, 228, 228, 0) 42%);
  --om-dot: rgba(27, 34, 48, 0.13);

  /* surfaces */
  --om-tray: rgba(255, 255, 255, 0.45);
  --om-tray-edge: rgba(27, 34, 48, 0.08);
  --om-tray-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 30px -14px rgba(60, 40, 80, 0.25);
  --om-round: rgba(255, 255, 255, 0.55);
  --om-round-edge: rgba(27, 34, 48, 0.14);
  --om-glass: rgba(255, 255, 255, 0.34);
  --om-rim: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85);
  --om-card-shadow: 0 1px 2px rgba(27, 34, 48, 0.03), 0 14px 34px -16px rgba(27, 34, 48, 0.1);
  --om-field: linear-gradient(90deg, rgba(255, 255, 255, 0.94) 0%, rgba(252, 249, 255, 0.86) 100%);
  --om-field-edge: rgba(255, 255, 255, 0.95);
  --om-btn-c: #fff;
  --om-btn-c-ink: #25303f;
  --om-raised: #ffffff;
  --om-raised-shadow: 0 1px 2px rgba(27, 34, 48, 0.1), 0 4px 12px -6px rgba(27, 34, 48, 0.18);

  /* navigation */
  --om-edge: inset -1.5px 0 0 rgba(255, 255, 255, 0.85), 1px 0 0 rgba(27, 34, 48, 0.06);
  --om-select: rgba(27, 34, 48, 0.07);
  --om-accent: #7c5cc4;
  --om-nav-ink: rgba(27, 34, 48, 0.9);
  --om-nav-sub: rgba(27, 34, 48, 0.8);
  --om-nav-panel: rgba(255, 255, 255, 0.62);
  /* left navigation (redesigned 1 Oct): white panel, hairlines, quiet grey rows */
  --nav-bg: #ffffff;
  --nav-line: #eaeaea; /* right edge and under the logo */
  --nav-line-faint: rgba(0, 0, 0, 0.035); /* above Settings and the person row */
  --nav-text: #494949;
  --nav-text-strong: #222222;
  --nav-icon: #505050;
  --nav-label: #9e9e9e;
  --nav-sub: #a7a7a7;
  --nav-hover: #f8f8f8;
  --nav-active: #f6f6f6;
  --nav-logo: #282828;
  --nav-logo-ink: #ffffff;
  /* Agents list (board 10, "Agents list, visual exploration") */
  --ag-page: #f7f7f8;
  --ag-card: #ffffff;
  --ag-line: #ececef; /* card and tile edges */
  --ag-well: #fafafa; /* inner boxes */
  --ag-well-line: #f0f0f2;
  --ag-rule: #f4f4f5; /* above the card footer */
  --ag-ink: #18181b;
  --ag-ink-2: #3f3f46;
  --ag-muted: #71717a;
  --ag-faint: #a1a1aa;
  --ag-dot: #d4d4d8;
  --ag-btn-line: #e4e4e7;
  --ag-track: #efeff1;
  --ag-dark: #18181b; /* black buttons, selected tab, bars */
  --ag-dark-ink: #ffffff;
  --ag-hover: #f4f4f5;
  --ag-live: #16a34a;
  --ag-test: #f59e0b;
  --ag-draft: #e4e4e7;
  --ag-draft-ink: #3f3f46;
  --ag-red: #dc2626;
  --ag-danger: #d1544e; /* delete buttons and marks: a calmer red */
  --ag-danger-hover: #c24a44;
  --ag-note: #fffbeb;
  --ag-note-line: #fde7b0;
  --ag-note-ink: #b45309;
  --ag-set: #f7f7f8; /* setup chips (Option 2) */
  --ag-set-line: #eeeef0;
  --ag-i-blue: #2563eb;
  --ag-i-green: #16a34a;
  --ag-i-violet: #7c3aed;
  --ag-i-amber: #d97706;
  /* onboarding industry tiles: soft hues, one per industry (mixed with the card and ink where used) */
  --ob-hue-1: #4f86e8; /* Banking, blue */
  --ob-hue-2: #2a9d97; /* Insurance, teal */
  --ob-hue-3: #8a72e6; /* Telecom, lavender */
  --ob-hue-4: #5f9e6e; /* Government, sage */
  --ob-hue-5: #df6a86; /* Healthcare, rose */
  --ob-hue-6: #e5844a; /* Retail, peach */
  --ob-hue-7: #3a9fcf; /* Travel, sky */
  --ob-hue-8: #b8932a; /* Other, sand */
  --ag-on-colour: #ffffff; /* text and icons on the coloured chips and dots */
  /* voice pictures: a soft gradient behind the person (the canvas's four, plus two) */
  --ag-g1: linear-gradient(135deg, #fbcfe8, #f97316);
  --ag-g2: linear-gradient(135deg, #e9d5ff, #9333ea);
  --ag-g3: linear-gradient(135deg, #bfdbfe, #4f46e5);
  --ag-g4: linear-gradient(135deg, #bbf7d0, #0d9488);
  --ag-g5: linear-gradient(135deg, #fde68a, #f59e0b);
  --ag-g6: linear-gradient(135deg, #fecdd3, #e11d48);
  --ag-g7: linear-gradient(135deg, #a5f3fc, #0284c7);
  --ag-g8: linear-gradient(135deg, #d9f99d, #65a30d);
  /* channel discs: the canvas's blue and green gradients, white icon */
  --ag-phone-bg: linear-gradient(135deg, #78aef5, #5b97ee); /* a soft normal blue, gentle gradient */
  --ag-phone-ink: #ffffff;
  --ag-whatsapp-bg: linear-gradient(135deg, #48bf98, #2ea58c);
  --ag-whatsapp-cut: #35ac8f; /* the phone inside the WhatsApp bubble */
  --ag-whatsapp-ink: #ffffff;

  /* agent screens: slim fields, quiet tints, the plain content side */
  --om-field-2: #ffffff;
  --om-field-2-edge: rgba(27, 34, 48, 0.14);
  --om-soft-2: rgba(27, 34, 48, 0.035);
  --om-plain: #f7f7f8;
  --om-plain-veil: 78%; /* how much of the page gradient shows through */
  --om-solid: #fcfcfb; /* agent screens: warm off-white, so white fields stand out */
  --om-placeholder: rgba(27, 34, 48, 0.36);

  /* cards, menus, drawers, voices */
  --om-card: rgba(255, 255, 255, 0.62);
  --om-card-edge: rgba(27, 34, 48, 0.07);
  --om-menu-shadow: 0 2px 6px rgba(27, 34, 48, 0.06), 0 16px 36px -14px rgba(27, 34, 48, 0.24);
  --om-box: rgba(27, 34, 48, 0.045);
  --om-soft-btn: rgba(27, 34, 48, 0.07);
  --om-soft-btn-hover: rgba(27, 34, 48, 0.12);

  /* the shared semantic names (shadcn's), pointed at the palette above */
  --background: var(--om-base);
  --foreground: var(--om-ink);
  --popover: #f6f5f8;
  --popover-foreground: var(--om-ink);
  --primary: #25303f;
  --primary-foreground: #ffffff;
  --secondary: rgba(255, 255, 255, 0.6);
  --muted: rgba(27, 34, 48, 0.05);
  --muted-foreground: var(--om-ink-soft);
  --accent: rgba(255, 255, 255, 0.7);
  --border: rgba(27, 34, 48, 0.08);
  --input: rgba(27, 34, 48, 0.14);
  --switch-off: rgba(27, 34, 48, 0.24); /* a switch that's off: a clear grey track */
  --switch-thumb: #ffffff;
  --switch-thumb-shadow: 0 1px 2px rgba(27, 34, 48, 0.28), 0 0 0 0.5px rgba(27, 34, 48, 0.08);
  --ring: rgba(27, 34, 48, 0.25);
  --ring-soft: rgba(27, 34, 48, 0.125);
  --destructive: oklch(0.577 0.245 27.325);
  --success: oklch(0.627 0.194 149.214);
  --warning: oklch(0.769 0.188 70.08);
  --info: oklch(0.623 0.214 259.815);
  --tooltip: #1b2230;
  --tooltip-ink: #e4e4e4;
  --overlay: color-mix(in srgb, var(--om-ink) 14%, transparent);
  --menu-ring: rgba(27, 34, 48, 0.1);
  /* landing first fold (5 Oct 2026): the black box, and two accents to compare */
  --lp-night: #0b0b0c;
  --lp-night-ink: #fafafa;
  --lp-night-soft: rgba(250, 250, 250, 0.62);
  --lp-night-faint: rgba(250, 250, 250, 0.42);
  --lp-night-dot: rgba(255, 255, 255, 0.11);
  --lp-night-glass: rgba(255, 255, 255, 0.05);
  --lp-night-line: rgba(255, 255, 255, 0.1);
  --lp-night-glow: rgba(255, 255, 255, 0.07);
  --lp-teal: #0f766e;
  --lp-teal-soft: rgba(15, 118, 110, 0.1);
  --lp-sand: #b4612a;
  /* the test call: the phone's screen light, the voice orb, white on the call buttons */
  --lp-call-glow: rgba(13, 148, 136, 0.38);
  --lp-orb: radial-gradient(circle at 32% 28%, #ccfbf1 0%, #5eead4 22%, #0d9488 55%, #0f3d3a 100%);
  --lp-orb-glow: radial-gradient(circle, rgba(45, 212, 191, 0.75), rgba(13, 148, 136, 0) 70%);
  --lp-on: #ffffff;
  --lp-teal-ink: #5eead4; /* the agent's name over its words, on black */
  --lp-edge-colors: #5eead4, #22d3ee, #a3e635, #5eead4; /* the talk panel's edge while a call is live */
  /* the black capabilities versions (6 Oct 2026): card glass, the pointer's edge light,
     the trace's tracks, and the live signal (the same teal as the agent's name on black) */
  --lp-night-card: rgba(255, 255, 255, 0.035);
  --lp-night-hi: rgba(255, 255, 255, 0.3);
  --lp-night-track: rgba(255, 255, 255, 0.07);
  --lp-night-seg: rgba(255, 255, 255, 0.16);
  --lp-night-dash: rgba(255, 255, 255, 0.24);
  --lp-signal-glow: rgba(94, 234, 212, 0.5);
  --lp-signal-wash: rgba(94, 234, 212, 0.07);
  --lp-stop: #f87171;
  /* the gradient first fold (6 Oct 2026, from Ameer's Xpin AI card): sky blue at the top, a soft
     grey through the middle, warm peach at the bottom; dark words on it, white glass for its parts.
     The same in both themes, like the black box. */
  --lp-sky-1: #7eaddd;
  --lp-sky-2: #98bada;
  --lp-sky-3: #becad3;
  --lp-sky-4: #ddcdbb;
  --lp-sky-5: #e3b492;
  --lp-sky-ink: #12161c;
  --lp-sky-soft: rgba(18, 22, 28, 0.68);
  --lp-sky-faint: rgba(18, 22, 28, 0.46);
  --lp-sky-glass: rgba(255, 255, 255, 0.34);
  --lp-sky-line: rgba(255, 255, 255, 0.55);
  --lp-sky-teal: #0f766e; /* the black side's teal, deep enough to read on the sky */
  --lp-sky-teal-glow: rgba(15, 118, 110, 0.35);
  /* Sky's drifting lights: a white haze, a deeper blue and a warm peach, all soft */
  --lp-sky-air-white: rgba(255, 255, 255, 0.5);
  --lp-sky-air-blue: rgba(96, 150, 214, 0.38);
  --lp-sky-air-warm: rgba(244, 186, 140, 0.5);
  --lp-sky-air-0: rgba(255, 255, 255, 0);
  /* Sky, player: the card a near-white glass over the sky, its lift a cool shadow */
  --lp-sky-card: rgba(255, 255, 255, 0.72);
  --lp-sky-card-lift: 0 40px 90px -40px rgba(30, 50, 80, 0.35), 0 12px 30px -16px rgba(30, 50, 80, 0.16);
  /* the Product first fold (7 Oct 2026, from the website wireframe v6 hero): a white box washed
     violet from the top start corner and cyan from the top end corner, a faint violet hairline,
     the screenshot's lift; its voice wave a pale violet sheet. The same in both themes. */
  --lp-wf-violet: #f4efff;
  --lp-wf-violet-0: rgba(244, 239, 255, 0);
  --lp-wf-cyan: #e9f9fc;
  --lp-wf-cyan-0: rgba(233, 249, 252, 0);
  --lp-wf-top: #faf9ff;
  --lp-wf-base: #ffffff;
  --lp-wf-line: #ecebf3;
  --lp-wf-hair: rgba(18, 22, 28, 0.08);
  --lp-wf-glass: rgba(255, 255, 255, 0.72);
  --lp-wf-lift: 0 50px 110px -20px rgba(40, 20, 90, 0.28), 0 18px 40px -12px rgba(40, 20, 90, 0.14);
  --lp-wf-card-lift: 0 34px 70px -18px rgba(30, 20, 70, 0.32), 0 10px 24px -8px rgba(30, 20, 70, 0.12);
  --lp-wf-ring: rgba(22, 163, 74, 0.35);
  --lp-wf-ink-2: rgba(18, 22, 28, 0.8);
  --lp-wf-edge: #e2e1ea;
  --lp-wf-band: rgba(255, 255, 255, 0.86);
  --lp-wf-band-lift: 0 -24px 48px -24px rgba(40, 20, 90, 0.16);
  --lp-wf-icon: #6d5bd0;
  --lp-wf-sheet: #ddd3fa;
  /* the wave's tint, a shade deeper than the washes it sits on: violet at the start, cyan at the end */
  --lp-wf-tint-violet: #9d86f0;
  --lp-wf-tint-cyan: #6cc6dd;
  --lp-wf-haze: #f6f3ff;
  --lp-wf-red: #dc2626;
  /* a passed rule and a good change on the light stages (8 Oct 2026, Analytics Cards) */
  --lp-wf-ok: #16a34a;
  /* the headline's second half on the light box: soft, but clearly readable */
  --lp-wf-accent: rgba(18, 22, 28, 0.64);
  --lp-wf-well: #f6f6f8;
  /* Savings and pricing: the currency switch's track on the light ROI card (the light theme's --om-soft-2) */
  --lp-sv-seg-track: rgba(27, 34, 48, 0.035);
  /* frosted glass (7 Oct 2026): first made for the hero's screen and call card (both reverted to
     solid the same day); still used by the run section's alert card (.lp-run-alert) */
  --lp-wf-frost-card: rgba(255, 255, 255, 0.6);
  --lp-wf-frost-edge: rgba(255, 255, 255, 0.85);
  --lp-wf-frost-blur: blur(22px) saturate(1.6);
  /* a pale calm behind the words, so the voice wave never fights them (7 Oct 2026) */
  --lp-wf-calm: rgba(255, 255, 255, 0.5);
  --lp-wf-calm-0: rgba(255, 255, 255, 0);
  /* a dusk sky (7 Oct 2026, Ameer's reference, on trial): indigo at the top, through lilac and
     dusty rose, to peach and cream at the bottom. Used by the Product screens stage only. */
  --lp-dusk-1: #6569aa;
  --lp-dusk-2: #7373aa;
  --lp-dusk-3: #8879ab;
  --lp-dusk-4: #9a83ad;
  --lp-dusk-5: #b08fad;
  --lp-dusk-6: #cca0af;
  --lp-dusk-7: #f0bab3;
  --lp-dusk-8: #f7cfb4;
  --lp-dusk-9: #f6dbb2;
  --lp-dusk-glow: rgba(255, 236, 205, 0.55);
  /* Sky (8 Oct 2026, from Ameer's reference picture): paper grain, a soft cloud; its accent the
     coral. Same in both themes. Retinted later the same day from his second picture: a soft blue
     at the top through lavender to a cool near-white foot (was pale sage to cream). */
  --lp-sky2-top: #a7c2e7;
  --lp-sky2-mid: #cfd7f7;
  --lp-sky2-low: #dfe1f3;
  --lp-sky2-foot: #ebeaf0;
  --lp-sky2-cloud: rgba(246, 246, 251, 0.85);
  --lp-sky2-coral: #db7352;
  --lp-sky2-coral-2: #e8946f;
  --lp-sky2-dot: #3d5c5a;
  --lp-sky2-dot-2: #ffffff;
  --lp-sky2-hair: rgba(20, 40, 40, 0.12);
  --lp-sky2-soft: rgba(18, 30, 32, 0.62);
  --lp-sky2-card: rgba(255, 255, 255, 0.72);
  --lp-sky2-edge: rgba(255, 255, 255, 0.9);
  --lp-dusk-glow-0: rgba(255, 236, 205, 0);
  --lp-dusk-edge: rgba(255, 255, 255, 0.28);
  /* Dusk · Full width first fold (7 Oct 2026, from Ameer's reference): a dusk sky, indigo violet at
     the top melting through mauve into warm peach, soft cloud streaks (light and plum), a fine grain;
     white words on it, glass for the pill, the second button and the stats band */
  --lp-dusk-top: #574f80;
  --lp-dusk-upper: #6c5f8b;
  --lp-dusk-mid: #937690;
  --lp-dusk-low: #a77f86;
  --lp-dusk-warm: #c38b76;
  --lp-dusk-streak: rgba(255, 228, 232, 0.26);
  --lp-dusk-streak-0: rgba(255, 228, 232, 0);
  --lp-dusk-plum: rgba(70, 44, 82, 0.34);
  --lp-dusk-plum-0: rgba(70, 44, 82, 0);
  --lp-dusk-rust: rgba(140, 72, 62, 0.46);
  --lp-dusk-rust-0: rgba(150, 82, 70, 0);
  --lp-dusk-grain: 0.3;
  --lp-dusk-ink: #ffffff;
  --lp-dusk-soft: rgba(255, 255, 255, 0.86);
  --lp-dusk-faint: rgba(236, 233, 240, 0.66);
  --lp-dusk-glass: rgba(255, 255, 255, 0.12);
  --lp-dusk-glass-hover: rgba(255, 255, 255, 0.2);
  --lp-dusk-line: rgba(255, 255, 255, 0.26);
  --lp-dusk-band: rgba(255, 255, 255, 0.1);
  --lp-dusk-band-lift: 0 -24px 48px -24px rgba(50, 30, 60, 0.22);
  --lp-dusk-icon-bg: rgba(255, 255, 255, 0.16);
  /* the night after the dusk (7 Oct 2026, Ready for enterprise under Analytics): the dusk's last
     warm colour, through plum and indigo, into night; the lamp, lit on black */
  --lp-eve-plum: #6a4a68;
  --lp-eve-indigo: #261f35;
  --lp-eve-night: #0d0c12;
  /* 9 Oct 2026 (Ameer): the lamp is a light maroon, from the plum behind it, no longer peach */
  --lp-eve-lamp: #e2c6dc;
  --lp-eve-lamp-soft: rgba(226, 198, 220, 0.14);
  --lp-eve-lamp-line: rgba(226, 198, 220, 0.42);
  --lp-eve-lamp-glow: rgba(226, 198, 220, 0.22);
  /* the footer's Closing frame (7 Oct 2026): the first fold's box washed from the bottom corners,
     the name set huge in the washes' deeper violet and cyan, melting into the box */
  --lp-ft-word-a: rgba(157, 134, 240, 0.5);
  --lp-ft-word-b: rgba(108, 198, 221, 0.5);
  --lp-ft-word-0: rgba(255, 255, 255, 0);
  --lp-ft-icon-bg: rgba(255, 255, 255, 0.8);
  /* the black first fold's voice wave (6 Oct 2026): the sheet, the cool light on it, and the
     haze it fades into */
  --lp-field-sheet: #17191d;
  --lp-field-light: #dbe4f0;
  --lp-field-haze: #0b0b0c;
}

:root.dark {
  color-scheme: dark;

  --om-base: #15191c;
  --om-ink: #f4f2f7;
  --om-ink-soft: rgba(238, 241, 247, 0.74);
  --om-bloom:
    radial-gradient(38% 30% at 52% 104%, rgba(176, 160, 170, 0.55) 0%, transparent 100%),
    radial-gradient(42% 48% at 34% 100%, rgba(128, 80, 132, 0.75) 0%, transparent 100%),
    radial-gradient(40% 46% at 70% 100%, rgba(122, 84, 70, 0.7) 0%, transparent 100%),
    radial-gradient(85% 80% at 50% 110%, rgba(84, 56, 84, 0.85) 0%, rgba(40, 32, 44, 0.6) 55%, transparent 100%);
  --om-dot: rgba(255, 255, 255, 0.09);

  --om-tray: rgba(255, 255, 255, 0.045);
  --om-tray-edge: rgba(255, 255, 255, 0.09);
  --om-tray-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 30px -12px rgba(0, 0, 0, 0.5);
  --om-round: rgba(255, 255, 255, 0.04);
  --om-round-edge: rgba(255, 255, 255, 0.12);
  --om-glass: rgba(255, 255, 255, 0.045);
  --om-rim: 0 0 0 0 transparent;
  --om-card-shadow: 0 0 0 0 transparent;
  --om-field: rgba(255, 255, 255, 0.045);
  --om-field-edge: rgba(255, 255, 255, 0.12);
  --om-btn-c: #0d121c;
  --om-btn-c-ink: #fff;
  --om-raised: rgba(255, 255, 255, 0.12);
  --om-raised-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);

  --om-edge: inset -1px 0 0 rgba(255, 255, 255, 0.09);
  --om-select: rgba(255, 255, 255, 0.07);
  --om-accent: #b9a2f4;
  --om-nav-ink: rgba(244, 242, 247, 0.86);
  --om-nav-sub: rgba(244, 242, 247, 0.76);
  --om-nav-panel: var(--om-glass);
  --nav-bg: #131517;
  --nav-line: rgba(255, 255, 255, 0.08);
  --nav-line-faint: rgba(255, 255, 255, 0.05);
  --nav-text: rgba(255, 255, 255, 0.7);
  --nav-text-strong: #f2f2f3;
  --nav-icon: rgba(255, 255, 255, 0.66);
  --nav-label: rgba(255, 255, 255, 0.38);
  --nav-sub: rgba(255, 255, 255, 0.42);
  --nav-hover: rgba(255, 255, 255, 0.04);
  --nav-active: rgba(255, 255, 255, 0.07);
  --nav-logo: #f2f2f3;
  --nav-logo-ink: #131517;
  --ag-page: #0f1012;
  --ag-card: #17181b;
  --ag-line: rgba(255, 255, 255, 0.08);
  --ag-well: rgba(255, 255, 255, 0.03);
  --ag-well-line: rgba(255, 255, 255, 0.06);
  --ag-rule: rgba(255, 255, 255, 0.06);
  --ag-ink: #f4f4f5;
  --ag-ink-2: #d4d4d8;
  --ag-muted: #a1a1aa;
  --ag-faint: #71717a;
  --ag-dot: #52525b;
  --ag-btn-line: rgba(255, 255, 255, 0.12);
  --ag-track: rgba(255, 255, 255, 0.1);
  --ag-dark: #f4f4f5;
  --ag-dark-ink: #18181b;
  --ag-hover: rgba(255, 255, 255, 0.06);
  --ag-draft: rgba(255, 255, 255, 0.12);
  --ag-draft-ink: #e4e4e7;
  --ag-red: #f87171;
  --ag-danger: #d9645e;
  --ag-danger-hover: #e2736d;
  --ag-note: rgba(245, 158, 11, 0.1);
  --ag-note-line: rgba(245, 158, 11, 0.3);
  --ag-note-ink: #fbbf24;
  --ag-set: rgba(255, 255, 255, 0.04);
  --ag-set-line: rgba(255, 255, 255, 0.08);

  --om-field-2: rgba(255, 255, 255, 0.03);
  --om-field-2-edge: rgba(255, 255, 255, 0.12);
  --om-soft-2: rgba(255, 255, 255, 0.04);
  --om-plain: #16191c;
  --om-plain-veil: 82%;
  --om-solid: #16191c;
  --om-placeholder: rgba(255, 255, 255, 0.32);

  --om-card: rgba(255, 255, 255, 0.035);
  --om-card-edge: rgba(255, 255, 255, 0.08);
  --om-menu-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.6);
  --om-box: rgba(255, 255, 255, 0.05);
  --om-soft-btn: rgba(255, 255, 255, 0.08);
  --om-soft-btn-hover: rgba(255, 255, 255, 0.14);

  --popover: #1f2428;
  --primary: #f3f5fa;
  --primary-foreground: #0d121c;
  --secondary: rgba(255, 255, 255, 0.08);
  --muted: rgba(255, 255, 255, 0.05);
  --accent: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.09);
  --input: rgba(255, 255, 255, 0.12);
  --switch-off: rgba(255, 255, 255, 0.24);
  --switch-thumb: #f4f4f5;
  --switch-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  --ring: rgba(255, 255, 255, 0.32);
  --ring-soft: rgba(255, 255, 255, 0.16);
  --destructive: oklch(0.704 0.191 22.216);
  --success: oklch(0.723 0.219 149.579);
  --warning: oklch(0.828 0.189 84.429);
  --info: oklch(0.707 0.165 254.624);
  --tooltip: #f4f2f7;
  --tooltip-ink: #15191c;
  --menu-ring: rgba(255, 255, 255, 0.1);
  --lp-night: #000000;
  --lp-night-line: rgba(255, 255, 255, 0.12);
  --lp-teal: #2dd4bf;
  --lp-teal-soft: rgba(45, 212, 191, 0.12);
  --lp-sand: #e0a16b;
}

/* Arabic (js/i18n.js sets <html lang="ar" dir="rtl">): Arabic letters in
   Noto Sans Arabic, Latin and figures stay in the house fonts beside them. */
:root:lang(ar) {
  --font-body: "Figtree", "Noto Sans Arabic", system-ui, sans-serif;
  --font-ui: "Inter", "Noto Sans Arabic", system-ui, sans-serif;
  --font-mono: "Geist Mono", "Noto Sans Arabic", ui-monospace, monospace;
}