/*
 * tokens.css — HD Design System tokens (single source of truth)
 * --------------------------------------------------------------------------
 * Loaded on every ZK page via <theme-uri> in WEB-INF/zk.xml, so any stylesheet
 * (global or per-page) can reference these variables. Change a value here and
 * it propagates everywhere -- no more hard-coded hex scattered across files.
 *
 * Values come from the HD Design Library (Figma node 196-17), mirrored in
 * invoker-core: libs/shared/design-system/src/lib/styles/lightTheme.ts. Each
 * token is annotated with its HD palette name.
 */
:root{
  /* ---- brand / primary (blue) ---- */
  --hd-primary:        #003396;  /* blue100  (primary button bg) */
  --hd-primary-hover:  #1846A0;  /* blue90 */
  --hd-primary-press:  #003396;  /* blue100 */
  --hd-on-primary:     #FFFFFF;  /* white100 */
  --hd-primary-soft:   #E6EEFF;  /* blue5  (tints / selected fills) */

  /* ---- neutrals ---- */
  --hd-bg:        #ECEEF0;  /* grayBlue5   (page background) */
  --hd-surface:   #FFFFFF;  /* white100    (cards / panels) */
  --hd-surface-2: #F7F8F9;  /* white90     (subtle inset panels) */
  --hd-text:      #282E38;  /* blackBlue100 */
  --hd-text-muted:#64748B;  /* grayBlue100 */
  --hd-border:    #CCCFD4;  /* grayBlue20 */
  --hd-line:      #D9DBDE;  /* grayBlue10 */

  /* table / list */
  --hd-header-bg:   #ECEEF0;  /* grayBlue5 */
  --hd-row-hover:   #F1F7FF;  /* lightBlue5 */
  --hd-row-selected:#E6EEFF;  /* blue5 */

  /* ---- form fields / dropdowns ---- */
  --hd-field-border:  #CCCFD4;  /* grayBlue20 (resting field border) */
  --hd-field-hover:   #486DB3;  /* blue70  (hover border) */
  --hd-field-focus:   #003396;  /* blue100 (focus border) */
  --hd-field-ring:    #A9BADA;  /* blue30  (focus outline ring) */
  --hd-field-radius:  6px;      /* corner6 */
  --hd-placeholder:   #878A8F;  /* blackBlue50 */
  --hd-option-hover:  #CFDFF4;  /* lightBlue20 (popup option hover) */
  --hd-shadow-menu:   0 2px 12px 0 rgba(40,46,56,.18);  /* shadowMenu */

  /* neutral (secondary) control */
  --hd-neutral-bg:    #74787E;  /* blackBlue60 */
  --hd-neutral-hover: #61656C;  /* blackBlue70 */
  --hd-on-neutral:    #FFFFFF;  /* white100 */

  /* ---- semantic ---- */
  --hd-danger:        #D6302D;  /* red100 */
  --hd-danger-bg:     #FFF2F2;  /* red5 */
  --hd-danger-border: #F5BBBA;  /* red30 */
  --hd-success:       #008245;  /* green100 */
  --hd-warning:       #FFB300;  /* yellow70 */
  --hd-info:          #0C76D8;  /* lightBlue100 */

  /* ---- shape & type ---- */
  --hd-radius:      10px;
  --hd-radius-card: 14px;
  --hd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* shadows */
  --hd-shadow-sm: 0 1px 2px rgba(40,46,56,.06), 0 6px 16px -10px rgba(40,46,56,.20);
}