/* ОтзывПульс — единая световая система (4 темы) */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Onest:wght@400;500;600;700&display=swap");

:root {
  --op-glass-nav: 88%;
  --op-glass-card: 76%;
  --op-glass-inset: 9%;
  --landing-nav-h: 72px;
  --op-font-body: "Onest", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --op-font-heading: "Manrope", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}

html[data-theme="warm-light"] {
  --op-bg: #f4eadc;
  --op-bg-soft: #fff7ed;
  --op-surface: rgba(255, 251, 245, 0.82);
  --op-surface-strong: #fffaf2;
  --op-text: #201713;
  --op-text-soft: #62514a;
  --op-muted: #7a6154;
  --op-border: rgba(126, 91, 70, 0.18);
  --op-shadow: rgba(89, 52, 36, 0.16);
  --op-accent: #b56a55;
  --op-accent-2: #e6a15f;
  --op-accent-ink: #fff8f0;

  --landing-bg: var(--op-bg);
  --landing-bg-soft: var(--op-bg-soft);
  --landing-card: var(--op-surface);
  --landing-card-strong: var(--op-surface-strong);
  --landing-text: var(--op-text);
  --landing-muted: var(--op-muted);
  --landing-border: var(--op-border);
  --landing-accent: var(--op-accent);
  --landing-accent-2: var(--op-accent-2);
  --landing-accent-ink: var(--op-accent-ink);
  --landing-shadow: var(--op-shadow);
  --landing-panel: color-mix(in srgb, var(--op-surface-strong) 76%, transparent);
  --landing-panel-2: color-mix(in srgb, var(--op-surface) 72%, transparent);
  --landing-glass: color-mix(in srgb, var(--op-surface-strong) 62%, transparent);
  --landing-line: color-mix(in srgb, var(--op-border) 78%, transparent);

  --login-bg: var(--op-bg);
  --login-bg-soft: var(--op-bg-soft);
  --login-text: var(--op-text);
  --login-muted: var(--op-muted);
  --login-accent: var(--op-accent);
  --login-accent-2: var(--op-accent-2);
  --login-shadow: var(--op-shadow);
  --login-border: color-mix(in srgb, var(--op-border) 82%, transparent);
  --login-panel: color-mix(in srgb, var(--op-surface-strong) 76%, transparent);
  --login-panel-2: color-mix(in srgb, var(--op-surface) 72%, transparent);

  --dash-page-bg: var(--op-bg);
  --dash-text: var(--op-text);
  --dash-text-soft: var(--op-text-soft);
  --dash-muted: var(--op-muted);
  --dash-brand-start: #472f24;
  --dash-brand-end: #9c643f;
  --dash-panel-bg: var(--op-surface-strong);
  --dash-panel-border: color-mix(in srgb, var(--op-border) 88%, transparent);
  --dash-panel-shadow: none;
  --dash-kpi-bg: var(--op-bg-soft);
  --dash-kpi-border: color-mix(in srgb, var(--op-border) 75%, transparent);
  --dash-teal: var(--op-accent);
  --dash-teal-soft: color-mix(in srgb, var(--op-accent) 12%, transparent);
  --dash-teal-text: #734b45;
  --dash-accent: var(--op-accent);
}

