/*
 * SandrickTech HUB — shared design tokens (source of truth).
 * Keep in sync with portal/shared/include/stp_ui_tokens.h
 * and android/.../StpColors.kt. Canon: docs/product/CLIENT_FRONTEND_DESIGN.md
 *
 * Anti-cliché: NO purple→indigo SaaS, NO cream+serif+terracotta, NO magenta.
 * Dark navy + electric blue + teal. RU-primary ops console, not a chat landing.
 */
:root {
  /* Color — blue / cyan / dark-blue cyber wireframe scheme */
  --bg: #060b16;
  --bg-elevated: #0c1424;
  --panel: #101a2c;
  --panel-2: #162338;
  --text: #e6ecf5;
  --muted: #8b97ad;
  --accent: #4da3ff;
  --accent-2: #22d3ee;
  --accent-muted: #9cc8ff;
  --on-accent: #041018;
  --brand-mark-bg: #0984e3;
  --brand-mark-bg-hi: #35a8ff;
  --brand-mark-glyph: #0a1628;
  --brand-cloud-top: #f8fbfe;
  --brand-cloud-mid: #ecf3fa;
  --brand-cloud-bottom: #dce7f2;
  --brand-cloud-glow: rgba(255, 255, 255, 0.72);
  --brand-cloud-sky: rgba(163, 194, 228, 0.28);
  --brand-cloud-haze: rgba(190, 206, 223, 0.22);
  --brand-cloud-border: rgba(160, 181, 204, 0.34);
  --logo-fg: #061018;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --success: #34d399;
  --success-fg: #a7f3d0;
  --warn: #fbbf24;
  --warn-fg: #fde68a;
  --danger: #f87171;
  --danger-fg: #fecaca;
  --info-fg: #b8d9ff;
  --danger-bg: rgba(248, 113, 113, 0.12);
  --danger-border: rgba(248, 113, 113, 0.35);
  --info-bg: rgba(77, 163, 255, 0.1);
  --info-border: rgba(77, 163, 255, 0.3);
  --success-bg: rgba(52, 211, 153, 0.1);
  --success-border: rgba(52, 211, 153, 0.3);
  --warn-bg: rgba(251, 191, 36, 0.1);
  --warn-border: rgba(251, 191, 36, 0.35);
  --focus: rgba(77, 163, 255, 0.45);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --raw-bg: #040810;

  /* Type */
  --font: "IBM Plex Sans", "Source Sans 3", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --font-weight-brand: 650;
  --font-tracking-brand: -0.02em;
  --text-brand: 1.05rem;
  --text-title: 1.15rem;
  --text-body: 15px;
  --text-lead: 0.9rem;
  --text-small: 0.85rem;
  --text-badge: 0.7rem;
  --leading: 1.45;

  /* Space / radius / chrome */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius: 12px;
  --radius-sm: 8px;
  --header-h: 40px;
  --logo-corner-w: 12.5rem;
  --logo-corner-h: 40px;
  --sidebar-w: 44px;
  --sidebar-chip: 34px;
  --target-min: 44px;
  --app-max: 1100px;
  --app-max-wide: 1280px;

  /* Motion — canon docs/ux/DESIGN_REFRESH_2026.md §2.
   * Mirrors: STP_UI_DUR_*_MS (stp_ui_tokens.h), StpMotion (Compose).
   * Movement never signals state; prefers-reduced-motion kills all of it. */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
  --stagger-1: 40ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-standard: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --ease-emphasis: cubic-bezier(0.34, 1.32, 0.64, 1);

  /* Elevation / surface depth — §1. Border always stays, shadow is additive. */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.28), 0 8px 24px rgba(0, 0, 0, 0.22);
  --elev-2: 0 2px 6px rgba(0, 0, 0, 0.32), 0 16px 40px rgba(0, 0, 0, 0.3);
  --elev-3: 0 8px 16px rgba(0, 0, 0, 0.36), 0 28px 64px rgba(0, 0, 0, 0.42);
  --glass-blur: 12px;
  --grad-brand: linear-gradient(135deg, var(--accent), var(--accent-2));
  --bg-cloud-gradient: linear-gradient(
    180deg,
    var(--brand-cloud-top) 0%,
    var(--brand-cloud-mid) 48%,
    var(--brand-cloud-bottom) 100%
  );
  --bg-cloud-atmosphere:
    radial-gradient(circle at 18% 14%, var(--brand-cloud-glow) 0%, transparent 32%),
    radial-gradient(circle at 82% 10%, var(--brand-cloud-sky) 0%, transparent 36%),
    radial-gradient(circle at 50% 100%, var(--brand-cloud-haze) 0%, transparent 42%),
    var(--bg-cloud-gradient);
  --atmo-auth-base: #060b16;
  --atmo-auth-glow-1: rgba(77, 163, 255, 0.26);
  --atmo-auth-glow-2: rgba(34, 211, 238, 0.14);
  --atmo-auth-glow-3: rgba(94, 184, 255, 0.12);
  --atmo-shell-base: #060b16;
  --atmo-shell-glow-1: rgba(77, 163, 255, 0.2);
  --atmo-shell-glow-2: rgba(34, 211, 238, 0.12);
  --atmo-shell-glow-3: rgba(94, 184, 255, 0.08);

  /* Full-bleed wireframe corridor (self-hosted; never hotlink id.cloud.ru). */
  --bg-wireframe: url("../img/bg-wireframe-blue.svg");
  --bg-wireframe-raster: url("../img/bg-wireframe-blue.webp");
  --atmo-wire-scrim: rgba(6, 11, 22, 0.55);
  --atmo-wire-scrim-strong: rgba(6, 11, 22, 0.72);
  --atmo-wire-vignette: rgba(2, 6, 14, 0.45);

  /*
   * Service / nav pictogram accents only (glyphs inside unchanged chip frames).
   * Blue→cyan primary glow; violet stays as highlight only (not page chrome).
   */
  --picto-glyph: #c8dcff;
  --picto-glyph-active: #e8f1ff;
  --picto-blue: #5eb8ff;
  --picto-cyan: #22d3ee;
  --picto-violet: #a78bfa;
  --picto-glow:
    drop-shadow(0 0 1.5px rgba(94, 184, 255, 0.95))
    drop-shadow(0 0 5px rgba(34, 211, 238, 0.5))
    drop-shadow(0 0 10px rgba(167, 139, 250, 0.42));
  --picto-glow-strong:
    drop-shadow(0 0 2px rgba(94, 184, 255, 1))
    drop-shadow(0 0 7px rgba(34, 211, 238, 0.58))
    drop-shadow(0 0 14px rgba(167, 139, 250, 0.52));
}

