/*
 * 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.
 */

/* Cyrillic first: on a Bulgarian site it is the subset that always loads, and
   the browser fetches the Latin file only once a Latin glyph is actually
   needed. `swap` because a national platform must render text before it
   renders typography. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/assets/fonts/montserrat-cyrillic.v1.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url('/assets/fonts/montserrat-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;
}
@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;
}

: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: 'Montserrat', '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); }

@media (prefers-reduced-motion: no-preference) {
  .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);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}