/* ==========================================================================
   ULASPACE DESIGN SYSTEM — TOKENS
   Generated from the Figma source file "UlaSpace — Design System"
   (uploads/UlaSpace - Design System.fig, exported 2026-09-16).

   Every value below is the literal value read out of the Figma variable
   collections: Primitives (62), Color (104 · Light/Dark), Spacing (22),
   Shape (9), Typography (23), Motion (8).

   Naming mirrors Figma 1:1 — Figma `surface/page` becomes `--ula-surface-page`.
   Theme: prefers-color-scheme is the default; [data-theme] / .dark override it.
   ========================================================================== */

/* --- FONTS -------------------------------------------------------------- */
/* Cairo is self-hosted. Drop the woff2 files in public/fonts/cairo/.
   Download: https://fonts.google.com/specimen/Cairo (Latin + Arabic subsets)
   IBM Plex Sans / Mono stay on the Google CDN — swap the same way if needed. */
/* @import must be the first rule in the stylesheet (CSS spec) — anything
   ahead of it, @font-face included, makes conformant parsers drop it. */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700;800&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/cairo/cairo-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Cairo';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/cairo/cairo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

html {
  font-family: 'Cairo', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ula-text-primary);
  background-color: var(--ula-surface-page);
  -webkit-font-smoothing: antialiased;
}

[dir="rtl"], [lang="ar"], html[dir="rtl"] body {
  font-family: 'Cairo', 'IBM Plex Sans Arabic', sans-serif;
}

[dir="ltr"], [lang="en"], html[dir="ltr"] body {
  font-family: 'IBM Plex Sans', 'Cairo', sans-serif;
}

body, button, input, select, textarea, optgroup {
  font-family: inherit;
}

