/*
 * AICLOUD design system.
 *
 * Single source of truth for both the prerendered marketing pages and the
 * React portals, which is why it is a plain stylesheet rather than something
 * inside the Vite app: both link it directly, so a token change lands
 * everywhere without a rebuild.
 *
 * site-src/build.mjs publishes it as site/assets/aicloud.vN.css. The version
 * lives in site-src/assets.mjs, and app/index.html has to be updated by hand
 * whenever it moves — the build refuses to run otherwise.
 *
 * Every colour below was sampled out of the logo file, so the site and the
 * mark cannot drift apart.
 */

/* Гръцкият е подмножеството, което винаги се зарежда, и затова стои първо;
   латиницата се тегли чак когато на страницата се появи латински знак, а
   кирилицата — само заради „ЕООД“ в правната форма и заради текстовете, които
   още не са преведени. `swap`, защото платформата трябва да покаже текст,
   преди да покаже типография.

   ДИСПЛЕЙНИЯТ ШРИФТ Е СМЕНЕН. Предишният нямаше гръцки изрез изобщо — не
   непълен, а никакъв — тоест всяко гръцко заглавие би паднало на системен
   шрифт и страницата би излязла с два различни почерка. Commissioner носи
   гръцки, вариативен е и геометричната му сянка стои близо до предишния. */
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/assets/fonts/commissioner-greek.v1.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/assets/fonts/commissioner-latin.v1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/manrope-greek.v1.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin.v1.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Кирилицата остава само за основния шрифт. Дисплейният няма нужда от нея:
   единственият кирилски низ, който ще оцелее след превода, е „ЕООД“ в правната
   форма, а той се чете в текст, не в заглавие. Файлът се тегли само ако на
   страницата наистина се появи кирилски знак — днес заради непреведеното. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/manrope-cyrillic.v1.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  /* Brand ramp, straight off the logo: cyan of the "BG" plate, the blue of the
     "AI" wordmark, the navy the cloud sinks into. --brand-500 is the action
     colour; --brand-900 is also the text colour, so type and mark are one hue. */
  --brand-50: #F5F8FE;
  --brand-100: #EAF4FE;
  --brand-200: #CFE6FD;
  --brand-300: #06B9F6;
  --brand-500: #026EED;
  --brand-700: #0038B0;
  --brand-900: #01143B;

  --accent: var(--brand-500);
  --accent-hover: #0155C4;   /* darker on hover: on white, brighter reads weaker */
  --accent-ink: #ffffff;
  --accent-soft: var(--brand-100);

  --ink: #01143B;
  --ink-muted: #4A5C7A;
  --ink-faint: #7386A3;
  --line: #DCE6F5;

  --ok: #047857;
  --warn: #B45309;
  --danger: #DC2626;

  --page: #ffffff;
  --surface: #ffffff;
  --surface-raised: var(--brand-50);
  --sunken: var(--brand-50);

  --gradient: linear-gradient(135deg, #06B9F6 0%, #026EED 55%, #0038B0 100%);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  /* Layered rather than one big blur: a single heavy shadow that read as depth
     on the old navy reads as dirt on white. Tinted with the brand navy so the
     grey never goes neutral against the blues. */
  --shadow-sm: 0 1px 2px rgba(1, 20, 59, .06), 0 1px 3px rgba(1, 20, 59, .08);
  --shadow: 0 2px 4px rgba(1, 20, 59, .04), 0 8px 24px rgba(1, 20, 59, .08);
  --shadow-lg: 0 4px 8px rgba(1, 20, 59, .04), 0 20px 48px rgba(1, 20, 59, .12);
  --shadow-accent: 0 8px 24px rgba(2, 110, 237, .28);

  --font-display: 'Commissioner', 'Segoe UI', system-ui, -apple-system, 'Noto Sans', Arial, sans-serif;
  --font: 'Manrope', 'Segoe UI', system-ui, -apple-system, 'Noto Sans', 'Liberation Sans', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;

  /* One motion scale, so nothing in the site invents its own timing. */
  --dur-fast: .15s;
  --dur: .25s;
  --dur-slow: .45s;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --measure: 68ch;
  --shell: 1120px;

  color-scheme: light;
  accent-color: var(--accent);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { margin: 0; }

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Both faces ship Bulgarian localised Cyrillic (и→u, д→g, в→ʙ) and the
     browser switches to it on its own because the document is lang="bg". The
     printed logo and banner use the standard forms, so the site does too —
     one wordmark, one alphabet. */
  font-feature-settings: 'locl' 0;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -.03em; }
