/*
  ServiceCRM application theme tokens.

  Новый CSS должен брать цвета из этих переменных, а не писать прямые
  значения вроде #333, white, rgba(...) в свойствах color/background/border.
  Старые переменные (--bg, --card, --ink, --mobile-*) оставлены как мост,
  чтобы существующие шаблоны и базовые классы продолжали работать.
*/

:root,
html{
  --app-bg:#f6fbfb;
  --app-surface:#ffffff;
  --app-surface-soft:#effdfa;
  --app-surface-strong:#ffffff;
  --app-text:#111827;
  --app-muted:#6b7280;
  --app-border:#d8fbfb;
  --app-accent:#009c9b;
  --app-accent-strong:#007c7b;
  --app-accent-soft:#e6fffd;
  --app-danger:#ef4444;
  --app-success:#10b981;
  --app-warning:#f59e0b;
  --app-info:#6366f1;

  --app-on-accent:#ffffff;
  --app-on-accent-dark:#031416;
  --app-on-danger:#ffffff;
  --app-overlay:rgba(15,23,42,.42);
  --app-overlay-strong:rgba(15,23,42,.78);
  --app-shadow:0 22px 70px rgba(15,23,42,.12);
  --app-shadow-soft:0 14px 34px rgba(15,23,42,.10);
  --app-focus-ring:color-mix(in srgb,var(--app-accent) 38%,transparent);
  --app-skeleton:color-mix(in srgb,var(--app-border) 58%,var(--app-surface));
  --app-skeleton-shine:rgba(255,255,255,.46);

  --app-success-soft:color-mix(in srgb,var(--app-success) 12%,var(--app-surface) 88%);
  --app-success-border:color-mix(in srgb,var(--app-success) 28%,transparent);
  --app-warning-soft:color-mix(in srgb,var(--app-warning) 13%,var(--app-surface) 87%);
  --app-warning-border:color-mix(in srgb,var(--app-warning) 32%,transparent);
  --app-danger-soft:color-mix(in srgb,var(--app-danger) 12%,var(--app-surface) 88%);
  --app-danger-border:color-mix(in srgb,var(--app-danger) 32%,transparent);
  --app-info-soft:color-mix(in srgb,var(--app-info) 12%,var(--app-surface) 88%);
  --app-info-border:color-mix(in srgb,var(--app-info) 28%,transparent);

  /* Unified design-system aliases used by layout_utilities.css and page components. */
  --surface-page:var(--app-bg);
  --surface-card:var(--app-surface);
  --surface-soft:var(--app-surface-soft);
  --surface-strong:var(--app-surface-strong);
  --surface-overlay:var(--app-overlay);
  --surface-overlay-strong:var(--app-overlay-strong);
  --surface-selected:var(--app-accent-soft);

  --text-main:var(--app-text);
  --text-muted:var(--app-muted);
  --text-soft:color-mix(in srgb,var(--app-muted) 72%,var(--app-surface));
  --text-inverse:var(--app-on-accent);

  --border-main:var(--app-border);
  --border-soft:color-mix(in srgb,var(--app-border) 58%,transparent);
  --border-strong:color-mix(in srgb,var(--app-border) 70%,var(--app-text) 30%);

  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:24px;
  --radius-pill:999px;

  --shadow-sm:0 8px 20px rgba(15,23,42,.08);
  --shadow-md:var(--app-shadow-soft);
  --shadow-lg:var(--app-shadow);

  --state-success-bg:var(--app-success-soft);
  --state-success-border:var(--app-success-border);
  --state-warning-bg:var(--app-warning-soft);
  --state-warning-border:var(--app-warning-border);
  --state-danger-bg:var(--app-danger-soft);
  --state-danger-border:var(--app-danger-border);
  --state-info-bg:var(--app-info-soft);
  --state-info-border:var(--app-info-border);


  /* Compatibility bridge for old project variables. */
  --bg:var(--app-bg);
  --card:var(--app-surface);
  --ink:var(--app-text);
  --muted:var(--app-muted);
  --line:var(--app-border);
  --accent:var(--app-accent);
  --accent2:#ff6f7b;
  --danger:var(--app-danger);
  --green:var(--app-success);
  --red:var(--app-danger);
  --shadow:var(--app-shadow);

  --page-bg:var(--app-bg);
  --panel-bg:var(--app-surface);
  --surface-soft:var(--app-surface-soft);
  --text:var(--app-text);
  --text-color:var(--app-text);
  --muted-color:var(--app-muted);
  --border-color:var(--app-border);
  --accent-color:var(--app-accent);
  --danger-color:var(--app-danger);
  --success-color:var(--app-success);
  --warning-color:var(--app-warning);
}

