/* ================================================================
   variables.css — Design Tokens & CSS Custom Properties
   ----------------------------------------------------------------
   PURPOSE : Single source of truth for all colours, spacing,
             shadows, radii and transitions.
   EDIT HERE to re-theme the entire system without touching any
   other file.
   ================================================================ */

:root {
  /* ── Brand Palette ─────────────────────────────────────────── */
  --brand-900: #0F172A;
  --brand-800: #1E293B;
  --brand-700: #334155;
  --brand-600: #475569;
  --brand-500: #64748B;
  --brand-400: #94A3B8;
  --brand-300: #CBD5E1;
  --brand-200: #E2E8F0;
  --brand-100: #F1F5F9;
  --brand-50:  #F8FAFC;

  /* ── Primary Accent (Blue) ─────────────────────────────────── */
  --blue-700: #1D4ED8;
  --blue-600: #2563EB;
  --blue-500: #3B82F6;
  --blue-100: #DBEAFE;
  --blue-50:  #EFF6FF;

  /* ── Semantic Status Colours ───────────────────────────────── */
  --green:          #10B981;  --green-light:  #ECFDF5;  --green-border: #A7F3D0;
  --red:            #EF4444;  --red-light:    #FEF2F2;  --red-border:   #FECACA;
  --amber:          #F59E0B;  --amber-light:  #FFFBEB;  --amber-border: #FDE68A;
  --purple:         #8B5CF6;  --purple-light: #F5F3FF;  --purple-border:#DDD6FE;
  --cyan:           #06B6D4;  --cyan-light:   #ECFEFF;

  /* ── Semantic Aliases (used by components) ─────────────────── */
  --bg:         var(--brand-100);
  --card:       #FFFFFF;
  --border:     var(--brand-200);
  --text:       var(--brand-900);
  --text-sub:   var(--brand-600);
  --text-muted: var(--brand-400);

  /* ── Layout Dimensions ─────────────────────────────────────── */
  --sidebar-width:  240px;
  --topbar-height:  62px;

  /* ── Border Radii ──────────────────────────────────────────── */
  --r-sm:   6px;
  --r:      10px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-full: 9999px;
}
/* Tenant "Corner style" branding option (Administration → Appearance) */
:root[data-corners="sharp"]{ --r-sm:3px; --r:4px; --r-md:6px; --r-lg:9px; }
:root[data-corners="pill"] { --r-sm:11px; --r:16px; --r-md:22px; --r-lg:28px; }
:root{

  /* ── Box Shadows ───────────────────────────────────────────── */
  --sh-xs: 0 1px 2px rgba(0,0,0,.05);
  --sh-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --sh:    0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
  --sh-md: 0 10px 15px rgba(0,0,0,.09), 0 4px 6px rgba(0,0,0,.05);
  --sh-lg: 0 20px 25px rgba(0,0,0,.10), 0 8px 10px rgba(0,0,0,.05);

  /* ── Sidebar ───────────────────────────────────────────────── */
  --sidebar-bg:          var(--brand-900);
  --sidebar-hover:       var(--brand-800);
  --sidebar-active:      var(--blue-600);
  --sidebar-text:        var(--brand-400);
  --sidebar-text-active: #FFFFFF;

  /* ── Typography ────────────────────────────────────────────── */
  /* Apple Color Emoji is listed first among the emoji fonts so glyphs
     render in the iOS style wherever that font is available. */
  --emoji:   "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", "EmojiOne Color";
  --font:    'Segoe UI', system-ui, -apple-system, var(--emoji), sans-serif;
  --font-ar: 'Tahoma', 'Arial', var(--emoji), sans-serif;

  /* ── Transition ─────────────────────────────────────────────  */
  --t: all 0.17s ease;
}