:root {
  /* ======================================================================
     PRIMITIVES  (Figma collection "Primitives")
     ====================================================================== */

  /* Palm — brand green ramp */
  --ula-palm-50:  #f0f4f0;
  --ula-palm-100: #dbe6dd;
  --ula-palm-200: #b6c9bb;
  --ula-palm-300: #8baa94;
  --ula-palm-400: #5e8a6c;
  --ula-palm-500: #3c6b4c;
  --ula-palm-600: #2a5439;
  --ula-palm-700: #1e412f;
  --ula-palm-800: #1b3223;
  --ula-palm-900: #142b24;
  --ula-palm-950: #0e1c17;
  --ula-palm-chrome: #17221f;

  /* Sand — warm paper ramp */
  --ula-sand-50:  #fbf8f2;
  --ula-sand-100: #f9f6ef;
  --ula-sand-200: #f4ede1;
  --ula-sand-300: #ede6d9;
  --ula-sand-400: #e3d2bb;
  --ula-sand-500: #d6c0a2;
  --ula-sand-600: #c3a882;

  /* Stone — neutral ramp */
  --ula-stone-100: #e8e4dc;
  --ula-stone-200: #d9d3c8;
  --ula-stone-300: #c1b6a6;
  --ula-stone-400: #a49889;
  --ula-stone-500: #857a6c;
  --ula-stone-600: #665d52;
  --ula-stone-700: #4a443c;

  /* Gold — highlight ramp */
  --ula-gold-200: #f0dfbc;
  --ula-gold-300: #e6c88b;
  --ula-gold-400: #d3a553;
  --ula-gold-500: #b98a37;
  --ula-gold-600: #946c27;

  /* Terracotta — danger / warm attention ramp */
  --ula-terracotta-200: #ecc9ae;
  --ula-terracotta-300: #d99a6c;
  --ula-terracotta-400: #b46c34;
  --ula-terracotta-500: #9a5827;
  --ula-terracotta-600: #7d451d;

  --ula-white: #ffffff;
  --ula-black: #0b1410;

  /* Alphas */
  --ula-alpha-ivory-8:  rgba(237, 230, 217, 0.08);
  --ula-alpha-ivory-10: rgba(237, 230, 217, 0.10);
  --ula-alpha-ivory-14: rgba(237, 230, 217, 0.14);
  --ula-alpha-ivory-16: rgba(237, 230, 217, 0.16);
  --ula-alpha-ivory-18: rgba(237, 230, 217, 0.18);
  --ula-alpha-ivory-30: rgba(237, 230, 217, 0.30);
  --ula-alpha-page-35:  rgba(251, 248, 242, 0.35);
  --ula-alpha-page-72:  rgba(251, 248, 242, 0.72);
  --ula-alpha-palm-950-48: rgba(14, 28, 23, 0.48);
  --ula-alpha-palm-950-62: rgba(14, 28, 23, 0.62);
  --ula-alpha-palm-950-72: rgba(14, 28, 23, 0.72);
  --ula-alpha-palm-400-14: rgba(94, 138, 108, 0.14);
  --ula-alpha-gold-400-18: rgba(211, 165, 83, 0.18);
  --ula-alpha-terracotta-400-20: rgba(180, 108, 52, 0.20);
  --ula-alpha-shadow-6:  rgba(27, 50, 35, 0.06);
  --ula-alpha-shadow-10: rgba(27, 50, 35, 0.10);
  --ula-alpha-shadow-14: rgba(27, 50, 35, 0.14);
  --ula-alpha-shadow-18: rgba(27, 50, 35, 0.18);
  --ula-alpha-shadow-22: rgba(27, 50, 35, 0.22);
  --ula-alpha-black-50: rgba(0, 0, 0, 0.50);
  --ula-alpha-black-55: rgba(0, 0, 0, 0.55);
  --ula-alpha-black-60: rgba(0, 0, 0, 0.60);

  /* ======================================================================
     TYPOGRAPHY  (Figma collection "Typography")
     ====================================================================== */
  --ula-font-ar:   'Cairo', 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
  --ula-font-en:   'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ula-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --ula-font-family: var(--ula-font-ar);

  --ula-size-display-lg: 56px;
  --ula-size-display:    44px;
  --ula-size-h1:         34px;
  --ula-size-h2:         26px;
  --ula-size-h3:         21px;
  --ula-size-h4:         18px;
  --ula-size-body-lg:    17px;
  --ula-size-body:       15px;
  --ula-size-sm:         13px;
  --ula-size-xs:         12px;
  --ula-size-label:      11px;
  /* English companion line sizes */
  --ula-size-display-en: 24px;
  --ula-size-h1-en:      18px;
  --ula-size-h2-en:      15px;
  --ula-size-body-en:    14px;

  --ula-weight-light:    300;
  --ula-weight-regular:  400;
  --ula-weight-medium:   500;
  --ula-weight-semibold: 600;
  --ula-weight-bold:     700;

  /* Line heights carried by the Figma text styles */
  --ula-lh-display: 1.25;
  --ula-lh-heading: 1.4;
  --ula-lh-hero:    1.3;
  --ula-lh-body:    1.6;
  --ula-lh-en:      1.5;
  --ula-lh-metric:  1.1;
  --ula-tracking-brand: 0.14em; /* Label/Brand, uppercase */

  /* ======================================================================
     SPACING & LAYOUT  (Figma collection "Spacing")
     ====================================================================== */
  --ula-space-0:  0px;
  --ula-space-1:  2px;
  --ula-space-2:  4px;
  --ula-space-3:  8px;
  --ula-space-4:  12px;
  --ula-space-5:  16px;
  --ula-space-6:  20px;
  --ula-space-7:  24px;
  --ula-space-8:  32px;
  --ula-space-9:  40px;
  --ula-space-10: 48px;
  --ula-space-11: 64px;
  --ula-space-12: 80px;
  --ula-space-13: 96px;
  --ula-space-14: 128px;

  --ula-layout-gutter:    var(--ula-space-7);  /* 24 */
  --ula-layout-card-pad:  var(--ula-space-6);  /* 20 */
  --ula-layout-panel-pad: var(--ula-space-7);  /* 24 */
  --ula-layout-section-y: var(--ula-space-12); /* 80 */
  --ula-layout-container-max:    1280px;
  --ula-layout-container-narrow: 880px;
  --ula-size-touch-target: 44px;
  --ula-grid-columns: 12;

  /* ======================================================================
     SHAPE  (Figma collection "Shape")
     ====================================================================== */
  --ula-radius-xs:   6px;
  --ula-radius-sm:   10px;
  --ula-radius-md:   14px;
  --ula-radius-lg:   20px;
  --ula-radius-xl:   28px;
  --ula-radius-pill: 999px;
  --ula-border-width-hairline: 1px;
  --ula-border-width-thick:    1.5px;
  --ula-blur-panel: 14px;

  /* ======================================================================
     MOTION  (Figma collection "Motion")
     ====================================================================== */
  --ula-duration-instant: 90ms;
  --ula-duration-fast:    160ms;
  --ula-duration-base:    240ms;
  --ula-duration-slow:    360ms;
  --ula-duration-ambient: 700ms;
  --ula-ease-out:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --ula-ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ula-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);

  /* ======================================================================
     ELEVATION  (Figma effect styles)
     ====================================================================== */
  --ula-shadow-xs: 0 1px 2px 0 var(--ula-shadow-xs-color);
  --ula-shadow-sm: 0 2px 8px -2px var(--ula-shadow-sm-color);
  --ula-shadow-md: 0 8px 24px -8px var(--ula-shadow-md-color);
  --ula-shadow-lg: 0 20px 48px -12px var(--ula-shadow-lg-color);
  --ula-shadow-xl: 0 32px 80px -16px var(--ula-shadow-xl-color);
  --ula-shadow-on-map: 0 8px 24px -8px var(--ula-shadow-on-map-color);
  --ula-focus-ring:         0 0 0 2px var(--ula-focus-gap), 0 0 0 4px var(--ula-focus-ring-color);
  --ula-focus-ring-on-dark: 0 0 0 2px var(--ula-focus-gap-on-dark), 0 0 0 4px var(--ula-focus-ring-color);
  --ula-backdrop-blur: blur(var(--ula-blur-panel));

  /* ======================================================================
     SEMANTIC — LIGHT  (Figma collection "Color", mode: Light)
     ====================================================================== */
  --ula-surface-page:        var(--ula-sand-50);
  --ula-surface-page-alt:    var(--ula-sand-200);
  --ula-surface-card:        var(--ula-sand-100);
  --ula-surface-raised:      var(--ula-white);
  --ula-surface-sunken:      var(--ula-sand-200);
  --ula-surface-hover:       var(--ula-sand-200);
  --ula-surface-pressed:     var(--ula-sand-300);
  --ula-surface-dark:        var(--ula-palm-900);
  --ula-surface-dark-alt:    var(--ula-palm-800);
  --ula-surface-accent-soft: var(--ula-palm-50);
  --ula-surface-gold-soft:   var(--ula-gold-200);
  --ula-surface-danger-soft: var(--ula-terracotta-200);
  --ula-surface-warm:        var(--ula-sand-400);
  --ula-surface-overlay:     var(--ula-alpha-palm-950-48);
  --ula-surface-capsule:     var(--ula-alpha-palm-950-62);
  --ula-surface-capsule-strong: var(--ula-alpha-palm-950-72);
  --ula-surface-map-chrome:  var(--ula-palm-chrome);
  --ula-surface-map-canvas:  var(--ula-palm-950);

  --ula-text-primary:        var(--ula-palm-900);
  --ula-text-strong:         var(--ula-palm-800);
  --ula-text-body:           var(--ula-stone-700);
  --ula-text-secondary:      var(--ula-stone-600);
  --ula-text-muted:          var(--ula-stone-500);
  --ula-text-disabled:       var(--ula-stone-400);
  --ula-text-on-dark:        var(--ula-sand-100);
  --ula-text-on-dark-muted:  var(--ula-sand-400);
  --ula-text-on-dark-subtle: var(--ula-stone-300);
  --ula-text-on-accent:      var(--ula-sand-50);
  --ula-text-on-gold:        var(--ula-palm-900);
  --ula-text-on-cta:         var(--ula-palm-900);
  --ula-text-link:           var(--ula-palm-600);
  --ula-text-link-hover:     var(--ula-palm-800);
  --ula-text-danger:         var(--ula-terracotta-600);

  --ula-border-subtle:        var(--ula-stone-100);
  --ula-border-default:       var(--ula-stone-200);
  --ula-border-strong:        var(--ula-stone-300);
  --ula-border-hover:         var(--ula-stone-500);
  --ula-border-focus:         var(--ula-palm-500);
  --ula-border-danger:        var(--ula-terracotta-400);
  --ula-border-on-dark:       var(--ula-alpha-ivory-18);
  --ula-border-on-dark-subtle: var(--ula-alpha-ivory-10);

  --ula-accent-default: var(--ula-palm-700);
  --ula-accent-hover:   var(--ula-palm-600);
  --ula-accent-press:   var(--ula-palm-800);
  --ula-accent-fg:      var(--ula-sand-50);

  --ula-highlight-default: var(--ula-gold-400);
  --ula-highlight-ink:     var(--ula-gold-600);

  --ula-status-success:         var(--ula-palm-500);
  --ula-status-success-on-dark: var(--ula-palm-300);
  --ula-status-warning:         var(--ula-gold-500);
  --ula-status-danger:          var(--ula-terracotta-500);
  --ula-status-danger-hover:    var(--ula-terracotta-600);
  --ula-status-info:            var(--ula-palm-400);

  --ula-focus-ring-color:   var(--ula-gold-400);
  --ula-focus-gap:          var(--ula-sand-50);
  --ula-focus-gap-on-dark:  var(--ula-palm-900);

  --ula-icon-primary:     var(--ula-palm-800);
  --ula-icon-secondary:   var(--ula-stone-600);
  --ula-icon-muted:       var(--ula-stone-500);
  --ula-icon-subtle:      var(--ula-stone-300);
  --ula-icon-disabled:    var(--ula-stone-400);
  --ula-icon-accent:      var(--ula-palm-600);
  --ula-icon-highlight:   var(--ula-gold-500);
  --ula-icon-danger:      var(--ula-terracotta-400);
  --ula-icon-on-dark:     var(--ula-sand-100);
  --ula-icon-on-dark-subtle: var(--ula-stone-300);
  --ula-icon-on-accent:   var(--ula-sand-50);

  --ula-brand-mark-green: var(--ula-palm-700);
  --ula-brand-mark-ivory: var(--ula-sand-100);

  /* Tonal pairs — badges, avatars, status blocks */
  --ula-tone-palm-bg:  var(--ula-palm-100);
  --ula-tone-palm-fg:  var(--ula-palm-700);
  --ula-tone-palm-dot: var(--ula-palm-500);
  --ula-tone-gold-bg:  var(--ula-gold-200);
  --ula-tone-gold-fg:  var(--ula-gold-600);
  --ula-tone-gold-dot: var(--ula-gold-400);
  --ula-tone-terracotta-bg:  var(--ula-terracotta-200);
  --ula-tone-terracotta-fg:  var(--ula-terracotta-600);
  --ula-tone-terracotta-dot: var(--ula-terracotta-400);
  --ula-tone-stone-bg:  var(--ula-stone-100);
  --ula-tone-stone-fg:  var(--ula-stone-700);
  --ula-tone-stone-dot: var(--ula-stone-400);
  --ula-tone-sand-bg:   var(--ula-sand-400);
  --ula-tone-sand-fg:   var(--ula-terracotta-600);

  /* Controls on dark chrome */
  --ula-control-dark-fill:          var(--ula-alpha-ivory-8);
  --ula-control-dark-fill-strong:   var(--ula-alpha-ivory-10);
  --ula-control-dark-fill-strong-hover: var(--ula-alpha-ivory-18);
  --ula-control-dark-fill-hover:    var(--ula-alpha-ivory-16);
  --ula-control-dark-border:        var(--ula-alpha-ivory-16);
  --ula-control-dark-border-subtle: var(--ula-alpha-ivory-14);
  --ula-control-cta-on-dark:        var(--ula-sand-300);
  --ula-control-cta-on-dark-hover:  var(--ula-sand-100);
  --ula-control-track-off:          var(--ula-stone-300);

  --ula-media-stripe-a: var(--ula-sand-400);
  --ula-media-stripe-b: var(--ula-sand-500);
  --ula-media-label-bg: var(--ula-alpha-page-72);
  --ula-media-label-fg: var(--ula-stone-700);
  --ula-spinner-track:  var(--ula-alpha-page-35);
  --ula-spinner-head:   var(--ula-sand-50);

  --ula-shadow-xs-color: var(--ula-alpha-shadow-6);
  --ula-shadow-sm-color: var(--ula-alpha-shadow-10);
  --ula-shadow-md-color: var(--ula-alpha-shadow-14);
  --ula-shadow-lg-color: var(--ula-alpha-shadow-18);
  --ula-shadow-xl-color: var(--ula-alpha-shadow-22);
  --ula-shadow-on-map-color: var(--ula-alpha-black-55);

  /* Composites used by app chrome (individual views may scope their own value) */
  --ula-gradient-accent: linear-gradient(135deg, var(--ula-palm-900) 0%, var(--ula-palm-700) 100%);
  --ula-transition-smooth: all var(--ula-duration-base) var(--ula-ease-in-out);

  /* Scrims — Figma fill styles Scrim/* */
  --ula-scrim-hero: linear-gradient(to top, rgba(14, 28, 23, 0.66) 0%, rgba(14, 28, 23, 0.10) 55%, rgba(14, 28, 23, 0) 100%);
  --ula-scrim-bottom: linear-gradient(to top, rgba(14, 28, 23, 0.72) 0%, rgba(14, 28, 23, 0.18) 48%, rgba(14, 28, 23, 0) 100%);
  --ula-scrim-caption: linear-gradient(to top, rgba(14, 28, 23, 0.55) 0%, rgba(14, 28, 23, 0) 70%);
  --ula-scrim-welcome-rtl: linear-gradient(to left, rgba(251, 248, 242, 0.96) 0%, rgba(251, 248, 242, 0.80) 42%, rgba(251, 248, 242, 0) 78%);
  --ula-scrim-welcome-ltr: linear-gradient(to right, rgba(251, 248, 242, 0.96) 0%, rgba(251, 248, 242, 0.80) 42%, rgba(251, 248, 242, 0) 78%);
}

