/* BANANA PAY design tokens — shared by every application screen.
 * Keep palette and semantic colors here; pages consume var(--…). */
:root {
  color-scheme: dark;

  /* Component surface tones from the approved design. */
  --nav-caption: #7f818c;
  --badge-bg: #27282b;
  --badge-text: #b2b3b9;
  --project-surface: #0d0e10;
  --project-border: var(--line);
  --project-border-hover: var(--line);
  --card-border: var(--line);
  --card-border-hover: var(--line);
  --icon-neutral: #babcc4;
  --icon-neutral-bg: #202125;
  --icon-success: #b4c99b;
  --icon-success-tint: #a7bf81;
  --icon-info: #b2bfce;
  --icon-info-tint: #9aabc0;
  --icon-subtle: #afb1ba;
  --icon-subtle-bg: #191a1d;
  --text-on-yellow-warning: #722519;
  --button-top: #1a1b1e;
  --button-bottom: #141517;
  --button-border: var(--line);
  --button-text: #d9d9de;
  --button-border-hover: var(--line);
  --icon-button-bg: #131416;
  --icon-button-border: var(--line);
  --icon-button-hover: #202124;
  --icon-button-border-hover: var(--line);
  --field-bg: #0c0d0f;
  --field-border: var(--line);
  --dialog-bg: #111214;
  --dialog-border: var(--line);
  --menu-bg: #151619;
  --chart-bar: #00E676;
  --chart-bar-active: #FFDA00;


  /* Поверхности */
  --bg: #08090b;
  --bg-2: #0b0c0e;
  --bg-input: var(--bg-2);
  --panel: var(--bg-2);
  --surface: #101113;
  --surface-2: #17181b;
  --surface-3: #202123;
  --surface-hover: #1e1f20;
  --line: #252629;
  --line-strong: var(--line);
  --line-input: var(--field-border); /* quiet default border; focus/error remain distinct */

  /* Текст. dim/faint подняты до ≥ 4.5:1 на --bg/--surface/--surface-2
     (было #64748b ≈ 3.6:1 и #475569 ≈ 2.3:1 — нечитаемо). */
  --text: #f4f4f5;
  --text-muted: #a2a3aa;
  --text-dim: #92949c;
  --text-faint: #92938f;
  --text-disabled: #696a66;       /* только неактивное и декор, не для смысла */
  --text-on-accent: #08090b;
  --text-on-danger: #ffffff;
  --accent-hover: #ffe337;
  --input-border: var(--field-border);
  --text-on-yellow-muted: #494017;
  --text-on-yellow-danger: #801b13;
  --logo-yellow-top: #FFDA00;
  --logo-yellow-bottom: #FFDA00;
  --white: #ffffff;               /* блики и подложки через color-mix, не цвет текста */
  --ink: #000000;                 /* самая тёмная точка: тени и затемнения */

  /* Saturated yellow is reserved for primary actions and selected states. */
  --accent: #ffda00;
  --accent-2: #ffda00;
  --accent-3: #ffda00;            /* use --text-on-accent on yellow */
  --accent-glow: #ffda0029;
  --accent-soft: #ffda0012;
  --accent-line: var(--line);
  --purple: #ffda00;

  /* Семантика — одна на всё приложение */
  --success: #00E676;
  --success-soft: #b5ce830d;
  --success-line: var(--line);
  --danger: #FFDA00;              /* текст и иконки */
  --danger-strong: #b64a41;       /* заливки */
  --danger-soft: #ef989012;
  --danger-line: var(--line);
  --warning: #FFDA00;
  --warning-soft: #ffda0012;
  --warning-line: var(--line);
  --on-warning: #1a1405;         /* текст на жёлтой заливке (плашка «Войти как») */
  --hold: #eab308;
  --info: #b9bac2;
  --info-soft: #b9bac20d;
  --violet: #ffda00;              /* brand highlight */
  --scam: #FFDA00;          /* скам отличается от «отклонён» */
  --scam-soft: #e7aa7c12;
  --orange: #FFDA00;
  --pink: #FFDA00;
  --cyan: #FFDA00;

  /* Фирменный градиент: логотип, исходящее сообщение, главная кнопка-иконка */
  --grad-brand: linear-gradient(145deg, #FFDA00, #FFDA00);

  /* Аватары: буквы на мягкой подложке одного из шести цветов палитры.
     Цвет выбирается по имени (хеш), роль в «Управлении» — фиксированным цветом. */
  --avatar-1: var(--accent);
  --avatar-2: var(--violet);
  --avatar-3: var(--info);
  --avatar-4: var(--cyan);
  --avatar-5: var(--pink);
  --avatar-6: var(--success);

  /* Палитра графиков (категории). Canvas не читает var(), значения берёт UI.token(). */
  --chart-1: #FFDA00;  --chart-2: #00E676;  --chart-3: #FFDA00;  --chart-4: #00E676;
  --chart-5: #FFDA00;  --chart-6: #00E676;  --chart-7: #FFDA00;  --chart-8: #00E676;
  --chart-9: #FFDA00;  --chart-10: #00E676; --chart-11: #FFDA00; --chart-12: #00E676;
  --chart-13: #FFDA00; --chart-14: #00E676;
  /* Состав чеков: цвет закреплён за причиной, чтобы не «прыгал» между днями */
  --seg-confirmed: #00E676;  --seg-scam: #FFDA00;
  --reason-mismatch: #FFDA00;   --reason-none: #FFDA00;      --reason-fake: #FFDA00;
  --reason-dupe: #FFDA00;       --reason-foreign: #FFDA00;   --reason-unsent: #FFDA00;
  --reason-missing: #FFDA00;    --reason-partial: #FFDA00;   --reason-other: #FFDA00;

  /* Старые имена — синонимы, пока страницы не переведены */
  --good: var(--success);
  --warn: var(--warning);
  --bad: var(--danger);

  /* Статусы чека */
  --status-confirmed: var(--success);
  --status-pending: var(--warning);
  --status-hold: var(--hold);
  --status-rejected: var(--danger);
  --status-scam: var(--scam);

  /* Типографика */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --lh-tight: 1.25;
  --lh: 1.5;

  /* Отступы — сетка 4px */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;

  /* Радиусы */
  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.125rem;
  --radius-pill: 62.4375rem;

  /* Тени */
  --shadow-sm: 0 1px 0.125rem rgba(0,0,0,.3);
  --shadow: 0 0.25rem 1.5rem #00000012;
  --shadow-lg: 0 1rem 3.125rem #00000066;
  --shadow-glow: 0 0 0 1px var(--accent-line), 0 0.5rem 1.625rem -0.625rem var(--accent-glow);

  /* Фокус */
  --focus-ring: 0 0 0 0.125rem var(--bg), 0 0 0 0.25rem var(--accent);

  /* Затемнение под окнами и шторками */
  --scrim: #000000b3;

  /* Слои */
  --z-sticky: 50;
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-popover: 1050;              /* календарь и меню поверх открытого окна */
  --z-toast: 1100;

  /* Высоты контролов: кнопка, поле, селект в одном ряду обязаны совпадать */
  --h-sm: 1.875rem;
  --h: 2.25rem;
  --h-lg: 2.75rem;

  /* Иконки внутри полей (у input/select нет ::before, поэтому фоном).
     Цвет штриха = --text-muted: #a2a3aa;
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

  /* Движение */
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t: 180ms;
  --t-fast: 120ms;                /* ховеры и нажатия */

  /* Тач-цель */
  --tap: 2.75rem;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t: 0ms; }
}