/* Docelf design tokens: generated together with docelf.tokens.json. Edit both, or regenerate.
 * Load order: custom.css (Bootstrap) -> docelf-tokens.css -> docelf_styles.css.
 * Existing variable names (--elf-color-*, --bg-elf, --*-rgb, --elf-template-*) are kept so nothing breaks.
 * Values marked CHANGED differ from today's docelf_styles.css: CSS-STEPS.md says when to switch them on. */

:root {
  /* Brand: sage elf palette */
  --elf-color-100: #5C8E7F;
  --elf-color-100-rgb: 92, 142, 127;
  --elf-color-80: #7DA599;
  --elf-color-80-rgb: 125, 165, 153;
  --elf-color-40: #BED2CC;
  --elf-color-40-rgb: 190, 210, 204;
  --elf-color-20: #DEE8E5;
  --elf-color-20-rgb: 222, 232, 229;
  --elf-color-10: #EFF4F3;
  --elf-color-10-rgb: 239, 244, 243;
  --elf-color-ink: #4D776B;  /* NEW */
  --elf-color-ink-rgb: 77, 119, 107;
  --elf-callout-color: #E4DCE5;
  --elf-callout-color-rgb: 228, 220, 229;
  --bg-elf: var(--elf-color-10);
  --bg-elf-rgb: var(--elf-color-10-rgb);

  /* Roles (NEW): use these in new CSS instead of palette steps */
  --elf-brand: var(--elf-color-100);            /* fills, illustrations; never text */
  --elf-brand-text: var(--elf-color-ink);       /* sage text and icons */
  --elf-surface: var(--elf-color-10);           /* sage panels, cards, modals */
  --elf-surface-raised: var(--elf-color-20);    /* addons, hover on sage panels */
  --elf-border: var(--elf-color-40);            /* borders on sage panels */
  --elf-text-on-surface: var(--bs-primary-text-emphasis);
  --elf-action: var(--bs-primary);             /* anything clickable */
  --elf-shadow-rest: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --elf-shadow-lift: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --elf-shadow-overlay: 0 1rem 3rem rgba(0, 0, 0, 0.175);

  /* Document-type colors: app UI only (menu tiles, icons). Never inside a customer's document. */
  --invoice-rgb: 0, 122, 174;
  --estimate-rgb: 87, 25, 135;
  --quote-rgb: 53, 57, 167;
  --receipt-rgb: 25, 135, 84;
  --purchase-order-rgb: 191, 57, 124;
  --expenses-rgb: 27, 112, 121;
  --bill-of-sale-rgb: 150, 95, 95;
  --proposal-rgb: 210, 102, 102;
  --packing-list-rgb: 53, 165, 118;
  --work-order-rgb: 104, 117, 220;
  --bid-rgb: 196, 72, 40;
  --order-form-rgb: 195, 110, 40;
  --contract-rgb: 65, 147, 164;  /* CHANGED, was #58ACBD */
  --letter-rgb: 201, 106, 61;
  --bill-of-materials-rgb: 79, 109, 143;  /* CHANGED, was #B43E24 (same as items) */
  --price-list-rgb: 176, 84, 24;
  --credit-note-rgb: 0, 120, 120;
  --proforma-invoice-rgb: 153, 137, 38;  /* CHANGED, was #C8B432 */
  --contacts-rgb: 174, 130, 15;  /* CHANGED, was #EBB017 */
  --items-rgb: 180, 62, 36;
  --vendors-rgb: 111, 78, 55;
  --apps-rgb: 49, 39, 255;

  /* File-format icons (NEW): Word, Excel, Google Docs, Google Sheets and PDF in their own colors */
  --elf-file-word: #185ABD;
  --elf-file-google-docs: #4285F4;
  --elf-file-excel: #107C41;
  --elf-file-google-sheets: #0F9D58;
  --elf-file-pdf: #FA0F00;

  /* Document themes: the colors customers pick */
  --elf-doc-theme-default: #343A40;
  --elf-doc-theme-blue: #004085;
  --elf-doc-theme-green: #4D776B;  /* CHANGED */
  --elf-doc-theme-orange: #A25E38;  /* CHANGED */

  /* Document layout */
  --elf-doc-padding: 3.4rem;
  --elf-doc-gap-element: 2rem;
  --elf-doc-gap-part: 2.5rem;
  --elf-doc-rule-width: 2px;
  --elf-doc-due-tint: 0.075;
  --elf-doc-logo-height-sm: 4rem;
  --elf-doc-logo-height-md: 6rem;
  --elf-doc-logo-height-lg: 120px;
  --elf-doc-page-margin: 15mm;
  --elf-doc-title-weight: 600;
  --elf-doc-title-tracking: 0.1em;

  /* Current document theme (the app sets these per document) */
  --elf-template-color: var(--bs-dark);
  --elf-template-color-rgb: var(--bs-dark-rgb);
  --elf-template-font-body: var(--bs-font-sans-serif);
  --elf-template-font-heading: var(--bs-font-sans-serif);
  --elf-template-heading-align: baseline;
}

/* Optional dark mode for Docelf colors. Bootstrap already handles --bs-* in dark mode. */
[data-bs-theme="dark"] {
  --elf-color-40: #394F4B;
  --elf-color-40-rgb: 57, 79, 75;
  --elf-color-20: #2D3A3A;
  --elf-color-20-rgb: 45, 58, 58;
  --elf-color-10: #273032;
  --elf-color-10-rgb: 39, 48, 50;
  --elf-color-ink: #8FB3A8;
  --elf-color-ink-rgb: 143, 179, 168;
  --elf-callout-color: #44464B;
  --elf-callout-color-rgb: 68, 70, 75;
  /* re-declare aliases so they pick up the dark values */
  --bg-elf: var(--elf-color-10);
  --bg-elf-rgb: var(--elf-color-10-rgb);
  --elf-brand-text: var(--elf-color-ink);
  --elf-surface: var(--elf-color-10);
  --elf-surface-raised: var(--elf-color-20);
  --elf-border: var(--elf-color-40);
  --elf-text-on-surface: var(--bs-body-color);
}