/* ======================================================================
   SEMANTIC — DARK  (Figma collection "Color", mode: Dark)
   ====================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ula-surface-page:        var(--ula-palm-950);
    --ula-surface-page-alt:    var(--ula-palm-900);
    --ula-surface-card:        var(--ula-palm-900);
    --ula-surface-raised:      var(--ula-palm-800);
    --ula-surface-sunken:      var(--ula-palm-950);
    --ula-surface-hover:       var(--ula-palm-800);
    --ula-surface-pressed:     var(--ula-palm-950);
    --ula-surface-dark:        var(--ula-palm-950);
    --ula-surface-dark-alt:    var(--ula-palm-900);
    --ula-surface-accent-soft: var(--ula-alpha-palm-400-14);
    --ula-surface-gold-soft:   var(--ula-alpha-gold-400-18);
    --ula-surface-danger-soft: var(--ula-alpha-terracotta-400-20);
    --ula-surface-warm:        var(--ula-palm-800);

    --ula-text-primary:   var(--ula-sand-100);
    --ula-text-strong:    var(--ula-sand-100);
    --ula-text-body:      var(--ula-sand-300);
    --ula-text-secondary: var(--ula-sand-400);
    --ula-text-muted:     var(--ula-stone-300);
    --ula-text-disabled:  var(--ula-stone-500);
    --ula-text-link:      var(--ula-gold-300);
    --ula-text-link-hover: var(--ula-gold-200);
    --ula-text-danger:    var(--ula-terracotta-300);

    --ula-border-subtle:  var(--ula-alpha-ivory-10);
    --ula-border-default: var(--ula-alpha-ivory-18);
    --ula-border-strong:  var(--ula-alpha-ivory-30);
    --ula-border-hover:   var(--ula-stone-300);
    --ula-border-focus:   var(--ula-palm-400);
    --ula-border-danger:  var(--ula-terracotta-300);

    --ula-accent-default: var(--ula-palm-400);
    --ula-accent-hover:   var(--ula-palm-300);
    --ula-accent-press:   var(--ula-palm-500);
    --ula-accent-fg:      var(--ula-palm-950);

    --ula-icon-primary:   var(--ula-sand-100);
    --ula-icon-secondary: var(--ula-sand-400);
    --ula-icon-muted:     var(--ula-stone-300);
    --ula-icon-subtle:    var(--ula-stone-500);
    --ula-icon-disabled:  var(--ula-stone-500);
    --ula-icon-accent:    var(--ula-palm-300);
    --ula-icon-highlight: var(--ula-gold-400);
    --ula-icon-danger:    var(--ula-terracotta-300);

    --ula-tone-palm-bg:  var(--ula-alpha-palm-400-14);
    --ula-tone-palm-fg:  var(--ula-palm-300);
    --ula-tone-palm-dot: var(--ula-palm-400);
    --ula-tone-gold-bg:  var(--ula-alpha-gold-400-18);
    --ula-tone-gold-fg:  var(--ula-gold-300);
    --ula-tone-terracotta-bg: var(--ula-alpha-terracotta-400-20);
    --ula-tone-terracotta-fg: var(--ula-terracotta-300);
    --ula-tone-terracotta-dot: var(--ula-terracotta-300);
    --ula-tone-stone-bg: var(--ula-alpha-ivory-10);
    --ula-tone-stone-fg: var(--ula-stone-200);
    --ula-tone-sand-bg:  var(--ula-alpha-ivory-16);
    --ula-tone-sand-fg:  var(--ula-sand-400);

    --ula-control-track-off: var(--ula-alpha-ivory-30);

    --ula-focus-gap: var(--ula-palm-950);
    --ula-spinner-head: var(--ula-palm-950);

    --ula-shadow-sm-color: var(--ula-alpha-black-50);
    --ula-shadow-md-color: var(--ula-alpha-black-55);
    --ula-shadow-lg-color: var(--ula-alpha-black-60);

    --ula-scrim-welcome-rtl: linear-gradient(to left, rgba(14, 28, 23, 0.96) 0%, rgba(14, 28, 23, 0.80) 42%, rgba(14, 28, 23, 0) 78%);
    --ula-scrim-welcome-ltr: linear-gradient(to right, rgba(14, 28, 23, 0.96) 0%, rgba(14, 28, 23, 0.80) 42%, rgba(14, 28, 23, 0) 78%);
  }
}

/* Explicit dark: [data-theme="dark"] or .dark — same block, attribute wins */
/* .ula-on-dark: a region that always uses dark-theme tokens (e.g. the office drawers,
   which sit on the dark office chrome in both themes). */