h2 { font-size: clamp(24px, 2.8vw, 34px); }
h3 { font-size: 19px; font-weight: 600; }
p { margin: 0; text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--shell); margin: 0 auto; padding: 0 var(--space-5); }
.stack > * + * { margin-top: var(--space-4); }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); font-size: 13px; }
.measure { max-width: var(--measure); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 12px 22px; border: 1px solid transparent; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--accent-hover); text-decoration: none; box-shadow: var(--shadow-accent); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: default; box-shadow: none; transform: none; }
.btn.ghost { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: none; }
.btn.ghost:hover { background: var(--surface-raised); border-color: var(--brand-200); box-shadow: var(--shadow-sm); }
.btn.sm { padding: 7px 14px; font-size: 14px; }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); box-shadow: none; }
.btn.danger:hover { background: var(--danger); color: #fff; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.field { display: block; }
.field > span { display: block; font-size: 13px; color: var(--ink-muted); margin-bottom: 6px; font-weight: 500; }
input, select, textarea {
  width: 100%; padding: 11px 13px; font: inherit;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input:hover, select:hover, textarea:hover { border-color: var(--brand-200); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(2, 110, 237, .15);
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); }
th { color: var(--ink-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

.tag {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--line); color: var(--ink-muted); background: var(--surface-raised);
}
.tag.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 8%, #fff); }
.tag.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 8%, #fff); }

.error { color: var(--danger); font-size: 14px; }

.grid { display: grid; gap: var(--space-4); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.center-page { min-height: 100vh; display: grid; place-items: center; padding: var(--space-5); }

/* The brand lockup: the mark ships as an image, the name stays live text so it
   is selectable, translatable, weightless and sharp at any zoom. The three
   colours are the three colours of the printed wordmark. */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { height: 34px; width: auto; display: block; }
.brand-word {
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  letter-spacing: -.025em; white-space: nowrap; line-height: 1;
}
.brand-word .ai { color: var(--accent); }
.brand-word .tld { color: var(--brand-300); }

/* ── лъчът през логото ────────────────────────────────────────────────
   На всеки десет секунди светла ивица минава бавно през знака и името.

   САМО ГОРЕ. Логото се рисува на четири места — в главата на сайта, в подписа
   му, в портала и в панела — и мига в подписа никой не гледа, а в панела е
   работен инструмент. Затова селекторът изброява двете глави поименно, вместо
   да хване `.brand` навсякъде.

   Десетте секунди са в анимацията, не в изчакване: самото минаване трае три
   секунди (0% до 30%), а останалите седем ивицата стои извън кутията. Един
   цикъл, никакъв скрипт, никакъв таймер.

   Прозрачно бяло, а не цвят: логото си има свои три цвята и четвърти, минаващ
   през тях, би ги сменил. Бялото само ги осветлява за миг.

   Разлика от aicloud.bg, съзнателна: там анимацията стои в заявка
   `prefers-reduced-motion: no-preference`. Тук я няма — по решението от
   10.09.2026 ефектите вървят винаги. Виж бележката няколко реда по-долу. */
.site-head .brand,
.portal-top .brand {
  position: relative;
  overflow: hidden;
  /* Кутията е плътно около съдържанието; без това ивицата няма какво да пресече
     в началото и в края и се вижда как изниква. */
  isolation: isolate;
}
.site-head .brand::after,
.portal-top .brand::after {
  content: "";
  position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    color-mix(in srgb, #fff 62%, transparent) 45%,
    color-mix(in srgb, #fff 76%, transparent) 50%,
    color-mix(in srgb, #fff 62%, transparent) 55%,
    transparent 100%
  );
  transform: translateX(-160%);
  animation: brand-shine 10s ease-in-out infinite;
}

@keyframes brand-shine {
  0%   { transform: translateX(-160%); }
  30%  { transform: translateX(340%); }
  100% { transform: translateX(340%); }
}

/* ── защо тук няма заявка за движение ─────────────────────────────────
   Под този ред стоеше общият изключвател: при системна настройка «по-малко
   движение» всяка анимация и всеки преход се свиваха до .01ms с `!important`,
   а плавното превъртане падаше. Махнат по изрично решение на собственика
   (10.09.2026) — ефектите вървят винаги, независимо какво казва операционната
   система.

   Записано е тук, за да не се «поправи» обратно по погрешка: aicloud.bg
   продължава да уважава настройката, а WCAG 2.3.3 я препоръчва. Връщането е
   този блок, плюс заявките, разгънати в marketing.css, плюс пазача `reduce` в
   assets/prompt.js, двете правила в assets/chat.js, четирите в
   app/src/styles/app.css и `brand-shine` няколко реда по-горе. */
.btn, a, .card, input, select, textarea {
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}