/* ============================================================
   HRMS Design Tokens — Central CSS Custom Properties
   Source: joblumin.com (primary teal) + Zoho People (square, flat)
   Date: 27 June 2026
   ============================================================ */

:root {
  /* === BRAND (from joblumin.com — Teal) === */
  --primary:         #0d9488;
  --primary-hover:   #0f766e;
  --primary-light:   #f0fdfa;
  --primary-dark:    #115e59;

  --primary-color: var(--primary);    /* legacy alias */
  --hover-color: var(--primary-hover); /* legacy alias */

  /* === JOBLUMIN ACCENT BLUE (focus rings, CTAs) === */
  --accent:          #2563eb;
  --accent-light:    #eff6ff;

  /* === SEMANTIC COLORS (Zoho: all distinct) === */
  --success:         #10b981;
  --success-light:   #ecfdf5;
  --warning:         #d97706;
  --warning-light:   #fffbeb;
  --danger:          #ee0014;      /* Zoho red — NOT same as primary */
  --danger-light:    #fee2e2;
  --info:            #0ea5e9;
  --info-light:      #f0f9ff;

  /* === NEUTRAL / GRAYS === */
  --white:           #ffffff;
  --gray-50:         #f9fafb;
  --gray-100:        #f3f4f6;
  --gray-200:        #e5e7eb;
  --gray-300:        #d1d5db;
  --gray-400:        #9ca3af;
  --gray-500:        #6b7280;
  --gray-600:        #4b5563;
  --gray-700:        #374151;
  --gray-800:        #1f2937;
  --gray-900:        #111827;

  /* === BODY === */
  --body-bg:         #f9fafb;
  --body-color:      #1f2937;
  --text-muted:      #6b7280;
  /* === TABLES (Zoho: compact, square) === */
  --table-header-bg:       #f9fafb;
  --table-header-color:    #374151;
  --table-border:          #e5e7eb;
  --table-stripe:          #f9fafb;
  --table-hover:           #f3f4f6;

  /* === CARDS (joblumin: 4px radius) === */
  --card-bg:               #ffffff;
  --card-border:           #e5e7eb;
  --card-header-bg:        #f9fafb;
  --card-header-border:    #e5e7eb;

  /* === FORMS (Zoho: square inputs, compact) === */
  --input-bg:              #ffffff;
  --input-border:          #d1d5db;
  --input-color:           #1f2937;
  --input-placeholder:     #9ca3af;
  --input-focus-border:    #2563eb;
  --input-focus-ring:      0 0 0 2px rgba(37, 99, 235, 0.15);
  --input-disabled-bg:     #f3f4f6;

  /* === BUTTONS (Zoho: flat, compact) === */
  --btn-font-weight:       500;
  --btn-border-radius:     4px;

  /* === SIDEBAR (Zoho: dark, flat, compact) === */
  --sidebar-bg:            #1f2937;
  --sidebar-width:         280px;
  --sidebar-color:         #ffffff;
  --sidebar-active-bg:     #374151;
  --sidebar-active-color:  #ffffff;
  --sidebar-hover-bg:      #374151;
  --sidebar-header-bg:     #111827;

  /* === HEADER (Zoho: 54px, white, minimal) === */
  --header-bg:             #ffffff;
  --header-height:         48px;
  --header-border:         #e5e7eb;

  /* === SHADOWS (Zoho: minimal, flat) === */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg:  0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-xl:  0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);

  /* === BORDER RADIUS (Zoho: square style) === */
  --radius:      4px;      /* Cards, buttons (base) */
  --radius-sm:   2px;      /* Badges, tags */
  --radius-md:   8px;      /* Cards, panels */
  --radius-lg:  12px;      /* Modals, large panels */
  --radius-xl:  20px;      /* Hero sections */
  --radius-pill: 9999px;   /* Avatars */

  /* === MISC === */
  --border-default:      #e5e7eb;
  --font-family-base: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --primary-rgb: 13, 148, 136;
}