html[data-theme="cool-light"] {
  --op-bg: #edf5fb;
  --op-bg-soft: #f8fcff;
  --op-surface: rgba(248, 252, 255, 0.82);
  --op-surface-strong: #ffffff;
  --op-text: #112231;
  --op-text-soft: #51626f;
  --op-muted: #5f7385;
  --op-border: rgba(61, 91, 115, 0.18);
  --op-shadow: rgba(24, 70, 104, 0.14);
  --op-accent: #2f7ca8;
  --op-accent-2: #68b7d7;
  --op-accent-ink: #f5fbff;

  --landing-bg: var(--op-bg);
  --landing-bg-soft: var(--op-bg-soft);
  --landing-card: var(--op-surface);
  --landing-card-strong: var(--op-surface-strong);
  --landing-text: var(--op-text);
  --landing-muted: var(--op-muted);
  --landing-border: var(--op-border);
  --landing-accent: var(--op-accent);
  --landing-accent-2: var(--op-accent-2);
  --landing-accent-ink: var(--op-accent-ink);
  --landing-shadow: var(--op-shadow);
  --landing-panel: color-mix(in srgb, var(--op-surface-strong) 76%, transparent);
  --landing-panel-2: color-mix(in srgb, var(--op-surface) 72%, transparent);
  --landing-glass: color-mix(in srgb, var(--op-surface-strong) 62%, transparent);
  --landing-line: color-mix(in srgb, var(--op-border) 78%, transparent);

  --login-bg: var(--op-bg);
  --login-bg-soft: var(--op-bg-soft);
  --login-text: var(--op-text);
  --login-muted: var(--op-muted);
  --login-accent: var(--op-accent);
  --login-accent-2: var(--op-accent-2);
  --login-shadow: var(--op-shadow);
  --login-border: color-mix(in srgb, var(--op-border) 82%, transparent);
  --login-panel: color-mix(in srgb, var(--op-surface-strong) 76%, transparent);
  --login-panel-2: color-mix(in srgb, var(--op-surface) 72%, transparent);

  --dash-page-bg: var(--op-bg);
  --dash-text: var(--op-text);
  --dash-text-soft: var(--op-text-soft);
  --dash-muted: var(--op-muted);
  --dash-brand-start: #243847;
  --dash-brand-end: #547086;
  --dash-panel-bg: var(--op-surface-strong);
  --dash-panel-border: color-mix(in srgb, var(--op-border) 88%, transparent);
  --dash-panel-shadow: none;
  --dash-kpi-bg: var(--op-bg-soft);
  --dash-kpi-border: color-mix(in srgb, var(--op-border) 75%, transparent);
  --dash-teal: var(--op-accent);
  --dash-teal-soft: color-mix(in srgb, var(--op-accent) 12%, transparent);
  --dash-teal-text: #516678;
  --dash-accent: var(--op-accent);
}

html[data-theme="ash-dark"] {
  --op-bg: #191b20;
  --op-bg-soft: #22252b;
  --op-surface: rgba(36, 39, 46, 0.8);
  --op-surface-strong: #252932;
  --op-text: #f4efe7;
  --op-text-soft: #d2cbc3;
  --op-muted: #b5ada1;
  --op-border: rgba(244, 239, 231, 0.14);
  --op-shadow: rgba(0, 0, 0, 0.34);
  --op-accent: #a8b4ca;
  --op-accent-2: #d7b889;
  --op-accent-ink: #111318;

  --landing-bg: var(--op-bg);
  --landing-bg-soft: var(--op-bg-soft);
  --landing-card: var(--op-surface);
  --landing-card-strong: var(--op-surface-strong);
  --landing-text: var(--op-text);
  --landing-muted: var(--op-muted);
  --landing-border: var(--op-border);
  --landing-accent: var(--op-accent);
  --landing-accent-2: var(--op-accent-2);
  --landing-accent-ink: var(--op-accent-ink);
  --landing-shadow: var(--op-shadow);
  --landing-panel: color-mix(in srgb, var(--op-surface-strong) 76%, transparent);
  --landing-panel-2: color-mix(in srgb, var(--op-surface) 72%, transparent);
  --landing-glass: color-mix(in srgb, var(--op-surface-strong) 62%, transparent);
  --landing-line: color-mix(in srgb, var(--op-border) 78%, transparent);

  --login-bg: var(--op-bg);
  --login-bg-soft: var(--op-bg-soft);
  --login-text: var(--op-text);
  --login-muted: var(--op-muted);
  --login-accent: var(--op-accent);
  --login-accent-2: var(--op-accent-2);
  --login-shadow: var(--op-shadow);
  --login-border: color-mix(in srgb, var(--op-border) 82%, transparent);
  --login-panel: color-mix(in srgb, var(--op-surface-strong) 76%, transparent);
  --login-panel-2: color-mix(in srgb, var(--op-surface) 72%, transparent);

  --dash-page-bg: var(--op-bg);
  --dash-text: var(--op-text);
  --dash-text-soft: var(--op-text-soft);
  --dash-muted: var(--op-muted);
  --dash-brand-start: #f4efe8;
  --dash-brand-end: #c8b7a6;
  --dash-panel-bg: var(--op-surface-strong);
  --dash-panel-border: color-mix(in srgb, var(--op-border) 90%, transparent);
  --dash-panel-shadow: none;
  --dash-kpi-bg: var(--op-bg-soft);
  --dash-kpi-border: color-mix(in srgb, var(--op-border) 80%, transparent);
  --dash-teal: var(--op-accent);
  --dash-teal-soft: color-mix(in srgb, var(--op-accent) 16%, transparent);
  --dash-teal-text: #e6dce7;
  --dash-accent: var(--op-accent);
}

