/* INOVIU shared theme — change a var here, every grid/panel restyles */
:root {
  --th-bg:                  #f4f5f6;
  --th-accent:              #1a73e8;
  --th-navy:                #1F4E79;

  --th-border:              #d0d4d9;
  --th-border-light:        #e8eaed;

  --th-header-bg:           #eef1f5;
  --th-row-even:            #ffffff;
  --th-row-odd:             #f9fafb;
  --th-row-hover:           #edf3ff;
  --th-row-selected:        #d2e3fc;
  --th-row-selected-border: #1a73e8;

  --th-font-size:           13px;
  /* PADDING INSIDE THE CELL, NOT AROUND IT (Alex, 2026-08-03: "my original intent
     was not to have less padding over all, but to have the cells not being
     smaller -- like if the padding was in the cell but not around").
     Yesterday's 0 conflated two things. The gap he wanted gone was the one AROUND
     an in-cell control -- an input at width:100% only fills the td's CONTENT box,
     so cell padding pushed its border inward and it floated inside its own cell.
     Killing the padding cured that but also put read-mode text on the gridline,
     which he never asked for. So they are separated now:
       --th-cell-pad     text inset for an ordinary read cell (restored to 4px 8px)
       --th-cell-inset   the SAME inset carried INSIDE a control, so its text lines
                         up with read mode and the box still spans the full cell
     A control that fills its cell zeroes the cell padding -- see the rule below. */
  /* Bumped 4px→8px vertical (2026-08-22, Alex: "the [Components] rows are kind of
     twice the size. I would like to try to have all the rows of all the grid
     twice the size" — Components' own ~39-40px row height, per --th-row-min-h
     above, was never a token difference from other grids; it comes from that
     grid's own multi-line cells. This is the lever that actually raises every
     OTHER grid's single-line rows to sit close to that height too. */
  --th-cell-pad:            8px 8px;
  --th-header-pad:          5px 8px;
  /* TEST VALUE (Alex, 2026-08-03: "can we do a test with the same 4 & 8 instead
     of 3 & 7 to see the differences"). Flip this one line to compare.
       4px 8px  same NUMBER as the cell -- but a control also draws a 1px border
                the cell does not, so its box ends up 2px taller and its text 1px
                lower than the read cell next to it.
       3px 7px  --th-cell-pad MINUS that border: box and text match to the pixel.
     Not an arbitrary preference either way -- 3/7 is 4/8 minus the border. */
  --th-cell-inset:          8px 8px;
  /* A <select> at 13px gets a 17px intrinsic line box from Chrome where a <span>
     gets 15px, so a dropdown sat 2px proud of the text cells around it (Alex,
     2026-08-03: "the drop down are slightly taller than the cell"). Pinning the
     controls to the text's own ratio removes that, independently of the inset. */
  --th-cell-line-h:         1.15;
  /* The height a body row settles at once it carries its icon buttons (measured
     2026-08-01: 39-40px). The EMPTY add row had none of that content and came out
     22px, reading as a thin gap rather than a row -- Alex: "when not selected, that
     hole looks like the other one but empty, which means a little bit wider". */
  --th-row-min-h:           38px;

  /* Type scale */
  --fs-title: 16px;
  --fs-body:  13px;
  --fs-mono:  13px;
  --fs-small: 11px;
  --fs-micro: 10px;
  --ff-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Tree / Grid tokens (--tg-*) — tree+grid styling lives here, not in component JSX */
  --tg-node-active-bg:      #e8f0fb;
  --tg-node-l0-bg:          #f3f6fa;
  --tg-node-active-border:  3px solid var(--th-navy);
  --tg-node-inactive-border: 3px solid transparent;
  --tg-node-l0-border-btm:  1px solid #e9ecef;
  --tg-node-l0-pad-y:       8px;
  --tg-node-l1-pad-y:       6px;
  --tg-node-l2-pad-y:       5px;
  --tg-node-pad-x:          8px;
  --tg-node-indent:         14px;
  --tg-code-color-l0:       var(--th-navy);
  --tg-code-color-other:    #6c757d;
  --tg-label-color:         #374151;
  --tg-filter-border:       1px solid #dee2e6;
  --tg-filter-pad:          6px 8px;

  /* Workspace splitter (HierarchyWorkspace nav-resize handle hover) */
  --tg-splitter-hover:      #b0c4de;

  /* Status glyph — shape carries meaning; muted so it blends like a code chip */
  --tg-glyph-bg:            rgba(0, 0, 0, 0.06);
  --tg-glyph-color:         #555;
  --tg-glyph-border:        1px solid rgba(0,0,0,0.12);
  --tg-glyph-radius:        3px;
  --tg-glyph-pad:           1px 5px;

  /* DataGrid edit-mode action buttons */
  --tg-save-bg:             var(--th-navy);
  --tg-save-color:          #fff;
  --tg-save-border:         1px solid var(--th-navy);
  --tg-cancel-bg:           #fff;
  --tg-cancel-color:        #6c757d;
  --tg-cancel-border:       1px solid #dee2e6;
  --tg-editbtn-pad:         2px 10px;
  --tg-editbtn-radius:      3px;

  /* Delete/warn row colours */
  --tg-warn-bg:             #fff3cd;
  --tg-warn-border-left:    3px solid #e6a800;
  --tg-warn-color:          #664d03;

  /* Destructive action (delete confirm button) */
  --tg-delete-bg:           #e63946;

  /* Grid action icons (⧉ ✕ ⠿ ✎) + # columns — darker than --th-border so they
     read clearly against row backgrounds (F2, Alex 2026-07-03). Reuses the
     existing secondary-text tone rather than minting a new value. */
  --tg-icon-color:          var(--th-text-secondary);

  /* Semantic text colors (for tokenizing straggler components) */
  --th-text-body:           #374151;   /* dark body text */
  --th-text-secondary:      #6c757d;   /* secondary / muted labels */
  --th-text-muted:          #9ca3af;   /* breadcrumb separators, light muted */
  --th-text-hint:           #888888;   /* hint / label row prefixes */
  --th-text-faint:          #cccccc;   /* very faint / placeholder dashes */
  --th-text-disabled:       #adb5bd;   /* disabled / placeholder text */
  --th-warn-accent:         #d97706;   /* amber warning (off-typical params) */
  --th-panel-bg:            #fafbfc;   /* side panel background */

  /* Status badge colors (StatusCell — icon+word, color-blind safe) */
  --th-status-draft:        #6B7280;
  --th-status-inprogress:   #D97706;
  --th-status-validated:    #1F4E79;
  --th-status-synced:       #059669;
  --th-status-deprecated:   #DC2626;

  /* Reference chip colors (ExplainerSubLine) */
  --tg-chip-bg:             #e8f0fe;
  --tg-chip-bg-hover:       #dbe8f8;
  --tg-chip-border:         #b0c8ef;
  --tg-chip-color:          #1a4a8a;
  --tg-chip-badge-bg:       #d0d9ec;
  --tg-chip-badge-color:    #666666;

  /* Subtle borders and surfaces (ParameterPanel, misc) */
  --th-border-subtle:       #dee2e6;   /* light border (panels, inputs) */
  --th-surface-disabled:    #f8f9fa;   /* disabled/inactive button bg */
  --th-surface-chip:        #e9ecef;   /* inline kind/tag chip background */
  --th-text-white:          #ffffff;   /* white text on dark backgrounds */

  /* ROW STATE BACKGROUNDS (2026-08-04) — a whole row saying something about
     itself. Both are DELIBERATELY heavier than --th-surface-disabled (#f8f9fa):
     against a white row that reads as the zebra banding the grid removed on
     purpose, not as a state. Neither carries meaning ALONE — Alex is colour-
     blind, so the row always also carries an icon or the word: these only make
     a state findable when scanning, they never encode it. */
  --th-row-locked:          #e9ecef;   /* row owned elsewhere (Onshape sync) — not editable here */
  --th-row-error:           #fdeaea;   /* row whose value failed to resolve/validate */

  /* NIGHT_SHIFT item 9 (2026-07-20) — raw hex closed. Each token below maps
     1:1 to a value that was previously hardcoded inline; no visual change. */
  --th-navy-dark:           #163d62;   /* header border-bottom — darker than --th-navy */
  --th-navy-text-muted:     #cce0f5;   /* light-blue label/nav text on navy header */
  --th-product-accent:      #7C3AED;   /* "Product" source kind accent (vs --th-navy for Catalog) */
  --th-readonly-text:       #495057;   /* read-only field text (component ref display) */
  --th-highlight-bg:        #edf4ff;   /* editing/add-param sub-row panel background */
  --th-highlight-border:    #bfdbfe;   /* editing/add-param sub-row panel border */
  --th-card-bg:             #f8fafc;   /* create-form card background */
  --th-card-border:         #e2e8f0;   /* create-form card border */
  --th-divider-light:       #f1f5f9;   /* search-result row divider */
  --th-chip-alt-bg:         #eef3fb;   /* category chip background (paired with navy text) */
  --th-viewer-bg:           #f1f3f5;   /* 3D model-viewer placeholder background */
}
