/*
  Design tokens — keep in sync with src/theme/palette.ts and src/theme/opacity.ts
*/
:root {
  /* primary */
  --color-primary-50: #effdf6;
  --color-primary-100: #d9f9ec;
  --color-primary-200: #b3f0d6;
  --color-primary-300: #73dfa8;
  --color-primary-400: #44c989;
  --color-primary-500: #35ba80;
  --color-primary-600: #2a9668;
  --color-primary-700: #227853;
  --color-primary-800: #195a3e;
  --color-primary-900: #0f3d29;

  /* common */
  --color-black: #00061a;
  --color-white: #ffffff;

  /* grey */
  --color-grey-50: #f4f5f8;
  --color-grey-75: #edeff5;
  --color-grey-100: #e4e6ed;
  --color-grey-200: #d3d6de;
  --color-grey-300: #c5cbde;
  --color-grey-500: #868ca3;
  --color-grey-600: #5b6175;
  --color-grey-700: #494e5c;
  --color-grey-800: #363b4d;

  /* semantic */
  --color-success-500: #54f777;
  --color-success-700: #33de58;
  --color-error-500: #f75454;
  --color-error-700: #de3333;
  --color-warning-500: #f7e954;
  --color-warning-700: #ded033;
  --color-alert-500: #f79254;
  --color-alert-700: #de7533;
  --color-info-300: #b6d4fa;
  --color-info-500: #5495f7;
  --color-info-700: #335ade;
  --color-info-900: #143dc7;

  /* semantic surfaces */
  --color-surface: #ffffff;
  --color-surface-muted: #f4f5f8;
  --color-surface-elevated: #ffffff;
  --color-on-surface: #00061a;
  --color-on-surface-muted: #5b6175;
  --color-border: #e4e6ed;
  --color-border-strong: #d3d6de;

  /* RGB channels for opacity composition */
  --color-black-rgb: 0 6 26;
  --color-white-rgb: 255 255 255;
  --color-primary-500-rgb: 53 186 128;
  --color-primary-600-rgb: 42 150 104;
  --color-primary-700-rgb: 34 120 83;
  --color-grey-500-rgb: 134 140 163;
  --color-grey-700-rgb: 73 78 92;

  /* gantt selection — verde cofield alternado (lista + cronograma) */
  --color-gantt-row-selected-odd: rgb(var(--color-primary-500-rgb) / 0.14);
  --color-gantt-row-selected-even: rgb(var(--color-primary-600-rgb) / 0.1);
  --color-gantt-row-current: rgb(var(--color-primary-700-rgb) / 0.22);

  /* gantt zebra — shared by data grid (.gdfCell) and timeline (.ganttLinesSVG) */
  --color-gantt-stripe-a: var(--color-surface);
  --color-gantt-stripe-b: var(--color-grey-50);

  /* gantt dependency arrows / link lines */
  --color-gantt-link-stroke: var(--color-grey-300);
  --color-gantt-link-stroke-focus: var(--color-grey-500);
  --gantt-link-arrow-filter: brightness(0) saturate(100%) invert(82%) sepia(6%)
    saturate(520%) hue-rotate(185deg) brightness(96%) contrast(90%);

  /* opacity scale */
  --opacity-ghost: 0.04;
  --opacity-subtle: 0.08;
  --opacity-muted: 0.15;
  --opacity-soft: 0.4;
  --opacity-medium: 0.5;
  --opacity-strong: 0.9;

  /* react-data-grid */
  --rdg-color: var(--color-on-surface);
  --rdg-background-color: var(--color-surface);
  --rdg-header-background-color: var(--color-surface-muted);
  --rdg-row-hover-background-color: var(--color-grey-50);
  --rdg-selection-color: var(--color-primary-500);
  --rdg-border-color: var(--color-border);

  --color-calendar-paint: var(--color-grey-700);
  --color-calendar-paint-border: var(--color-grey-800);
}

[data-theme='dark'] {
  --color-surface: #00061a;
  --color-surface-muted: #121829;
  --color-surface-elevated: #363b4d;
  --color-on-surface: #ffffff;
  --color-on-surface-muted: #868ca3;
  --color-border: #363b4d;
  --color-border-strong: #494e5c;

  /* UI grey scale remapped for dark surfaces (gantt, grids, charts) */
  --color-grey-50: #121829;
  --color-grey-75: #1a2035;
  --color-grey-100: #363b4d;
  --color-grey-200: #494e5c;
  --color-grey-300: #5b6175;

  --rdg-header-background-color: var(--color-grey-800);
  --rdg-row-hover-background-color: var(--color-surface-muted);

  /* Override react-data-grid rdg-dark defaults (warm hsl grey) with app surfaces */
  --rdg-background-color: var(--color-surface);
  --rdg-header-draggable-background-color: var(--color-grey-700);
  --rdg-border-color: var(--color-border);
  --rdg-summary-border-color: var(--color-border-strong);
  --rdg-row-selected-background-color: rgb(var(--color-primary-500-rgb) / 0.18);
  --rdg-row-selected-hover-background-color: rgb(var(--color-primary-500-rgb) / 0.24);

  --color-calendar-paint: #d3d6de;
  --color-calendar-paint-border: #e4e6ed;

  --color-gantt-link-stroke: var(--color-grey-800);
  --color-gantt-link-stroke-focus: var(--color-grey-600);
  --gantt-link-arrow-filter: grayscale(1) brightness(0.55);
}

[data-theme='light'],
.print-light {
  --color-surface: #ffffff;
  --color-surface-muted: #f4f5f8;
  --color-surface-elevated: #ffffff;
  --color-on-surface: #00061a;
  --color-on-surface-muted: #5b6175;
  --color-border: #e4e6ed;
  --color-border-strong: #d3d6de;

  --color-black-rgb: 0 6 26;
  --color-white-rgb: 255 255 255;

  --rdg-color: var(--color-on-surface);
  --rdg-background-color: var(--color-surface);
  --rdg-header-background-color: var(--color-surface-muted);
  --rdg-row-hover-background-color: var(--color-grey-50);
  --rdg-border-color: var(--color-border);

  --color-gantt-link-stroke: var(--color-grey-300);
  --color-gantt-link-stroke-focus: var(--color-grey-500);
  --gantt-link-arrow-filter: brightness(0) saturate(100%) invert(82%) sepia(6%)
    saturate(520%) hue-rotate(185deg) brightness(96%) contrast(90%);
}