html[data-theme="light"] {
  --atmo-auth-base: #e8f2fc;
  --atmo-auth-glow-1: rgba(77, 163, 255, 0.28);
  --atmo-auth-glow-2: rgba(34, 211, 238, 0.16);
  --atmo-auth-glow-3: rgba(255, 255, 255, 0.82);
  --atmo-shell-base: #e8f2fc;
  --atmo-shell-glow-1: rgba(77, 163, 255, 0.22);
  --atmo-shell-glow-2: rgba(34, 211, 238, 0.12);
  --atmo-shell-glow-3: rgba(255, 255, 255, 0.72);
  --atmo-wire-scrim: rgba(232, 242, 252, 0.82);
  --atmo-wire-scrim-strong: rgba(232, 242, 252, 0.9);
  --atmo-wire-vignette: rgba(226, 236, 248, 0.55);
  /* Readable glyphs on light cloud chips — blue primary, violet highlight */
  --picto-glyph: #1d4f9c;
  --picto-glyph-active: #163a74;
  --picto-glow:
    drop-shadow(0 0 1.5px rgba(29, 111, 212, 0.55))
    drop-shadow(0 0 5px rgba(34, 211, 238, 0.35))
    drop-shadow(0 0 9px rgba(167, 139, 250, 0.32));
  --picto-glow-strong:
    drop-shadow(0 0 2px rgba(29, 111, 212, 0.7))
    drop-shadow(0 0 7px rgba(34, 211, 238, 0.42))
    drop-shadow(0 0 12px rgba(124, 92, 191, 0.4));
}

/*
 * Extra skins (additional data-skin ids). hub / slate / forest locked hexes
 * live in skins.css + :root above — do not retouch those values here.
 * Anti-cliché: no purple/indigo/magenta, no cream+terracotta as a combo.
 */
html[data-skin="dune"][data-theme="dark"] {
  --bg: #16110c;
  --bg-elevated: #1e1812;
  --panel: #241c16;
  --panel-2: #2e241c;
  --accent: #d4a056;
  --accent-2: #2dd4bf;
  --focus: rgba(212, 160, 86, 0.45);
  --info-bg: rgba(212, 160, 86, 0.1);
  --info-border: rgba(212, 160, 86, 0.3);
  --accent-muted: #e8c98a;
}
html[data-skin="dune"][data-theme="light"] {
  --bg: #ebe4d6;
  --bg-elevated: #f5f0e6;
  --panel: #fffdf8;
  --panel-2: #efe8da;
  --accent: #a16207;
  --accent-2: #0d9488;
  --focus: rgba(161, 98, 7, 0.4);
  --accent-muted: #7a4e12;
}

