/* Light / dark design tokens (--re-primary is overridden in header.php from .env COLOR_PRIMARY). */

:root {
  --re-primary:        #217ded;
  --re-primary-hover:  color-mix(in srgb, var(--re-primary) 86%, #000000);
  --re-primary-soft:   color-mix(in srgb, var(--re-primary) 12%, transparent);
  --re-primary-softer: color-mix(in srgb, var(--re-primary) 7%, transparent);
  --re-primary-on:     #ffffff;

  /* DHTMLX Grid: row selection overlay (suite default is gray @ low opacity). */
  --dhx-s-grid-selection-background: var(--re-primary-softer);

  --re-ink:        #1f2937;
  --re-ink-muted:  #6b7280;
  --re-ink-faint:  #9ca3af;

  --re-text-normal:       #2d3748;
  --re-text-normal-muted: #64748b;

  --re-surface:       #ffffff;
  --re-surface-soft:  #fafbfc;
  --re-input:         #fbfbfd;
  --re-input-focus:   #ffffff;
  --re-bg:            #f7f8fa;
  --re-border:        #e7e9ee;
  --re-border-strong: #d9dce3;
}

[data-theme="dark"] {
  --re-primary-hover:  color-mix(in srgb, var(--re-primary) 72%, #ffffff);
  --re-primary-soft:   color-mix(in srgb, var(--re-primary) 34%, transparent);
  --re-primary-softer: color-mix(in srgb, var(--re-primary) 18%, transparent);
  --re-primary-on:     #ffffff;

  --re-ink:        #e5e7eb;
  --re-ink-muted:  #9ca3af;
  --re-ink-faint:  #6b7280;

  --re-text-normal:       #e8eaed;
  --re-text-normal-muted: #a8b0bd;

  --re-surface:       #1b1e24;
  --re-surface-soft:  #22262e;
  --re-input:         #22262e;
  --re-input-focus:   #262b34;
  --re-bg:            #15171c;
  --re-border:        #3f3f3f;
  --re-border-strong: #3a404c;
}