[data-theme="dark"], .dark, .ula-on-dark {
  --ula-surface-page:        var(--ula-palm-950);
  --ula-surface-page-alt:    var(--ula-palm-900);
  --ula-surface-card:        var(--ula-palm-900);
  --ula-surface-raised:      var(--ula-palm-800);
  --ula-surface-sunken:      var(--ula-palm-950);
  --ula-surface-hover:       var(--ula-palm-800);
  --ula-surface-pressed:     var(--ula-palm-950);
  --ula-surface-dark:        var(--ula-palm-950);
  --ula-surface-dark-alt:    var(--ula-palm-900);
  --ula-surface-accent-soft: var(--ula-alpha-palm-400-14);
  --ula-surface-gold-soft:   var(--ula-alpha-gold-400-18);
  --ula-surface-danger-soft: var(--ula-alpha-terracotta-400-20);
  --ula-surface-warm:        var(--ula-palm-800);

  --ula-text-primary:   var(--ula-sand-100);
  --ula-text-strong:    var(--ula-sand-100);
  --ula-text-body:      var(--ula-sand-300);
  --ula-text-secondary: var(--ula-sand-400);
  --ula-text-muted:     var(--ula-stone-300);
  --ula-text-disabled:  var(--ula-stone-500);
  --ula-text-link:      var(--ula-gold-300);
  --ula-text-link-hover: var(--ula-gold-200);
  --ula-text-danger:    var(--ula-terracotta-300);

  --ula-border-subtle:  var(--ula-alpha-ivory-10);
  --ula-border-default: var(--ula-alpha-ivory-18);
  --ula-border-strong:  var(--ula-alpha-ivory-30);
  --ula-border-hover:   var(--ula-stone-300);
  --ula-border-focus:   var(--ula-palm-400);
  --ula-border-danger:  var(--ula-terracotta-300);

  --ula-accent-default: var(--ula-palm-400);
  --ula-accent-hover:   var(--ula-palm-300);
  --ula-accent-press:   var(--ula-palm-500);
  --ula-accent-fg:      var(--ula-palm-950);

  --ula-icon-primary:   var(--ula-sand-100);
  --ula-icon-secondary: var(--ula-sand-400);
  --ula-icon-muted:     var(--ula-stone-300);
  --ula-icon-subtle:    var(--ula-stone-500);
  --ula-icon-disabled:  var(--ula-stone-500);
  --ula-icon-accent:    var(--ula-palm-300);
  --ula-icon-highlight: var(--ula-gold-400);
  --ula-icon-danger:    var(--ula-terracotta-300);

  --ula-tone-palm-bg:  var(--ula-alpha-palm-400-14);
  --ula-tone-palm-fg:  var(--ula-palm-300);
  --ula-tone-palm-dot: var(--ula-palm-400);
  --ula-tone-gold-bg:  var(--ula-alpha-gold-400-18);
  --ula-tone-gold-fg:  var(--ula-gold-300);
  --ula-tone-terracotta-bg: var(--ula-alpha-terracotta-400-20);
  --ula-tone-terracotta-fg: var(--ula-terracotta-300);
  --ula-tone-terracotta-dot: var(--ula-terracotta-300);
  --ula-tone-stone-bg: var(--ula-alpha-ivory-10);
  --ula-tone-stone-fg: var(--ula-stone-200);
  --ula-tone-sand-bg:  var(--ula-alpha-ivory-16);
  --ula-tone-sand-fg:  var(--ula-sand-400);

  --ula-control-track-off: var(--ula-alpha-ivory-30);

  --ula-focus-gap: var(--ula-palm-950);
  --ula-spinner-head: var(--ula-palm-950);

  --ula-shadow-sm-color: var(--ula-alpha-black-50);
  --ula-shadow-md-color: var(--ula-alpha-black-55);
  --ula-shadow-lg-color: var(--ula-alpha-black-60);

  --ula-scrim-welcome-rtl: linear-gradient(to left, rgba(14, 28, 23, 0.96) 0%, rgba(14, 28, 23, 0.80) 42%, rgba(14, 28, 23, 0) 78%);
  --ula-scrim-welcome-ltr: linear-gradient(to right, rgba(14, 28, 23, 0.96) 0%, rgba(14, 28, 23, 0.80) 42%, rgba(14, 28, 23, 0) 78%);
}

/* --- DIRECTION --------------------------------------------------------- */
[dir="rtl"] {
  font-family: var(--ula-font-ar);
  --ula-scrim-welcome: var(--ula-scrim-welcome-rtl);
}
[dir="ltr"] {
  font-family: var(--ula-font-en);
  --ula-scrim-welcome: var(--ula-scrim-welcome-ltr);
}

/* --- BASE -------------------------------------------------------------- */
/* Layered (unlike the rest of this file) so Tailwind utility classes --
   which Tailwind puts in @layer utilities -- can actually override these
   defaults. An unlayered rule beats every layered one regardless of
   specificity, so before this these two rules silently won over any
   text-[...]/bg-[...] utility applied to an <a>, even a single-class one:
   e.g. <x-btn href="..."> rendering as <a> with text-[var(--ula-text-on-
   cta)] had its color overridden back to var(--ula-text-link) here. That
   token is theme-aware and flips to a light gold in dark mode, while the
   button's own background (--ula-control-cta-on-dark) is a fixed light
   sand regardless of theme -- so in dark mode specifically this produced
   light-on-light, near-invisible button text (found on the landing page's
   "Book a Demo" nav button). */
@layer base {
  body {
    margin: 0;
    padding: 0;
    background-color: var(--ula-surface-page);
    color: var(--ula-text-primary);
    /* No font-family here on purpose: [dir="rtl"]/[dir="ltr"] above set it on
       <html>, and font-family inherits. Setting it again here with the static,
       always-Arabic --ula-font-family would override that switch for every
       page's English/LTR mode. */
    font-size: var(--ula-size-body);
    line-height: var(--ula-lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  a { color: var(--ula-text-link); text-decoration: none; }
  a:hover { color: var(--ula-text-link-hover); text-decoration: underline; }
}

:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ula-focus-ring);
}

/* Material Symbols */
.material-symbols-rounded,
.ms {
  font-family: 'Material Symbols Rounded', 'Material Icons Round', 'Material Icons', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  letter-spacing: normal;
  text-transform: none;
  direction: ltr;
}
.material-symbols-rounded.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
[dir="rtl"] .ula-mirror-rtl { transform: scaleX(-1); }

/* --- TYPE UTILITIES (Figma text styles) -------------------------------- */
.ula-display-lg { font-family: var(--ula-font-ar); font-size: var(--ula-size-display-lg); font-weight: var(--ula-weight-semibold); line-height: var(--ula-lh-display); }
.ula-display    { font-family: var(--ula-font-ar); font-size: var(--ula-size-display); font-weight: var(--ula-weight-semibold); line-height: var(--ula-lh-display); }
.ula-h1 { font-family: var(--ula-font-ar); font-size: var(--ula-size-h1); font-weight: var(--ula-weight-semibold); line-height: var(--ula-lh-display); }
.ula-h2 { font-family: var(--ula-font-ar); font-size: var(--ula-size-h2); font-weight: var(--ula-weight-semibold); line-height: var(--ula-lh-heading); }
.ula-h3 { font-family: var(--ula-font-ar); font-size: var(--ula-size-h3); font-weight: var(--ula-weight-semibold); line-height: var(--ula-lh-heading); }
.ula-h4 { font-family: var(--ula-font-ar); font-size: var(--ula-size-h4); font-weight: var(--ula-weight-semibold); line-height: var(--ula-lh-heading); }
.ula-hero { font-family: var(--ula-font-ar); font-size: 30px; font-weight: var(--ula-weight-semibold); line-height: var(--ula-lh-hero); }
.ula-body-lg { font-family: var(--ula-font-ar); font-size: var(--ula-size-body-lg); line-height: var(--ula-lh-body); }
.ula-body    { font-family: var(--ula-font-ar); font-size: var(--ula-size-body); line-height: var(--ula-lh-body); }
.ula-body-sm { font-family: var(--ula-font-ar); font-size: var(--ula-size-sm); line-height: var(--ula-lh-body); }
.ula-label   { font-family: var(--ula-font-ar); font-size: var(--ula-size-body); font-weight: var(--ula-weight-medium); line-height: var(--ula-lh-body); }
.ula-metric  { font-family: var(--ula-font-ar); font-size: 34px; font-weight: var(--ula-weight-light); line-height: var(--ula-lh-metric); }
.ula-en-display { font-family: var(--ula-font-en); font-size: var(--ula-size-display-en); font-weight: var(--ula-weight-light); line-height: var(--ula-lh-heading); }
.ula-en-body { font-family: var(--ula-font-en); font-size: var(--ula-size-body-en); line-height: var(--ula-lh-en); }
.ula-mono { font-family: var(--ula-font-mono); font-size: var(--ula-size-xs); line-height: var(--ula-lh-en); }
.ula-brand-label {
  font-family: var(--ula-font-en);
  font-size: var(--ula-size-label);
  font-weight: var(--ula-weight-medium);
  letter-spacing: var(--ula-tracking-brand);
  text-transform: uppercase;
}

