/* ══════════════════════════════════════════════════════════════════════════════
   مَرصد (Marsad) · Untitled UI Core Design System & Tokens
   Official Untitled UI Foundations:
   - Neutral Gray Scale (Gray 25 - Gray 950)
   - Signature Primary Violet Scale (Primary 25 - Primary 950, Brand #7F56D9)
   - Semantic Scales (Success, Warning, Error, Info)
   - Midnight Dark Mode (Canvas #0C111D, Cards #101828 / #161B26, Borders #1F242F)
   - Light Mode (Canvas #FCFCFD / #F9FAFB, Cards #FFFFFF, Borders #EAECF0)
   - Arabic RTL Ergonomics & Fluid Zero-Flash Theme Transitions
══════════════════════════════════════════════════════════════════════════════ */

@import url('/static/fonts.css');

:root {
  /* ── 1. Untitled UI Neutral Gray Scale ────────────────────────────────────── */
  --color-gray-25:  #FCFCFD;
  --color-gray-50:  #F9FAFB;
  --color-gray-100: #F2F4F7;
  --color-gray-200: #EAECF0;
  --color-gray-300: #D0D5DD;
  --color-gray-400: #98A2B3;
  --color-gray-500: #667085;
  --color-gray-600: #475467;
  --color-gray-700: #344054;
  --color-gray-800: #1D2939;
  --color-gray-900: #101828;
  --color-gray-950: #0C111D;

  /* Shorthand aliases for Neutral Gray */
  --gray-25:  var(--color-gray-25);
  --gray-50:  var(--color-gray-50);
  --gray-100: var(--color-gray-100);
  --gray-200: var(--color-gray-200);
  --gray-300: var(--color-gray-300);
  --gray-400: var(--color-gray-400);
  --gray-500: var(--color-gray-500);
  --gray-600: var(--color-gray-600);
  --gray-700: var(--color-gray-700);
  --gray-800: var(--color-gray-800);
  --gray-900: var(--color-gray-900);
  --gray-950: var(--color-gray-950);

  /* ── 2. Untitled UI Signature Primary Violet Scale ────────────────────────── */
  --color-primary-25:  #FCFAFF;
  --color-primary-50:  #F9F5FF;
  --color-primary-100: #F4EBFF;
  --color-primary-200: #E9D7FE;
  --color-primary-300: #D6BBFB;
  --color-primary-400: #B692F6;
  --color-primary-500: #9E77ED;
  --color-primary-600: #7F56D9; /* Untitled UI Brand Color */
  --color-primary-700: #6941C6;
  --color-primary-800: #53389E;
  --color-primary-900: #42307D;
  --color-primary-950: #2C1C5F;

  /* Shorthand aliases for Primary Violet */
  --primary-25:  var(--color-primary-25);
  --primary-50:  var(--color-primary-50);
  --primary-100: var(--color-primary-100);
  --primary-200: var(--color-primary-200);
  --primary-300: var(--color-primary-300);
  --primary-400: var(--color-primary-400);
  --primary-500: var(--color-primary-500);
  --primary-600: var(--color-primary-600);
  --primary-700: var(--color-primary-700);
  --primary-800: var(--color-primary-800);
  --primary-900: var(--color-primary-900);
  --primary-950: var(--color-primary-950);

  /* ── 3. Untitled UI Semantic Scales ──────────────────────────────────────── */
  /* Success */
  --color-success-25:  #F6FEF9;
  --color-success-50:  #ECFDF3;
  --color-success-100: #D1FADF;
  --color-success-200: #A6F4C5;
  --color-success-300: #6CE9A6;
  --color-success-400: #32D583;
  --color-success-500: #12B76A; /* Untitled UI Success Standard */
  --color-success-600: #039855;
  --color-success-700: #027A48;
  --color-success-800: #05603A;
  --color-success-900: #054F31;

  --success-25:  var(--color-success-25);
  --success-50:  var(--color-success-50);
  --success-100: var(--color-success-100);
  --success-200: var(--color-success-200);
  --success-300: var(--color-success-300);
  --success-400: var(--color-success-400);
  --success-500: var(--color-success-500);
  --success-600: var(--color-success-600);
  --success-700: var(--color-success-700);

  /* Warning */
  --color-warning-25:  #FFFCF5;
  --color-warning-50:  #FFFAEB;
  --color-warning-100: #FEF0C7;
  --color-warning-200: #FEDF89;
  --color-warning-300: #FEC84B;
  --color-warning-400: #FDB022;
  --color-warning-500: #F79009; /* Untitled UI Warning Standard */
  --color-warning-600: #DC6803;
  --color-warning-700: #B54708;
  --color-warning-800: #93370D;
  --color-warning-900: #7A2E0E;

  --warning-25:  var(--color-warning-25);
  --warning-50:  var(--color-warning-50);
  --warning-100: var(--color-warning-100);
  --warning-200: var(--color-warning-200);
  --warning-300: var(--color-warning-300);
  --warning-400: var(--color-warning-400);
  --warning-500: var(--color-warning-500);
  --warning-600: var(--color-warning-600);
  --warning-700: var(--color-warning-700);

  /* Error / Danger */
  --color-error-25:  #FFFBFA;
  --color-error-50:  #FEF3F2;
  --color-error-100: #FEE4E2;
  --color-error-200: #FECDCA;
  --color-error-300: #FDA29B;
  --color-error-400: #F97066;
  --color-error-500: #F04438; /* Untitled UI Error Standard */
  --color-error-600: #D92D20;
  --color-error-700: #B42318;
  --color-error-800: #912018;
  --color-error-900: #7A271A;

  --error-25:  var(--color-error-25);
  --error-50:  var(--color-error-50);
  --error-100: var(--color-error-100);
  --error-200: var(--color-error-200);
  --error-300: var(--color-error-300);
  --error-400: var(--color-error-400);
  --error-500: var(--color-error-500);
  --error-600: var(--color-error-600);
  --error-700: var(--color-error-700);

  /* Info / Sky */
  --color-info-25:  #F5FBFF;
  --color-info-50:  #F0F9FF;
  --color-info-100: #E0F2FE;
  --color-info-200: #B9E6FE;
  --color-info-300: #7CD4FD;
  --color-info-400: #36BFFA;
  --color-info-500: #0BA5EC; /* Untitled UI Info Standard */
  --color-info-600: #0284C7;
  --color-info-700: #0369A1;
  --color-info-800: #075985;
  --color-info-900: #0C4A6E;

  --info-25:  var(--color-info-25);
  --info-50:  var(--color-info-50);
  --info-100: var(--color-info-100);
  --info-200: var(--color-info-200);
  --info-300: var(--color-info-300);
  --info-400: var(--color-info-400);
  --info-500: var(--color-info-500);
  --info-600: var(--color-info-600);
  --info-700: var(--color-info-700);

  /* ── 4. Typography Hierarchy ─────────────────────────────────────────────── */
  --font: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: var(--font);
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --mono: var(--font-mono);

  /* Font Sizes */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-md:   14px;
  --text-base: 14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  20px;
  --text-3xl:  24px;
  --text-4xl:  30px;

  /* Line Heights */
  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  /* ── 5. Radii & Layout Dimensions ────────────────────────────────────────── */
  --r-none: 0px;
  --r-xxs:  2px;
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   10px;
  --r-xl:   12px;
  --r-2xl:  16px;
  --r-3xl:  20px;
  --r-4xl:  24px;
  --r-full: 9999px;

  /* Radius compatibility */
  --radius-xs:   var(--r-xs);
  --radius-sm:   var(--r-sm);
  --radius-md:   var(--r-md);
  --radius-lg:   var(--r-lg);
  --radius-xl:   var(--r-xl);
  --radius-2xl:  var(--r-2xl);
  --radius-full: var(--r-full);

  /* Layout */
  --sidebar-w: 240px;
  --topbar-h:  56px;

  /* Transitions */
  --ease:        150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-md:     200ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: var(--ease);

  /* ── 6. Semantic Theme Bindings (Default / Light Mode) ───────────────────── */
  /* Surfaces */
  --bg-base:           #F9FAFB; /* Gray 50 */
  --bg-page:           #F9FAFB;
  --bg-app:            #F9FAFB;
  --bg-surface:        #FFFFFF;
  --bg-card:           #FFFFFF;
  --bg-raised:         #F2F4F7; /* Gray 100 */
  --bg-surface-raised: #F2F4F7;
  --bg-surface-sunken: #EAECF0; /* Gray 200 */
  --bg-input:          #FFFFFF;
  --bg-overlay:        rgba(16, 24, 40, 0.6);

  /* Borders */
  --border:         #EAECF0; /* Gray 200 */
  --border-subtle:  #F2F4F7; /* Gray 100 */
  --border-default: #EAECF0; /* Gray 200 */
  --border-md:      #D0D5DD; /* Gray 300 */
  --border-lg:      #98A2B3; /* Gray 400 */
  --border-focus:   #7F56D9; /* Primary 600 */

  /* Text & Foreground */
  --fg-1:       #101828; /* Gray 900 */
  --fg-default: #101828;
  --fg-2:       #344054; /* Gray 700 */
  --fg-muted:   #475467; /* Gray 600 */
  --fg-3:       #667085; /* Gray 500 */
  --fg-subtle:  #667085;
  --fg-4:       #98A2B3; /* Gray 400 */
  --fg-faint:   #98A2B3;

  /* Accent (Untitled UI Signature Violet) */
  --accent:        #7F56D9; /* Primary 600 */
  --accent-hover:  #6941C6; /* Primary 700 */
  --accent-active: #53389E; /* Primary 800 */
  --accent-subtle: #F9F5FF; /* Primary 50 */
  --accent-border: #D6BBFB; /* Primary 300 */
  --accent-fg:     #FFFFFF;

  --primary:            var(--accent);
  --primary-hover:      var(--accent-hover);
  --primary-focus-ring: 0 0 0 4px #F4EBFF;

  /* Semantics */
  --green:         #12B76A;
  --green-subtle:  #ECFDF3;
  --green-border:  #A6F4C5;
  --green-fg:      #027A48;
  --success:        var(--green);
  --success-subtle: var(--green-subtle);
  --success-border: var(--green-border);

  --amber:         #F79009;
  --amber-subtle:  #FFFAEB;
  --amber-border:  #FEDF89;
  --amber-fg:      #B54708;
  --warning:        var(--amber);
  --warning-subtle: var(--amber-subtle);
  --warning-border: var(--amber-border);

  --red:           #F04438;
  --red-subtle:    #FEF3F2;
  --red-border:    #FECDCA;
  --red-fg:        #B42318;
  --danger:         var(--red);
  --danger-subtle:  var(--red-subtle);
  --danger-border:  var(--red-border);
  --error:          var(--red);
  --error-subtle:   var(--red-subtle);
  --error-border:   var(--red-border);

  --sky:           #0BA5EC;
  --sky-subtle:    #F0F9FF;
  --sky-border:    #B9E6FE;
  --sky-fg:        #0284C7;
  --info:           var(--sky);
  --info-subtle:    var(--sky-subtle);
  --info-border:    var(--sky-border);

  /* Shadows (Untitled UI Light Elevation) */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
  --shadow-2xl: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
  --shadow-accent: 0 4px 16px rgba(127, 86, 217, 0.25);
}

