/* =============================================================
   THEME TOKENS — CSS custom properties for mxprm2.0
   All theme files (theme-light/moderate/dark.css) override
   only the tokens that differ from these defaults.
   color.css.php overrides --color-accent and --color-accent-2.
   ============================================================= */

:root {
  /* --- Accent (overridden by color.css.php) --- */
  --color-accent:        #e64446;
  --color-accent-2:      #e64446;

  /* --- Text --- */
  --color-text:          #111111;
  --color-text-muted:    #999999;
  --color-text-header:   #ffffff;
  --color-text-nav:      #eeeeee;
  --color-text-input:    #111111;
  --color-text-placeholder: #999999;

  /* --- Surfaces --- */
  --color-surface:       #dddddd;
  --color-surface-alt:   #eeeeee;
  --color-header-bg:     #444444;
  --color-input-bg:      #f5f5f5;
  --color-dialog-header: #222222;
  --color-dialog-body:   #dddddd;
  --color-overlay:       rgba(0,0,0,0.5);

  /* --- Table --- */
  --color-tbl-th:            #909090;
  --color-tbl-th-alt:        #858585;
  --color-tbl-td:            #f5f5f5;
  --color-tbl-td-alt:        #eeeeee;
  --color-tbl-td-hover:      #eeeeee;
  --color-tbl-td-hover-alt:  #f8f8f8;
  --color-tbl-nested-bg:     #cccccc;
  --color-tbl-nested-th:     #aaaaaa;
  --color-tbl-nested-td:     #dfdfdf;

  /* --- Buttons --- */
  --color-btn:           #444444;
  --color-btn-text:      #ffffff;
  --color-btn-light:     #888888;

  /* --- Borders --- */
  --color-border:        #cccccc;
  --color-border-input:  #cccccc;
  --color-border-nav:    #777777;

  /* --- Sidebar / Nav --- */
  --color-nav-bg:        #666666;
  --color-nav-active:    #717171;
  --color-nav-sub-bg:    #444444;

  /* --- Scrollbar --- */
  --color-scrollbar-thumb: #444444;
  --color-scrollbar-track: rgba(0,0,0,0.1);

  /* --- Shadows --- */
  --color-shadow:        rgba(0,0,0,0.1);

  /* --- Form extras --- */
  --color-checkbox-mark: #ffffff;
  --color-form-head-bg:  #cccccc;
  --color-mx-list-bg:    #cccccc;
  --color-tag-bg:        #cccccc;
  --color-fileupload-bg: #cccccc;
  --color-grp-border:    #aaaaaa;
  --color-ve-wrap-bg:    #bebebe;
  --color-ve-wrap-arrow: #646464;

  /* --- Spacing (layout constants) --- */
  --gap-xs:   4px;
  --gap-sm:   8px;
  --gap-md:   12px;
  --gap-lg:   20px;
  --gap-xl:   30px;

  /* --- Sidebar widths --- */
  --sidebar-width:       246px;
  --sidebar-collapsed:   44px;

  /* --- Header heights --- */
  --header-height:        60px;
  --header-height-normal: 58px;
  --header-height-mobile: 40px;
}

/* --- Normal mode base tokens (fallback; overridden by body.light/dark/moderate) --- */
body.normal {
  --color-text:          #5a5a5a;
  --color-text-header:   #ffffff;
  --color-surface:       #fafafa;
  --color-surface-alt:   #f2f2f2;
  --color-header-bg:     #414141;
  --color-input-bg:      #ffffff;
  --color-border-input:  #e3e3e3;
  --color-nav-bg:        #414141;
  --color-btn:           #eaeaea;
  --color-btn-text:      #848484;
  --color-tbl-th:        #fafafa;
  --color-tbl-th-alt:    #fafafa;
  --color-tbl-td:        #f2f2f2;
  --color-tbl-td-alt:    #f2f2f2;
  --color-tbl-td-hover:  #e8e8e8;
  --color-shadow:        rgba(0,0,0,0.1);
  --color-dialog-body:   #ffffff;
  --color-form-head-bg:  transparent;
  --color-mx-list-bg:    transparent;
  --color-tag-bg:        transparent;
  --color-grp-border:    transparent;

  /* --- Normal sizing tokens (overridden by .compact modifier) --- */
  --nrm-input-h:         60px;
  --nrm-input-pad-x:     22px;
  --nrm-input-pad-y:     0px;
  --nrm-input-fs:        1.3rem;
  --nrm-label-fs:        1.3rem;
  --nrm-label-mb:        6px;
  --nrm-form-gap:        30px;
  --nrm-form-pad:        40px 10px 40px 40px;
  --nrm-form-mb:         25px;
  --nrm-col-gap:         30px;
  --nrm-tbl-th-pad:      20px 15px;
  --nrm-tbl-td-pad:      30px 10px;
  --nrm-tbl-chk-h:       18px;
  --nrm-tbl-chk-em:      18px;
  --nrm-tbl-ico-w:       30px;
  --nrm-tbl-ico-fs:      16px;
  --nrm-mxlist-pad:      22px 9px 9px 22px;
  --nrm-tag-pad:         8px;
  --nrm-tag-mar:         6px;
  --nrm-search-h:        40px;
  --nrm-ve-top:          calc(50% - 40px);
}