/* Two-line rule: Arabic headline + English companion */
.ula-headline-group { display: flex; flex-direction: column; gap: var(--ula-space-1); }
.ula-headline-ar { font-family: var(--ula-font-ar); font-weight: var(--ula-weight-semibold); color: var(--ula-text-primary); line-height: var(--ula-lh-hero); }
.ula-headline-en { font-family: var(--ula-font-en); font-weight: var(--ula-weight-light); color: var(--ula-text-secondary); line-height: var(--ula-lh-heading); }

/* --- SURFACE UTILITIES ------------------------------------------------- */
.ula-card {
  background-color: var(--ula-surface-card);
  border: var(--ula-border-width-hairline) solid var(--ula-border-subtle);
  border-radius: var(--ula-radius-lg);
  box-shadow: var(--ula-shadow-xs);
  transition: transform var(--ula-duration-base) var(--ula-ease-out),
              box-shadow var(--ula-duration-base) var(--ula-ease-out),
              border-color var(--ula-duration-base) var(--ula-ease-out);
}
.ula-card-hover:hover {
  transform: translateY(-2px);
  border-color: var(--ula-border-strong);
  box-shadow: var(--ula-shadow-md);
}
.ula-glass {
  background: var(--ula-surface-capsule);
  backdrop-filter: var(--ula-backdrop-blur);
  -webkit-backdrop-filter: var(--ula-backdrop-blur);
  border: var(--ula-border-width-hairline) solid var(--ula-border-on-dark);
}
.ula-container { max-width: var(--ula-layout-container-max); margin-inline: auto; padding-inline: var(--ula-layout-gutter); }
.ula-container-narrow { max-width: var(--ula-layout-container-narrow); margin-inline: auto; padding-inline: var(--ula-layout-gutter); }

/* ══════════════════════════════════════════════════════════════════════════
   ULASPACE BUTTON DESIGN SYSTEM (FIGMA 100% SPEC COMPLIANT)
   ══════════════════════════════════════════════════════════════════════════ */
.ula-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Cairo', 'IBM Plex Sans Arabic', sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  user-select: none !important;
  border-style: solid !important;
  border-width: 1px !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
  outline: none !important;
}

.ula-btn:focus-visible {
  box-shadow: var(--ula-focus-ring) !important;
}

.ula-btn:disabled, .ula-btn.disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
}

/* --- SIZES --- */
/* Large: 52px */
.ula-btn--lg {
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 26px !important;
  font-size: 16px !important;
  border-radius: 16px !important;
  gap: 10px !important;
}
.ula-btn--lg.ula-btn--icon-only {
  width: 52px !important;
  min-width: 52px !important;
  padding: 0 !important;
}
.ula-btn--lg .material-symbols-rounded {
  font-size: 20px !important;
}

/* Medium (Default): 44px */
.ula-btn--md {
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 22px !important;
  font-size: 14px !important;
  border-radius: 12px !important;
  gap: 8px !important;
}
.ula-btn--md.ula-btn--icon-only {
  width: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
}
.ula-btn--md .material-symbols-rounded {
  font-size: 18px !important;
}

/* Small: 36px */
.ula-btn--sm {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  gap: 7px !important;
}
.ula-btn--sm.ula-btn--icon-only {
  width: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
}
.ula-btn--sm .material-symbols-rounded {
  font-size: 16px !important;
}

/* Pill Modifier */
.ula-btn--pill {
  border-radius: 9999px !important;
}

