/* ============================================================
   Colors — extracted from the Figma source (Vuetify Material).
   Base palette + semantic aliases.
   ============================================================ */

:root {
  /* ---- Brand greens (primary) ---- */
  --green-500: #19be8d;        /* primary brand green (rgb 25,190,141) */
  --green-600: #15a87c;        /* primary pressed/darker */
  --green-700: #166f5d;        /* deep green — brand headings (rgb 22,111,93) */
  --green-200: #cee4de;        /* light green fill (rgb 206,228,222) */
  --green-300: #a9c4b8;        /* muted green text/stroke (rgb 169,196,184) */
  --green-100: #e8efec;        /* faint green stroke (rgb 232,239,236) */
  --green-050: #e2e8e5;        /* hairline green-grey (rgb 226,232,229) */

  /* ---- Accent purple (brand mark / highlights) ---- */
  --purple-500: #8a38f5;       /* accent purple (rgb 138,56,245) */
  --purple-400: #7b61ff;       /* violet (rgb 123,97,255) */

  /* ---- Link blue (Vuetify info / links) ---- */
  --blue-500: #2196f3;         /* link blue (rgb 33,150,243) */
  --blue-700: #1976d2;         /* link/active blue (rgb 25,118,210) */

  /* ---- Status ---- */
  --status-success: #19be8d;   /* Выполнен / Оплачено */
  --status-warning: #fb8c00;   /* Ожидается / Ждёт оплаты (amber) */
  --status-error:   #ff5252;   /* Отменён / Не оплачен (red) */
  --status-info:    #2196f3;

  /* ---- Neutrals (Material grey ramp) ---- */
  --black: #000000;
  --white: #ffffff;
  --grey-900: #212121;         /* (rgb 33,33,33) */
  --grey-850: #222126;         /* near-black surface (rgb 34,33,38) */
  --grey-800: #424242;         /* primary dark text (rgb 66,66,66) */
  --grey-700: #616161;         /* (rgb 97,97,97) */
  --grey-600: #757575;         /* secondary text (rgb 117,117,117) */
  --grey-500: #9e9e9e;         /* hint/disabled text (rgb 158,158,158) */
  --grey-400: #bdbdbd;
  --grey-300: #e0e0e0;         /* borders (rgb 224,224,224) */
  --grey-200: #eeeeee;         /* dividers (rgb 238,238,238) */
  --grey-100: #f5f5f5;         /* subtle fill (rgb 245,245,245) */
  --grey-050: #fafafa;         /* page-ish fill (rgb 250,250,250) */
  --label-grey: #727f88;       /* form labels (rgb 114,127,136) */

  /* ---- Material on-surface opacity tokens ---- */
  --on-surface-high:   rgba(0, 0, 0, 0.87);  /* primary text */
  --on-surface-medium: rgba(0, 0, 0, 0.60);  /* secondary text */
  --on-surface-disabled: rgba(0, 0, 0, 0.38);/* disabled */
  --on-surface-divider:  rgba(0, 0, 0, 0.12);

  /* ---- Manager-interface canvas (light blue-grey) ---- */
  --canvas-cool: #f0f4f8;

  /* ============ Semantic aliases ============ */
  --color-primary: var(--green-500);
  --color-primary-strong: var(--green-700);
  --color-primary-soft: var(--green-200);
  --color-accent: var(--purple-500);
  --color-link: var(--blue-500);

  --text-primary: var(--on-surface-high);
  --text-secondary: var(--grey-600);
  --text-hint: var(--grey-500);
  --text-label: var(--label-grey);
  --text-on-primary: var(--white);
  --text-disabled: var(--on-surface-disabled);

  --surface-page: var(--grey-050);
  --surface-card: var(--white);
  --surface-sunken: var(--grey-100);
  --surface-dark: var(--grey-850);

  --border-default: var(--grey-300);
  --border-subtle: var(--grey-200);
  --border-green: var(--green-050);
  --divider: var(--on-surface-divider);
}