/* Explicit Light Mode Selector */
[data-theme="light"],
.light {
  /* Surfaces */
  --bg-base:           #F9FAFB;
  --bg-page:           #F9FAFB;
  --bg-app:            #F9FAFB;
  --bg-surface:        #FFFFFF;
  --bg-card:           #FFFFFF;
  --bg-raised:         #F2F4F7;
  --bg-surface-raised: #F2F4F7;
  --bg-surface-sunken: #EAECF0;
  --bg-input:          #FFFFFF;
  --bg-overlay:        rgba(16, 24, 40, 0.6);

  /* Borders */
  --border:         #EAECF0;
  --border-subtle:  #F2F4F7;
  --border-default: #EAECF0;
  --border-md:      #D0D5DD;
  --border-lg:      #98A2B3;
  --border-focus:   #7F56D9;

  /* Text & Foreground */
  --fg-1:       #101828;
  --fg-default: #101828;
  --fg-2:       #344054;
  --fg-muted:   #475467;
  --fg-3:       #667085;
  --fg-subtle:  #667085;
  --fg-4:       #98A2B3;
  --fg-faint:   #98A2B3;

  /* Accent */
  --accent:        #7F56D9;
  --accent-hover:  #6941C6;
  --accent-active: #53389E;
  --accent-subtle: #F9F5FF;
  --accent-border: #D6BBFB;
  --accent-fg:     #FFFFFF;

  --primary:            var(--accent);
  --primary-hover:      var(--accent-hover);
  --primary-focus-ring: 0 0 0 4px #F4EBFF;

  /* Semantics */
  --green:         #12B76A;
  --green-subtle:  #ECFDF3;
  --green-border:  #A6F4C5;
  --green-fg:      #027A48;
  --success:        var(--green);
  --success-subtle: var(--green-subtle);
  --success-border: var(--green-border);

  --amber:         #F79009;
  --amber-subtle:  #FFFAEB;
  --amber-border:  #FEDF89;
  --amber-fg:      #B54708;
  --warning:        var(--amber);
  --warning-subtle: var(--amber-subtle);
  --warning-border: var(--amber-border);

  --red:           #F04438;
  --red-subtle:    #FEF3F2;
  --red-border:    #FECDCA;
  --red-fg:        #B42318;
  --danger:         var(--red);
  --danger-subtle:  var(--red-subtle);
  --danger-border:  var(--red-border);
  --error:          var(--red);
  --error-subtle:   var(--red-subtle);
  --error-border:   var(--red-border);

  --sky:           #0BA5EC;
  --sky-subtle:    #F0F9FF;
  --sky-border:    #B9E6FE;
  --sky-fg:        #0284C7;
  --info:           var(--sky);
  --info-subtle:    var(--sky-subtle);
  --info-border:    var(--sky-border);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
  --shadow-accent: 0 4px 16px rgba(127, 86, 217, 0.25);
}