html[data-skin="ember"][data-theme="dark"] {
  --bg: #140e0c;
  --bg-elevated: #1c1410;
  --panel: #241a16;
  --panel-2: #2e221c;
  --accent: #f5a524;
  --accent-2: #4da3ff;
  --focus: rgba(245, 165, 36, 0.45);
  --info-bg: rgba(245, 165, 36, 0.1);
  --info-border: rgba(245, 165, 36, 0.3);
  --accent-muted: #fcd34d;
}
html[data-skin="ember"][data-theme="light"] {
  --bg: #f3eee6;
  --bg-elevated: #faf7f2;
  --panel: #ffffff;
  --panel-2: #eee6dc;
  --accent: #b45309;
  --accent-2: #1d6fd4;
  --focus: rgba(180, 83, 9, 0.4);
  --accent-muted: #92400e;
}

html[data-skin="ice"][data-theme="dark"] {
  --bg: #071018;
  --bg-elevated: #0c1822;
  --panel: #102030;
  --panel-2: #163044;
  --accent: #22d3ee;
  --accent-2: #7dd3fc;
  --focus: rgba(34, 211, 238, 0.45);
  --info-bg: rgba(34, 211, 238, 0.1);
  --info-border: rgba(34, 211, 238, 0.3);
  --accent-muted: #a5f3fc;
}
html[data-skin="ice"][data-theme="light"] {
  --bg: #e6f2f6;
  --bg-elevated: #f2f9fb;
  --panel: #ffffff;
  --panel-2: #dceef4;
  --accent: #0e7490;
  --accent-2: #1d6fd4;
  --focus: rgba(14, 116, 144, 0.4);
  --accent-muted: #155e75;
}

html[data-skin="ink"][data-theme="dark"] {
  --bg: #05060a;
  --bg-elevated: #0c0e14;
  --panel: #12141c;
  --panel-2: #1a1e28;
  --accent: #cbd5e1;
  --accent-2: #38bdf8;
  --focus: rgba(203, 213, 225, 0.45);
  --info-bg: rgba(203, 213, 225, 0.1);
  --info-border: rgba(203, 213, 225, 0.3);
  --accent-muted: #e2e8f0;
}
html[data-skin="ink"][data-theme="light"] {
  --bg: #eceef1;
  --bg-elevated: #f5f6f8;
  --panel: #ffffff;
  --panel-2: #e4e7ec;
  --accent: #1e293b;
  --accent-2: #0d9488;
  --focus: rgba(30, 41, 59, 0.4);
  --accent-muted: #334155;
}

html[data-skin="copper"][data-theme="dark"] {
  --bg: #120f0c;
  --bg-elevated: #1a1510;
  --panel: #221c16;
  --panel-2: #2c241c;
  --accent: #e08a4f;
  --accent-2: #d4a056;
  --focus: rgba(224, 138, 79, 0.45);
  --info-bg: rgba(224, 138, 79, 0.1);
  --info-border: rgba(224, 138, 79, 0.3);
  --accent-muted: #f0b27a;
}
html[data-skin="copper"][data-theme="light"] {
  --bg: #f0e8e0;
  --bg-elevated: #f7f2ec;
  --panel: #ffffff;
  --panel-2: #e8ddd2;
  --accent: #9a5b2e;
  --accent-2: #1d6fd4;
  --focus: rgba(154, 91, 46, 0.4);
  --accent-muted: #7c3f1a;
}

html[data-skin="mist"][data-theme="dark"] {
  --bg: #0c1014;
  --bg-elevated: #141a20;
  --panel: #1a222a;
  --panel-2: #243038;
  --accent: #8ba3b5;
  --accent-2: #5eead4;
  --focus: rgba(139, 163, 181, 0.45);
  --info-bg: rgba(139, 163, 181, 0.1);
  --info-border: rgba(139, 163, 181, 0.3);
  --accent-muted: #cbd5e1;
}
html[data-skin="mist"][data-theme="light"] {
  --bg: #e8eef2;
  --bg-elevated: #f3f6f8;
  --panel: #ffffff;
  --panel-2: #dde5eb;
  --accent: #4b6272;
  --accent-2: #0d9488;
  --focus: rgba(75, 98, 114, 0.4);
  --accent-muted: #334155;
}