/* Keka-inspired theme (theme-purple / dark-mode)
   Source tokens from Keka HR UI */
:root,
html.theme-purple,
html.theme-purple.dark-mode {
  /* ── Keka canonical tokens ── */
  --primary-color-text:       #E2E8EB;
  --secondary-color-text:     #A3B5C2;
  --hint-color-text:          #8DB1BF;
  --border-color:             #143752;
  --background-color-light:   #0B151D;
  --primary-background-color: #0A1D2C;
  --secondary-background-color: #102940;
  --background-color-hover:   #0B151D;
  --input-border-color:       #19486D;
  --primary-color:            #5746AF;
  --primary-color-light:      #271F3F;
  --gradient-color:           #5746AF;
  --primary-color-RGB:        87, 70, 175;
  --primary-button-bg:        #B399FF;
  --primary-button-hover-bg:  #E2DDFE;
  --primary-button-text:      #271F3F;
  --primary-button-hover-text:#1a1230;
  --primary-link-color:       #B399FF;

  /* Nav / chrome */
  --nav-bg:          rgba(10, 29, 44, 0.95);
  --nav-bg-scrolled: rgba(10, 29, 44, 0.98);
  --meta-theme-color: #0A1D2C;

  /* Selection & focus */
  --selection-bg:   rgba(87, 70, 175, 0.35);
  --selection-text: #E2E8EB;
  --focus-ring:     #B399FF;

  /* ── Masix aliases (used across page stylesheets) ── */
  --bg:         var(--primary-background-color);
  --bg2:        var(--secondary-background-color);
  --bg3:        var(--background-color-light);
  --bg-card:    var(--secondary-background-color);
  --bg-hover:   var(--background-color-hover);
  --glass:      rgba(16, 41, 64, 0.92);
  --glass-hi:   var(--secondary-background-color);

  --cyan:       var(--primary-link-color);
  --cyan2:      var(--primary-color);
  --accent:     var(--primary-color);
  --accent2:    var(--primary-color);

  --border:     var(--border-color);
  --border-lit: var(--input-border-color);
  --border-accent: rgba(var(--primary-color-RGB), 0.45);
  --border2:    var(--border-accent);
  --blur:       blur(18px);

  /* App shell */
  --sb:         240px;   /* fixed sidebar width — main content offsets by this */
  --content-max: 1720px;

  --t0:         var(--primary-color-text);
  --t1:         var(--secondary-color-text);
  --t2:         var(--hint-color-text);
  --t3:         #4A6275;
  --heading-color: var(--primary-color-text);
  --text-1:     var(--secondary-color-text);
  --text-2:     var(--hint-color-text);
  --text-3:     #4A6275;

  --green:   #3DDC97;
  --red:     #F87171;
  --yellow:  #FBBF24;
  --orange:  #FB923C;
  --gold:    var(--primary-link-color);
  --gold2:   var(--primary-color);
  --purple:  var(--primary-color);
  --teal:    #5EEAD4;

  --sidebar-bg:  var(--background-color-light);
  --topbar-bg:   var(--primary-background-color);
  --input-bg:    var(--background-color-light);
  --table-head:  var(--background-color-light);
  --table-hover: var(--secondary-background-color);

  --font-display: 'Roboto', sans-serif;
  --font-body:    'Roboto', sans-serif;
  --font-mono:    'Roboto Mono', monospace;
  --fh: var(--font-display);
  --fb: var(--font-body);
  --fm: var(--font-mono);

  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --shadow-glow: 0 0 32px rgba(var(--primary-color-RGB), 0.25);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow:      0 4px 20px rgba(0, 0, 0, 0.25);

  color-scheme: dark;
}