/* ============================================================
   Invetics Design Tokens — SINGLE SOURCE OF TRUTH
   ------------------------------------------------------------
   Change a value here and it propagates to every modal, editor
   window, and component that references it via var(--…).
   Palette is the official 5-hex Invetics brand set.
   ============================================================ */

:root {
  /* ---------- Brand palette (official Invetics, 5 hexes) ---------- */
  --ink:        #052D38; /* near-black teal — dark tops, headings */
  --teal:       #145F70; /* brand teal — surfaces, hovers */
  --teal-muted: #49929E; /* muted teal — secondary accents */
  --gold:       #FFBC00; /* gold — CTAs, accent strip */
  --white:      #FFFFFF;

  /* ---------- Derived brand tints ---------- */
  --ink-hover:   #0A3D4B; /* lighten of ink for hovers on dark buttons */
  --teal-hover:  #1B7488;
  --gold-hover:  #E6A800;
  --teal-50:     #E8F0F2; /* light teal wash — info bands */
  --gold-soft:   #FFF4D1; /* gold-tinted highlight bg */

  /* ---------- Neutral greys (UI chrome) ---------- */
  --grey-50:  #F7F9FA;
  --grey-100: #EEF1F3;
  --grey-200: #DCE2E5;
  --grey-300: #C3CCD1;
  --grey-400: #97A3AA;
  --grey-500: #6B7880;
  --grey-700: #323E46;

  /* ---------- Status ---------- */
  --success: #2E9A6B;
  --warning: var(--gold);
  --danger:  #C5443D;

  /* ---------- Buttons (global) ---------- */
  --btn-radius: 2px;   /* Invetics CTAs are near-square; applied app-wide to .btn */
  --card-radius: 0;    /* sharp-cornered cards, site-wide (KPI cards, bootstrap .card) */

  /* ---------- External-facing page gutters ---------- */
  /* SINGLE control for the left/right inset of the whole public site: the
     navbar AND every front-page section (via .content-wrapper) read these,
     so all margins line up. Change a value here and the nav + every section
     move together. Set them equal for a symmetric gutter, or differ them
     for an asymmetric one. */
  --ext-pad-left:  3rem;   /* 48px */
  --ext-pad-right: 3rem;   /* 48px */

  /* ============================================================
     MODAL / EDITOR-WINDOW DESIGN TOKENS
     Every popup on the site reads these. Tune the look globally
     by editing the values below.
     ============================================================ */

  /* Geometry — sharp edges, consistent sizing */
  --modal-radius:        0;            /* sharp corners */
  --modal-width:         820px;        /* consistent default width */
  /* Chat/import/doc-edit panels: large workspace, shared by the Cap Table
     Import panel and the AI Document Edit modal (results/extractions run tall) */
  --chat-modal-width:    1000px;
  --chat-modal-height:   80vh;
  /* Compact variant for the Document Generate modal — instruction-giving, not a
     tall import/clause workspace. ~half the standard height. */
  --chat-modal-height-compact: 42vh;
  --modal-width-narrow:  520px;        /* chat-style / compact modals */
  --modal-max-width:     92vw;
  --modal-body-max-h:    62vh;         /* scroll body, fixed chrome */

  /* Surfaces */
  --modal-overlay:       rgba(5, 45, 56, 0.55);   /* ink-tinted scrim */
  --modal-bg:            var(--white);
  --modal-border:        1px solid var(--ink);   /* dark, intentional frame (ties into the dark header) */
  --modal-shadow:        0 24px 60px rgba(5, 45, 56, 0.28);

  /* Dark top (the signature band) */
  --modal-header-bg:     var(--ink);
  --modal-header-fg:     var(--white);
  --modal-header-pad:    15px 22px;
  --modal-header-fs:     17px;
  --modal-header-fw:     700;
  --modal-accent:        var(--gold);  /* gold underline strip on header */
  --modal-accent-h:      3px;

  /* Body + footer */
  --modal-body-bg:       var(--white);
  --modal-body-pad:      20px 22px;
  --modal-footer-bg:     var(--grey-50);
  --modal-footer-border: 1px solid var(--grey-200);

  /* Close control */
  --modal-close-fg:      rgba(255, 255, 255, 0.82);
  --modal-close-fg-h:    var(--gold);

  /* Primary action button (brand CTA: gold, near-square) */
  --modal-btn-bg:        var(--gold);
  --modal-btn-bg-h:      var(--gold-hover);
  --modal-btn-fg:        var(--ink);
  --modal-btn-radius:    2px;

  /* Secondary / send-icon button (dark) */
  --modal-icon-btn-bg:   var(--ink);
  --modal-icon-btn-bg-h: var(--teal);

  /* Inputs inside modals */
  --modal-input-border:  1px solid var(--grey-300);
  --modal-input-focus:   0 0 0 3px rgba(20, 95, 112, 0.25);

  /* ============================================================
     EDITOR-FORM LAYOUT TOKENS
     Shared by the #customForm template (series + convert) and the
     default-rendered option/company editor. Tune the form geometry
     for every editor modal from here.
     ============================================================ */
  --ef-label-width: 160px;   /* right-aligned label column */
  --ef-input-num:   200px;   /* $ amounts, counts, percentages — matches date width */
  --ef-input-date:  200px;   /* date pickers */
  /* wide text fields span the Date+Amount columns so their right edge
     lines up with the Amount column (auto-tracks the widths above) */
  --ef-input-text:  calc(var(--ef-input-date) + var(--ef-col-gap) + var(--ef-input-num));
  --ef-input-pad:   9px 12px;/* input padding — a touch larger */
  --ef-input-fs:    14px;    /* input + label font size */
  --ef-row-gap:     10px;    /* vertical gap between field rows */
  --ef-col-gap:     18px;    /* label↔input + column gap */
  --ef-section-fg:  var(--grey-500);  /* section divider caption */
  --ef-section-rule: var(--grey-200); /* section divider hairline */
}