html[data-crm-theme="dark"]{
  --app-bg:#061316;
  --app-surface:#0b1f24;
  --app-surface-soft:#102a30;
  --app-surface-strong:#102a30;
  --app-text:#e8fbfb;
  --app-muted:#b7c8cf;
  --app-border:rgba(174,244,241,.14);
  --app-accent:#18c7c5;
  --app-accent-strong:#6ff0ed;
  --app-accent-soft:rgba(24,199,197,.14);
  --app-danger:#fb7185;
  --app-success:#4ade80;
  --app-warning:#fbbf24;
  --app-info:#a5b4fc;
  --app-on-accent:#06282c;
  --app-on-accent-dark:#031416;
  --app-on-danger:#fff1f2;
  --app-overlay:rgba(0,0,0,.42);
  --app-overlay-strong:rgba(6,19,22,.86);
  --app-shadow:0 22px 70px rgba(0,0,0,.38);
  --app-shadow-soft:0 14px 34px rgba(0,0,0,.34);
  --app-skeleton:color-mix(in srgb,var(--app-border) 58%,var(--app-surface-soft));
  --app-skeleton-shine:rgba(255,255,255,.16);
  --accent2:#ff9aa5;
}

@media(prefers-color-scheme:dark){
  html[data-crm-theme="system"]{
    --app-bg:#061316;
    --app-surface:#0b1f24;
    --app-surface-soft:#102a30;
    --app-surface-strong:#102a30;
    --app-text:#e8fbfb;
    --app-muted:#b7c8cf;
    --app-border:rgba(174,244,241,.14);
    --app-accent:#18c7c5;
    --app-accent-strong:#6ff0ed;
    --app-accent-soft:rgba(24,199,197,.14);
    --app-danger:#fb7185;
    --app-success:#4ade80;
    --app-warning:#fbbf24;
    --app-info:#a5b4fc;
    --app-on-accent:#06282c;
    --app-on-accent-dark:#031416;
    --app-on-danger:#fff1f2;
    --app-overlay:rgba(0,0,0,.42);
    --app-overlay-strong:rgba(6,19,22,.86);
    --app-shadow:0 22px 70px rgba(0,0,0,.38);
    --app-shadow-soft:0 14px 34px rgba(0,0,0,.34);
    --app-skeleton:color-mix(in srgb,var(--app-border) 58%,var(--app-surface-soft));
    --app-skeleton-shine:rgba(255,255,255,.16);
    --accent2:#ff9aa5;
  }
}

.pwa-app-shell{
  --mobile-bg:var(--app-bg);
  --mobile-surface:var(--app-surface);
  --mobile-surface-strong:var(--app-surface-strong);
  --mobile-text:var(--app-text);
  --mobile-muted:var(--app-muted);
  --mobile-border:var(--app-border);
  --mobile-accent:var(--app-accent);
  --mobile-accent-dark:var(--app-accent-strong);
  --mobile-accent-soft:var(--app-accent-soft);
  --mobile-shadow:var(--app-shadow-soft);
}

html[data-crm-ui="pwa"],
body[data-interface-mode="pwa"]{
  background:var(--app-bg);
  color:var(--app-text);
}