html[data-theme="onyx-dark"] {
  --op-bg: #090d12;
  --op-bg-soft: #101722;
  --op-surface: rgba(17, 24, 34, 0.82);
  --op-surface-strong: #141d2a;
  --op-text: #f6f8fb;
  --op-text-soft: #ddd6cd;
  --op-muted: #a8b3c3;
  --op-border: rgba(216, 226, 238, 0.14);
  --op-shadow: rgba(0, 0, 0, 0.42);
  --op-accent: #42d0c5;
  --op-accent-2: #f2b35d;
  --op-accent-ink: #061312;

  --landing-bg: var(--op-bg);
  --landing-bg-soft: var(--op-bg-soft);
  --landing-card: var(--op-surface);
  --landing-card-strong: var(--op-surface-strong);
  --landing-text: var(--op-text);
  --landing-muted: var(--op-muted);
  --landing-border: var(--op-border);
  --landing-accent: var(--op-accent);
  --landing-accent-2: var(--op-accent-2);
  --landing-accent-ink: var(--op-accent-ink);
  --landing-shadow: var(--op-shadow);
  --landing-panel: color-mix(in srgb, var(--op-surface-strong) 76%, transparent);
  --landing-panel-2: color-mix(in srgb, var(--op-surface) 72%, transparent);
  --landing-glass: color-mix(in srgb, var(--op-surface-strong) 62%, transparent);
  --landing-line: color-mix(in srgb, var(--op-border) 78%, transparent);

  --login-bg: var(--op-bg);
  --login-bg-soft: var(--op-bg-soft);
  --login-text: var(--op-text);
  --login-muted: var(--op-muted);
  --login-accent: var(--op-accent);
  --login-accent-2: var(--op-accent-2);
  --login-shadow: var(--op-shadow);
  --login-border: color-mix(in srgb, var(--op-border) 82%, transparent);
  --login-panel: color-mix(in srgb, var(--op-surface-strong) 76%, transparent);
  --login-panel-2: color-mix(in srgb, var(--op-surface) 72%, transparent);

  --dash-page-bg: var(--op-bg);
  --dash-text: var(--op-text);
  --dash-text-soft: var(--op-text-soft);
  --dash-muted: var(--op-muted);
  --dash-brand-start: #faf6ef;
  --dash-brand-end: #d7c5b4;
  --dash-panel-bg: var(--op-surface-strong);
  --dash-panel-border: color-mix(in srgb, var(--op-border) 88%, transparent);
  --dash-panel-shadow: none;
  --dash-kpi-bg: var(--op-bg-soft);
  --dash-kpi-border: color-mix(in srgb, var(--op-border) 75%, transparent);
  --dash-teal: var(--op-accent);
  --dash-teal-soft: color-mix(in srgb, var(--op-accent) 16%, transparent);
  --dash-teal-text: #edf1f8;
  --dash-accent: var(--op-accent);
}