/* ============================================================
   Help Desk Theme — Design Tokens
   Shared CSS variables for the client portal + staff panel themes.
   Edit THIS file to update brand colors everywhere at once.
   ============================================================ */

:root {
  /* --- Help Desk Brand Palette (update to exact PMS/hex when you have
         the official brand sheet — these are placeholder-but-real
         navy/gold government-style values) --- */
  --helpdesk-navy-900:   #0a1f44;   /* primary header / nav */
  --helpdesk-navy-800:   #102a56;
  --helpdesk-navy-700:   #163a70;
  --helpdesk-navy-600:   #1e4c8f;
  --helpdesk-gold-500:   #f2a900;   /* primary accent */
  --helpdesk-gold-600:   #d69400;
  --helpdesk-gold-100:   #fdf1d6;
  --helpdesk-white:      #ffffff;
  --helpdesk-gray-50:    #f7f8fa;
  --helpdesk-gray-100:   #eef0f3;
  --helpdesk-gray-200:   #dde1e7;
  --helpdesk-gray-300:   #c3c9d1;
  --helpdesk-gray-500:   #6b7280;
  --helpdesk-gray-700:   #374151;
  --helpdesk-gray-900:   #1a1d23;

  /* --- Status colors (kept close to osTicket defaults so agents'
         muscle memory for open/overdue/closed still works) --- */
  --helpdesk-status-open:     #1e8e5a;
  --helpdesk-status-overdue:  #d64545;
  --helpdesk-status-pending:  #d69400;
  --helpdesk-status-closed:   #6b7280;

  /* --- Typography --- */
  --helpdesk-font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                     Helvetica, Arial, sans-serif;
  --helpdesk-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* --- Layout --- */
  --helpdesk-radius-sm: 4px;
  --helpdesk-radius-md: 8px;
  --helpdesk-radius-lg: 14px;
  --helpdesk-shadow-sm: 0 1px 2px rgba(10, 31, 68, 0.08);
  --helpdesk-shadow-md: 0 4px 14px rgba(10, 31, 68, 0.12);
  --helpdesk-shadow-lg: 0 10px 30px rgba(10, 31, 68, 0.18);
  --helpdesk-header-height: 64px;
  --helpdesk-header-height-mobile: 56px;

  /* --- Focus ring (accessibility) --- */
  --helpdesk-focus-ring: 0 0 0 3px rgba(242, 169, 0, 0.5);

  /* --- Spacing scale --- */
  --helpdesk-space-1: 4px;
  --helpdesk-space-2: 8px;
  --helpdesk-space-3: 12px;
  --helpdesk-space-4: 16px;
  --helpdesk-space-5: 24px;
  --helpdesk-space-6: 32px;

  /* --- Motion --- */
  --helpdesk-transition-fast: 120ms ease;
  --helpdesk-transition-base: 200ms ease;

  /* --- Touch target minimum (WCAG 2.5.5 / iOS HIG) --- */
  --helpdesk-touch-target: 44px;

  /* --- z-index scale --- */
  --helpdesk-z-nav: 900;
  --helpdesk-z-overlay: 950;
  --helpdesk-z-modal: 1000;
  --helpdesk-z-toast: 1100;
}

/* --- Dark mode overrides (staff panel opts in via [data-theme="dark"],
       client portal respects OS preference automatically) --- */
@media (prefers-color-scheme: dark) {
  :root {
    --helpdesk-gray-50:  #14181f;
    --helpdesk-gray-100: #1b202a;
    --helpdesk-gray-200: #293142;
    --helpdesk-gray-300: #3a4557;
    --helpdesk-white:    #1b202a;
    --helpdesk-gray-900: #eef0f3;
    --helpdesk-gray-700: #c3c9d1;
  }
}

[data-theme="dark"] {
  --helpdesk-gray-50:  #14181f;
  --helpdesk-gray-100: #1b202a;
  --helpdesk-gray-200: #293142;
  --helpdesk-gray-300: #3a4557;
  --helpdesk-white:    #1b202a;
  --helpdesk-gray-900: #eef0f3;
  --helpdesk-gray-700: #c3c9d1;
}

/* --- Respect reduced-motion preference --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}