/* ── 7. Untitled UI Midnight Dark Mode ────────────────────────────────────── */
[data-theme="dark"],
.dark {
  /* Surfaces: Deep Midnight Canvas & Elevated Card Surfaces */
  --bg-base:           #0C111D; /* Gray 950 Deep Midnight Canvas */
  --bg-page:           #0C111D;
  --bg-app:            #0C111D;
  --bg-surface:        #101828; /* Gray 900 Elevated Card Surface */
  --bg-card:           #101828;
  --bg-raised:         #161B26; /* Midnight Elevated Surface */
  --bg-surface-raised: #161B26;
  --bg-surface-sunken: #0C111D;
  --bg-input:          #101828;
  --bg-overlay:        rgba(12, 17, 29, 0.85);

  /* Borders: Subtle Midnight Borders */
  --border:         #1F242F; /* Gray 800ish */
  --border-subtle:  rgba(255, 255, 255, 0.08);
  --border-default: #1F242F;
  --border-md:      rgba(255, 255, 255, 0.12);
  --border-lg:      rgba(255, 255, 255, 0.18);
  --border-focus:   #9E77ED; /* Primary 500 */

  /* High-Contrast Text */
  --fg-1:       #F9FAFB; /* Gray 50 (High Contrast) */
  --fg-default: #F9FAFB;
  --fg-2:       #D0D5DD; /* Gray 300 */
  --fg-muted:   #98A2B3; /* Gray 400 */
  --fg-3:       #98A2B3; /* Gray 400 */
  --fg-subtle:  #667085; /* Gray 500 */
  --fg-4:       #667085; /* Gray 500 */
  --fg-faint:   #475467; /* Gray 600 */

  /* Accent in Dark Mode */
  --accent:        #7F56D9; /* Primary 600 */
  --accent-hover:  #9E77ED; /* Primary 500 */
  --accent-active: #6941C6; /* Primary 700 */
  --accent-subtle: rgba(127, 86, 217, 0.15);
  --accent-border: rgba(127, 86, 217, 0.35);
  --accent-fg:     #FFFFFF;

  --primary:            var(--accent);
  --primary-hover:      var(--accent-hover);
  --primary-focus-ring: 0 0 0 4px rgba(127, 86, 217, 0.24);

  /* Semantics in Dark Mode */
  --green:         #12B76A; /* Success 500 */
  --green-subtle:  rgba(18, 183, 106, 0.15);
  --green-border:  rgba(18, 183, 106, 0.35);
  --green-fg:      #32D583;
  --success:        var(--green);
  --success-subtle: var(--green-subtle);
  --success-border: var(--green-border);

  --amber:         #F79009; /* Warning 500 */
  --amber-subtle:  rgba(247, 144, 9, 0.15);
  --amber-border:  rgba(247, 144, 9, 0.35);
  --amber-fg:      #FDB022;
  --warning:        var(--amber);
  --warning-subtle: var(--amber-subtle);
  --warning-border: var(--amber-border);

  --red:           #F04438; /* Error 500 */
  --red-subtle:    rgba(240, 68, 56, 0.15);
  --red-border:    rgba(240, 68, 56, 0.35);
  --red-fg:        #F97066;
  --danger:         var(--red);
  --danger-subtle:  var(--red-subtle);
  --danger-border:  var(--red-border);
  --error:          var(--red);
  --error-subtle:   var(--red-subtle);
  --error-border:   var(--red-border);

  --sky:           #0BA5EC; /* Info 500 */
  --sky-subtle:    rgba(11, 165, 236, 0.15);
  --sky-border:    rgba(11, 165, 236, 0.35);
  --sky-fg:        #36BFFA;
  --info:           var(--sky);
  --info-subtle:    var(--sky-subtle);
  --info-border:    var(--sky-border);

  /* Shadows in Dark Mode */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 20px 24px -4px rgba(0, 0, 0, 0.6), 0 8px 8px -4px rgba(0, 0, 0, 0.5);
  --shadow-2xl: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
  --shadow-accent: 0 4px 16px rgba(127, 86, 217, 0.35);
}