/* =============================================================
   CONTEXT TOKENS — --ctx-* sizing/spacing

   Rule: every sizing property must live in exactly one of:
     (a) bare selector in style.css / layout.css  → compact default
     (b) body.normal { }                           → Normal override
     (c) body.compact, body.normal .compact { }   → Compact token declaration

   Theme files (body.light/dark/moderate) contain ZERO sizing.

   These tokens are consumed by component rules in layout.css.
   CSS custom-property inheritance propagates context downward:
   a .compact element inside body.normal gets Compact values;
   its sibling outside .compact keeps Normal values.
   ============================================================= */

/* --- Normal context sizing tokens --- */
body.normal {
  /* Inputs */
  --ctx-input-h:            60px;
  --ctx-input-pad:          0px 22px;
  --ctx-input-fs:           1.3rem;
  --ctx-select-h:           60px;
  --ctx-select-pad:         0 30px 0 22px;
  --ctx-textarea-minh:      100px;
  --ctx-textarea-pad:       10px;

  /* Labels */
  --ctx-label-fs:           1.3rem;
  --ctx-label-mb:           6px;

  /* Form layout */
  --ctx-col-gap:            30px;
  --ctx-row-gap:            30px;
  --ctx-wrap-form-pad:      40px;
  --ctx-wrap-form-mb:       12px;

  /* Table */
  --ctx-tbl-th-pad:         20px 15px;
  --ctx-tbl-td-pad:         30px 10px;
  --ctx-tbl-chk-h:          18px;
  --ctx-tbl-chk-em:         18px;
  --ctx-tbl-ico-w:          30px;
  --ctx-tbl-ico-fs:         16px;

  /* Lists */
  --ctx-mxlist-pad:         22px 9px 9px 22px;
  --ctx-tag-pad:            8px;
  --ctx-tag-mar:            6px;

  /* Search bar */
  --ctx-search-h:           40px;

  /* Hover popup position */
  --ctx-ve-top:             calc(50% - 40px);

  /* Group wrap */
  --ctx-grp-ul-pad:         16px 12px 0;
  --ctx-grp-li-mb:          12px;
}

/* --- Compact context sizing tokens ---
   Applied on:
     body.compact              → compact body (Case B + D)
     body.normal .compact      → compact sub-element in normal body (Case C + E)

   A nested .compact inside body.compact re-declares same values → no change (Case D ✅)
   Siblings outside .compact in body.normal keep Normal values (Case C ✅) */
body.compact,
body.normal .compact {
  /* Inputs */
  --ctx-input-h:            38px;
  --ctx-input-pad:          0px 10px;
  --ctx-input-fs:           1.3rem;
  --ctx-select-h:           38px;
  --ctx-select-pad:         0 30px 0 10px;
  --ctx-textarea-minh:      38px;
  --ctx-textarea-pad:       10px;

  /* Labels */
  --ctx-label-fs:           1.1rem;
  --ctx-label-mb:           2px;

  /* Form layout */
  --ctx-col-gap:            12px;
  --ctx-row-gap:            12px;
  --ctx-wrap-form-pad:      12px;
  --ctx-wrap-form-mb:       8px;

  /* Table */
  --ctx-tbl-th-pad:         8px 6px;
  --ctx-tbl-td-pad:         4px 6px;
  --ctx-tbl-chk-h:          14px;
  --ctx-tbl-chk-em:         14px;
  --ctx-tbl-ico-w:          24px;
  --ctx-tbl-ico-fs:         22px;

  /* Lists */
  --ctx-mxlist-pad:         8px 6px 6px 8px;
  --ctx-tag-pad:            4px;
  --ctx-tag-mar:            3px;

  /* Search bar */
  --ctx-search-h:           28px;

  /* Hover popup position */
  --ctx-ve-top:             calc(50% - 15px);

  /* Group wrap */
  --ctx-grp-ul-pad:         8px 8px 0;
  --ctx-grp-li-mb:          8px;
}