/* --- VARIANTS --- */
/* Primary: Forest Green */
.ula-btn--primary {
  background-color: var(--ula-palm-900, #1b3524) !important;
  border-color: var(--ula-palm-900, #1b3524) !important;
  color: #FFFFFF !important;
  box-shadow: var(--ula-shadow-xs, 0 1px 2px rgba(0,0,0,0.05)) !important;
}
.ula-btn--primary:hover {
  background-color: var(--ula-palm-800, #245c3a) !important;
  border-color: var(--ula-palm-800, #245c3a) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--ula-shadow-sm, 0 4px 6px -1px rgba(0,0,0,0.1)) !important;
}
.ula-btn--primary:active {
  background-color: var(--ula-palm-950, #0f2015) !important;
  border-color: var(--ula-palm-950, #0f2015) !important;
  transform: translateY(0) !important;
}

/* Dark: the primitive palm-900 fill above equals --ula-surface-card here, so primary buttons vanished on
   cards. Switch to the semantic accent, which the dark theme lifts to palm-400 with a dark label. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ula-btn--primary { background-color: var(--ula-accent-default) !important; border-color: var(--ula-accent-default) !important; color: var(--ula-accent-fg) !important; }
  :root:not([data-theme="light"]) .ula-btn--primary:hover { background-color: var(--ula-accent-hover) !important; border-color: var(--ula-accent-hover) !important; color: var(--ula-accent-fg) !important; }
  :root:not([data-theme="light"]) .ula-btn--primary:active { background-color: var(--ula-accent-press) !important; border-color: var(--ula-accent-press) !important; }
}
[data-theme="dark"] .ula-btn--primary, .dark .ula-btn--primary { background-color: var(--ula-accent-default) !important; border-color: var(--ula-accent-default) !important; color: var(--ula-accent-fg) !important; }
[data-theme="dark"] .ula-btn--primary:hover, .dark .ula-btn--primary:hover { background-color: var(--ula-accent-hover) !important; border-color: var(--ula-accent-hover) !important; color: var(--ula-accent-fg) !important; }
[data-theme="dark"] .ula-btn--primary:active, .dark .ula-btn--primary:active { background-color: var(--ula-accent-press) !important; border-color: var(--ula-accent-press) !important; }
/* Ghost had the same problem: palm-900 text on the dark page. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ula-btn--ghost { color: var(--ula-accent-default) !important; }
  :root:not([data-theme="light"]) .ula-btn--ghost:hover { background-color: var(--ula-surface-hover) !important; color: var(--ula-accent-hover) !important; }
}
[data-theme="dark"] .ula-btn--ghost, .dark .ula-btn--ghost { color: var(--ula-accent-default) !important; }
[data-theme="dark"] .ula-btn--ghost:hover, .dark .ula-btn--ghost:hover { background-color: var(--ula-surface-hover) !important; color: var(--ula-accent-hover) !important; }
/* Outline and secondary were missed by the two fixes above: palm-900 labels (and sand fills) don't
   change with the theme, so outline buttons read as empty frames on the dark page. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ula-btn--outline { border-color: var(--ula-border-default) !important; color: var(--ula-text-primary) !important; }
  :root:not([data-theme="light"]) .ula-btn--outline:hover { background-color: var(--ula-surface-hover) !important; border-color: var(--ula-border-hover) !important; color: var(--ula-text-primary) !important; }
  :root:not([data-theme="light"]) .ula-btn--outline:active { background-color: var(--ula-surface-pressed) !important; }
  :root:not([data-theme="light"]) .ula-btn--secondary { background-color: var(--ula-surface-raised) !important; border-color: var(--ula-border-default) !important; color: var(--ula-text-primary) !important; }
  :root:not([data-theme="light"]) .ula-btn--secondary:hover { background-color: var(--ula-surface-hover) !important; border-color: var(--ula-border-hover) !important; color: var(--ula-text-primary) !important; }
  :root:not([data-theme="light"]) .ula-btn--secondary:active { background-color: var(--ula-surface-pressed) !important; }
}
[data-theme="dark"] .ula-btn--outline, .dark .ula-btn--outline { border-color: var(--ula-border-default) !important; color: var(--ula-text-primary) !important; }
[data-theme="dark"] .ula-btn--outline:hover, .dark .ula-btn--outline:hover { background-color: var(--ula-surface-hover) !important; border-color: var(--ula-border-hover) !important; color: var(--ula-text-primary) !important; }
[data-theme="dark"] .ula-btn--outline:active, .dark .ula-btn--outline:active { background-color: var(--ula-surface-pressed) !important; }
[data-theme="dark"] .ula-btn--secondary, .dark .ula-btn--secondary { background-color: var(--ula-surface-raised) !important; border-color: var(--ula-border-default) !important; color: var(--ula-text-primary) !important; }
[data-theme="dark"] .ula-btn--secondary:hover, .dark .ula-btn--secondary:hover { background-color: var(--ula-surface-hover) !important; border-color: var(--ula-border-hover) !important; color: var(--ula-text-primary) !important; }
[data-theme="dark"] .ula-btn--secondary:active, .dark .ula-btn--secondary:active { background-color: var(--ula-surface-pressed) !important; }

/* Secondary: Warm Sand */
.ula-btn--secondary {
  background-color: var(--ula-sand-100, #f0eae1) !important;
  border-color: var(--ula-stone-300, #d5ded0) !important;
  color: var(--ula-palm-900, #1b3524) !important;
  box-shadow: var(--ula-shadow-xs, 0 1px 2px rgba(0,0,0,0.05)) !important;
}
.ula-btn--secondary:hover {
  background-color: var(--ula-sand-50, #f9f7f4) !important;
  border-color: var(--ula-palm-700, #2d6a45) !important;
  color: var(--ula-palm-900, #1b3524) !important;
  transform: translateY(-1px) !important;
}
.ula-btn--secondary:active {
  background-color: var(--ula-sand-200, #e5dccf) !important;
  border-color: var(--ula-palm-900, #1b3524) !important;
  transform: translateY(0) !important;
}

/* Outline */
.ula-btn--outline {
  background-color: transparent !important;
  border-color: var(--ula-stone-300, #d5ded0) !important;
  color: var(--ula-palm-900, #1b3524) !important;
}
.ula-btn--outline:hover {
  background-color: var(--ula-sand-50, #f9f7f4) !important;
  border-color: var(--ula-palm-700, #2d6a45) !important;
  color: var(--ula-palm-900, #1b3524) !important;
}
.ula-btn--outline:active {
  background-color: var(--ula-sand-200, #e5dccf) !important;
}

/* Ghost */
.ula-btn--ghost {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--ula-palm-900, #1b3524) !important;
}
.ula-btn--ghost:hover {
  background-color: var(--ula-palm-50, rgba(27,53,36,0.06)) !important;
  color: var(--ula-palm-900, #1b3524) !important;
}
.ula-btn--ghost:active {
  background-color: var(--ula-palm-100, rgba(27,53,36,0.12)) !important;
}

/* Danger */
.ula-btn--danger {
  background-color: var(--ula-terracotta-500, #c84b31) !important;
  border-color: var(--ula-terracotta-500, #c84b31) !important;
  color: #FFFFFF !important;
  box-shadow: var(--ula-shadow-xs) !important;
}
.ula-btn--danger:hover {
  background-color: var(--ula-terracotta-600, #ab3d25) !important;
  border-color: var(--ula-terracotta-600, #ab3d25) !important;
  transform: translateY(-1px) !important;
}

/* Nav CTA: control/cta-on-dark (sand) — gold is never a button fill; see DESIGN_SYSTEM.md §8 */
.ula-btn--nav-cta {
  background-color: var(--ula-control-cta-on-dark, #ede6d9) !important;
  border-color: var(--ula-control-cta-on-dark, #ede6d9) !important;
  color: var(--ula-text-on-cta, #1b3524) !important;
  font-weight: 800 !important;
  box-shadow: var(--ula-shadow-xs) !important;
}
.ula-btn--nav-cta:hover {
  background-color: var(--ula-control-cta-on-dark-hover, #f9f6ef) !important;
  border-color: var(--ula-control-cta-on-dark-hover, #f9f6ef) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   ULA DESIGN SYSTEM: BADGES, TAGS & CHIPS
   ========================================================================== */
.ula-badge,
.badge,
.badge-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  user-select: none !important;
  box-sizing: border-box !important;
  font-family: var(--ula-font-ar, 'Cairo', sans-serif) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  border-radius: var(--ula-radius-pill, 9999px) !important;
  border: 1px solid transparent !important;
  transition: all var(--ula-duration-fast, 160ms) var(--ula-ease-out, ease-out) !important;
}

/* Badge Sizes */
.ula-badge--sm {
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 10px !important;
  font-size: 11.5px !important;
  gap: 5px !important;
}
.ula-badge--md {
  min-height: 29px !important;
  height: 29px !important;
  padding: 0 14px !important;
  font-size: 12.5px !important;
  gap: 6px !important;
}
.ula-badge--lg,
.ula-badge--chip {
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 18px !important;
  font-size: 13.5px !important;
  gap: 8px !important;
}

/* Badge Variants */
/* Live / Active / Success */
.ula-badge--live {
  background-color: var(--ula-tone-palm-bg, #dbe6dd) !important;
  color: var(--ula-tone-palm-fg, #1e412f) !important;
  border-color: rgba(30, 65, 47, 0.14) !important;
}
.ula-badge--live .ula-badge__dot {
  background-color: var(--ula-tone-palm-dot, #3c6b4c) !important;
}

/* Scheduled / Warning / Gold / High */
.ula-badge--scheduled {
  background-color: var(--ula-tone-gold-bg, #f0dfbc) !important;
  color: var(--ula-tone-gold-fg, #946c27) !important;
  border-color: rgba(148, 108, 39, 0.18) !important;
}
.ula-badge--scheduled .ula-badge__dot {
  background-color: var(--ula-tone-gold-dot, #d3a553) !important;
}

/* Attention / Danger / Terracotta / Urgent */
.ula-badge--attention {
  background-color: var(--ula-tone-terracotta-bg, #ecc9ae) !important;
  color: var(--ula-tone-terracotta-fg, #7d451d) !important;
  border-color: rgba(125, 69, 29, 0.18) !important;
}
.ula-badge--attention .ula-badge__dot {
  background-color: var(--ula-tone-terracotta-dot, #b46c34) !important;
}

/* Cancelled / Stone / Neutral / Low */
.ula-badge--cancelled,
.ula-badge--stone {
  background-color: var(--ula-tone-stone-bg, #e8e4dc) !important;
  color: var(--ula-tone-stone-fg, #4a443c) !important;
  border-color: rgba(74, 68, 60, 0.14) !important;
}
.ula-badge--cancelled .ula-badge__dot,
.ula-badge--stone .ula-badge__dot {
  background-color: var(--ula-tone-stone-dot, #a49889) !important;
}

/* Default / Medium / Sand */
.ula-badge--default {
  background-color: var(--ula-sand-200, #f4ede1) !important;
  color: var(--ula-palm-900, #142b24) !important;
  border-color: var(--ula-stone-300, #c1b6a6) !important;
}
.ula-badge--default .ula-badge__dot {
  background-color: var(--ula-palm-600, #2a5439) !important;
}

/* Accent (Solid Gold/Palm) */
.ula-badge--accent {
  background-color: var(--ula-highlight-default, #d3a553) !important;
  color: var(--ula-palm-900, #142b24) !important;
  border-color: transparent !important;
}

/* Chip / Filter Variant */
.ula-badge--filter {
  background-color: var(--ula-surface-card, #f9f6ef) !important;
  border-color: var(--ula-border-default, #d9d3c8) !important;
  color: var(--ula-text-body, #4a443c) !important;
}
.ula-badge--filter:hover {
  background-color: var(--ula-surface-hover, #f4ede1) !important;
  border-color: var(--ula-border-hover, #857a6c) !important;
}

/* Badge Dot and Icon */
.ula-badge__dot {
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  border-radius: 9999px !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.ula-badge__icon {
  font-size: 15px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* Generic nav-badge-pill standardized */
.nav-badge-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3px 10px !important;
  min-height: 22px !important;
  border-radius: var(--ula-radius-pill, 9999px) !important;
  font-family: var(--ula-font-mono, 'IBM Plex Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  background-color: var(--ula-tone-palm-bg, #dbe6dd) !important;
  color: var(--ula-tone-palm-fg, #1e412f) !important;
  border: 1px solid rgba(30, 65, 47, 0.12) !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   ULA DESIGN SYSTEM: ICON BUTTONS
   ========================================================================== */
.ula-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  user-select: none !important;
  box-sizing: border-box !important;
  border: 1px solid var(--ula-border-default, #d9d3c8) !important;
  border-radius: 12px !important;
  background-color: var(--ula-surface-card, #f9f6ef) !important;
  color: var(--ula-icon-secondary, #665d52) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all var(--ula-duration-fast, 160ms) var(--ula-ease-out, ease-out) !important;
  position: relative !important;
}

.ula-icon-btn:hover {
  background-color: var(--ula-surface-hover, #f4ede1) !important;
  border-color: var(--ula-border-hover, #857a6c) !important;
  color: var(--ula-icon-primary, #1b3223) !important;
  transform: translateY(-1px) !important;
}

.ula-icon-btn:active {
  transform: translateY(0) !important;
}

.ula-icon-btn--sm {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 10px !important;
}
.ula-icon-btn--sm .material-symbols-rounded {
  font-size: 18px !important;
}

.ula-icon-btn--md {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
}
.ula-icon-btn--md .material-symbols-rounded {
  font-size: 20px !important;
}

.ula-icon-btn--lg {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 14px !important;
}
.ula-icon-btn--lg .material-symbols-rounded {
  font-size: 24px !important;
}

.ula-icon-btn--primary {
  background-color: var(--ula-palm-900, #1b3524) !important;
  border-color: var(--ula-palm-900, #1b3524) !important;
  color: #FFFFFF !important;
}
.ula-icon-btn--primary:hover {
  background-color: var(--ula-palm-800, #245c3a) !important;
  border-color: var(--ula-palm-800, #245c3a) !important;
  color: #FFFFFF !important;
}

.ula-icon-btn--ghost {
  background-color: transparent !important;
  border-color: transparent !important;
}
.ula-icon-btn--ghost:hover {
  background-color: var(--ula-palm-50, rgba(27,53,36,0.06)) !important;
  border-color: transparent !important;
}

.ula-icon-btn--danger {
  background-color: var(--ula-surface-danger-soft, #ecc9ae) !important;
  border-color: transparent !important;
  color: var(--ula-status-danger, #9a5827) !important;
}
.ula-icon-btn--danger:hover {
  background-color: var(--ula-status-danger, #9a5827) !important;
  color: #FFFFFF !important;
}

.ula-icon-btn--pill {
  border-radius: 9999px !important;
}

/* ==========================================================================
   ULA DESIGN SYSTEM: TASK MODAL TABS & INSPECTOR
   ========================================================================== */
.task-modal-segmented-bar {
  display: flex !important;
  gap: 4px !important;
  background: var(--ula-surface-page-alt, #f4ede1) !important;
  padding: 5px !important;
  border-radius: 14px !important;
  border: 1px solid var(--ula-border-subtle, #e8e4dc) !important;
  margin-bottom: 18px !important;
  /* Wrap instead of scrolling, so no tab is ever hidden past the edge. */
  flex-wrap: wrap !important;
  overflow: visible !important;
}
.task-modal-segmented-bar::-webkit-scrollbar {
  display: none !important;
}

.task-modal-tab-btn {
  height: var(--ula-size-touch-target, 44px) !important;
  min-height: var(--ula-size-touch-target, 44px) !important;
  padding: 0 10px !important;
  flex: 1 1 auto !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all var(--ula-duration-fast, 160ms) var(--ula-ease-out, ease-out) !important;
  font-family: var(--ula-font-ar, 'Cairo', sans-serif) !important;
  background: transparent !important;
  color: var(--ula-text-secondary, #665d52) !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

.task-modal-tab-btn:hover {
  background: var(--ula-surface-card, #f9f6ef) !important;
  color: var(--ula-text-primary, #142b24) !important;
  border-color: var(--ula-border-subtle, #e8e4dc) !important;
}

.task-modal-tab-btn.active,
.task-modal-tab-btn[aria-selected="true"] {
  background: var(--ula-palm-900, #1b3524) !important;
  color: #FFFFFF !important;
  border-color: var(--ula-palm-900, #1b3524) !important;
  box-shadow: var(--ula-shadow-xs, 0 1px 2px rgba(0,0,0,0.05)) !important;
}

.task-modal-tab-btn .task-modal-tab-count {
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 1px 7px !important;
  border-radius: 9999px !important;
  font-family: var(--ula-font-mono, 'IBM Plex Mono', monospace) !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  background: var(--ula-tone-palm-bg, #dbe6dd) !important;
  color: var(--ula-tone-palm-fg, #1e412f) !important;
  transition: all var(--ula-duration-fast, 160ms) ease !important;
}

.task-modal-tab-btn.active .task-modal-tab-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

/* Task Meta Chips in Modal Header */
.task-modal-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--ula-surface-page-alt, #f4ede1) !important;
  border: 1px solid var(--ula-border-subtle, #e8e4dc) !important;
  border-radius: var(--ula-radius-pill, 9999px) !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  color: var(--ula-text-secondary, #665d52) !important;
  font-weight: 600 !important;
}
.task-modal-chip strong {
  color: var(--ula-text-primary, #142b24) !important;
}
.task-modal-chip.clickable:hover {
  background: var(--ula-surface-card, #f9f6ef) !important;
  border-color: var(--ula-palm-600, #2a5439) !important;
  cursor: pointer !important;
}

/* Dark mode overrides for task modal */
[data-theme="dark"] .task-modal-segmented-bar,
.dark .task-modal-segmented-bar {
  background: rgba(20, 43, 36, 0.4) !important;
  border-color: var(--ula-border-subtle) !important;
}
[data-theme="dark"] .task-modal-tab-btn.active,
.dark .task-modal-tab-btn.active {
  background: var(--ula-palm-700) !important;
  color: #FFFFFF !important;
  border-color: var(--ula-palm-600) !important;
}
[data-theme="dark"] .task-modal-chip,
.dark .task-modal-chip {
  background: var(--ula-palm-900) !important;
  border-color: var(--ula-border-subtle) !important;
  color: var(--ula-sand-300) !important;
}
[data-theme="dark"] .task-modal-chip strong,
.dark .task-modal-chip strong {
  color: var(--ula-sand-100) !important;
}

/* ==========================================================================
   ULASPACE TASK CARD DESIGN SYSTEM (KANBAN & LISTS)
   ========================================================================== */
.kanban-task-card, .global-kanban-card, .kanban-card {
  background: var(--ula-surface-card, #f9f6ef) !important;
  border: 1px solid var(--ula-border-subtle, #e8e4dc) !important;
  border-radius: 14px !important;
  padding: 14px 15px !important;
  box-shadow: 0 1px 3px rgba(27, 53, 36, 0.04), 0 1px 2px rgba(27, 53, 36, 0.02) !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease !important;
  position: relative !important;
  user-select: none !important;
  cursor: grab !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  font-family: var(--ula-font-ar, 'Cairo', sans-serif) !important;
  box-sizing: border-box !important;
}

/* Filters hide cards with the hidden attribute; the display rule above would override an inline display: none. */
.kanban-task-card[hidden], .global-kanban-card[hidden], .kanban-card[hidden] {
  display: none !important;
}

.kanban-task-card:hover, .global-kanban-card:hover, .kanban-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(27, 53, 36, 0.08), 0 2px 4px rgba(27, 53, 36, 0.04) !important;
  border-color: var(--ula-palm-600, #2a5439) !important;
}

.kanban-task-card:active, .global-kanban-card:active, .kanban-card:active {
  cursor: grabbing !important;
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(27, 53, 36, 0.06) !important;
}

/* Header row */
.task-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 24px !important;
}

.task-card-tags {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}

.task-code-badge {
  font-family: var(--ula-font-mono, 'IBM Plex Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  background: var(--ula-surface-page-alt, #f4ede1) !important;
  color: var(--ula-palm-800, #1f452d) !important;
  border: 1px solid var(--ula-border-subtle, #e8e4dc) !important;
  line-height: 1.3 !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
}

.task-card-actions {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.task-dots-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 7px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--ula-text-muted, #948b7e) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.task-dots-btn:hover {
  background: var(--ula-surface-page-alt, #f4ede1) !important;
  color: var(--ula-text-primary, #142b24) !important;
  border-color: var(--ula-border-subtle, #e8e4dc) !important;
  transform: scale(1.05) !important;
}

/* Title */
.task-card-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--ula-text-primary, #142b24) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-break: break-word !important;
  transition: color 0.15s ease !important;
}

.kanban-task-card:hover .task-card-title {
  color: var(--ula-palm-800, #1f452d) !important;
}

/* Milestone */
.task-card-milestone {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  background: rgba(36, 92, 58, 0.08) !important;
  color: var(--ula-palm-800, #1f452d) !important;
  border: 1px solid rgba(36, 92, 58, 0.18) !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Meta */
.task-card-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font-size: 11.5px !important;
  color: var(--ula-text-secondary, #665d52) !important;
  flex-wrap: wrap !important;
  padding-top: 4px !important;
  border-top: 1px dashed var(--ula-border-subtle, #e8e4dc) !important;
}

.task-project-name {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-weight: 600 !important;
  color: var(--ula-text-secondary, #665d52) !important;
  max-width: 120px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.task-assignee-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: var(--ula-surface-page-alt, #f4ede1) !important;
  border: 1px solid var(--ula-border-subtle, #e8e4dc) !important;
  border-radius: 9999px !important;
  padding: 2px 8px 2px 3px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--ula-text-primary, #142b24) !important;
}

.task-avatar-circle {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: var(--ula-palm-900, #1b3524) !important;
  color: #FFFFFF !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  font-family: var(--ula-font-mono, 'IBM Plex Mono', monospace) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.task-due-date {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  background: var(--ula-surface-page-alt, #f4ede1) !important;
  border: 1px solid var(--ula-border-subtle, #e8e4dc) !important;
  color: var(--ula-text-secondary, #665d52) !important;
  font-family: var(--ula-font-mono, 'IBM Plex Mono', monospace) !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

.task-due-date.is-overdue {
  background: var(--ula-surface-danger-soft, #ecc9ae) !important;
  color: var(--ula-status-danger, #9a5827) !important;
  border-color: rgba(154, 88, 39, 0.3) !important;
}

/* Footer */
.task-card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--ula-border-subtle, #e8e4dc) !important;
  margin-top: 2px !important;
}

.card-status-select {
  background: var(--ula-surface-page-alt, #f4ede1) !important;
  border: 1px solid var(--ula-border-subtle, #e8e4dc) !important;
  color: var(--ula-text-primary, #142b24) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  outline: none !important;
  cursor: pointer !important;
  font-family: var(--ula-font-ar, 'Cairo', sans-serif) !important;
  transition: all 0.15s ease !important;
}

.card-status-select:hover {
  border-color: var(--ula-border-hover, #857a6c) !important;
  background: var(--ula-surface-card, #f9f6ef) !important;
}

.card-status-select:focus {
  border-color: var(--ula-palm-700, #204b32) !important;
  box-shadow: var(--ula-focus-ring) !important;
}

.task-timer-pill {
  background: rgba(36, 92, 58, 0.08) !important;
  color: var(--ula-palm-800, #1f452d) !important;
  border: 1px solid rgba(36, 92, 58, 0.2) !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--ula-font-mono, 'IBM Plex Mono', monospace) !important;
  direction: ltr !important;
  unicode-bidi: isolate !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.task-timer-pill:hover {
  background: var(--ula-palm-900, #1b3524) !important;
  color: #FFFFFF !important;
  border-color: var(--ula-palm-900, #1b3524) !important;
  transform: scale(1.03) !important;
}

/* Dark mode for task cards */
[data-theme="dark"] .kanban-task-card,
[data-theme="dark"] .global-kanban-card,
[data-theme="dark"] .kanban-card,
.dark .kanban-task-card,
.dark .global-kanban-card,
.dark .kanban-card {
  background: var(--ula-surface-card) !important;
  border-color: var(--ula-border-subtle) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .task-code-badge,
.dark .task-code-badge {
  background: var(--ula-palm-900) !important;
  color: var(--ula-sand-200) !important;
  border-color: var(--ula-border-subtle) !important;
}

[data-theme="dark"] .task-assignee-chip,
.dark .task-assignee-chip {
  background: var(--ula-palm-900) !important;
  border-color: var(--ula-border-subtle) !important;
  color: var(--ula-sand-100) !important;
}

[data-theme="dark"] .task-due-date,
.dark .task-due-date {
  background: var(--ula-palm-900) !important;
  border-color: var(--ula-border-subtle) !important;
  color: var(--ula-sand-300) !important;
}

[data-theme="dark"] .card-status-select,
.dark .card-status-select {
  background: var(--ula-palm-900) !important;
  border-color: var(--ula-border-subtle) !important;
  color: var(--ula-sand-100) !important;
}

[data-theme="dark"] .task-timer-pill,
.dark .task-timer-pill {
  background: rgba(36, 92, 58, 0.25) !important;
  color: var(--ula-sand-100) !important;
  border-color: rgba(36, 92, 58, 0.45) !important;
}
[data-theme="dark"] .task-timer-pill:hover,
.dark .task-timer-pill:hover {
  background: var(--ula-palm-700) !important;
  color: #FFFFFF !important;
}
/* The milestone pill, title hover and avatar used palm-800/900, which in dark is the card colour
   itself — the milestone name rendered as an empty capsule. */
[data-theme="dark"] .task-card-milestone,
.dark .task-card-milestone {
  background: var(--ula-tone-palm-bg) !important;
  color: var(--ula-tone-palm-fg) !important;
  border-color: var(--ula-border-subtle) !important;
}
[data-theme="dark"] .kanban-task-card:hover .task-card-title,
.dark .kanban-task-card:hover .task-card-title {
  color: var(--ula-accent-hover) !important;
}
[data-theme="dark"] .task-avatar-circle,
.dark .task-avatar-circle {
  background: var(--ula-accent-default) !important;
  color: var(--ula-accent-fg) !important;
}