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

/**
 * OSI design system — единственный источник цветов, типографики, кнопок, отступов.
 * Only Safe Internet
 */
:root {
  /* —— Color —— */
  --osi-bg: #071016;
  --osi-bg-2: #0a1820;
  --osi-elevated: #0c1a22;
  --osi-surface: #10212b;
  --osi-surface-2: #152833;
  --osi-border: rgba(158, 182, 194, 0.16);
  --osi-border-hover: rgba(61, 255, 168, 0.4);
  --osi-text: #eef6f8;
  --osi-text-muted: #9eb6c2;
  --osi-accent: #3dffa8;
  --osi-accent-2: #5eead4;
  --osi-accent-ink: #042016;
  --osi-danger: #ff5c5c;
  --osi-warn: #ffb454;
  --osi-overlay: rgba(7, 16, 22, 0.72);

  /* aliases (legacy names used across CSS) */
  --osi-ink: var(--osi-bg);
  --osi-ink-2: var(--osi-elevated);
  --osi-panel: var(--osi-surface);
  --osi-line: var(--osi-border);
  --osi-mist: var(--osi-text-muted);
  --osi-snow: var(--osi-text);
  --osi-signal: var(--osi-accent);
  --osi-signal-2: var(--osi-accent-2);

  /* —— Type —— */
  --osi-font-display: "Syne", ui-sans-serif, system-ui, sans-serif;
  --osi-font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --osi-fs-xs: 0.75rem;
  --osi-fs-sm: 0.875rem;
  --osi-fs-md: 1rem;
  --osi-fs-lg: 1.125rem;
  --osi-fs-xl: 1.5rem;
  --osi-fs-2xl: clamp(1.5rem, 3.2vw, 2.1rem);
  --osi-lh: 1.5;
  --osi-tracking-tight: -0.03em;

  /* —— Space / layout —— */
  --osi-space-1: 0.25rem;
  --osi-space-2: 0.5rem;
  --osi-space-3: 0.75rem;
  --osi-space-4: 1rem;
  --osi-space-5: 1.5rem;
  --osi-space-6: 2rem;
  --osi-space-8: 3rem;
  --osi-page-x: clamp(1rem, 4vw, 2.5rem);
  --osi-content: 1000px;
  --osi-content-md: 720px;
  --osi-content-sm: 440px;
  --osi-section-y: clamp(3rem, 8vw, 4.5rem);
  --osi-stack: 0.75rem;

  /* —— Controls (единый размер кнопок/полей) —— */
  --osi-ctrl-h: 48px;
  --osi-ctrl-h-sm: 36px;
  --osi-ctrl-px: 1.15rem;
  --osi-ctrl-px-sm: 0.85rem;
  --osi-ctrl-fs: 0.9375rem;
  --osi-ctrl-fs-sm: 0.8125rem;
  --osi-ctrl-fw: 700;
  --osi-radius: 0.65rem;
  --osi-radius-lg: 1rem;
  --osi-radius-sm: 0.5rem;
  --osi-focus: 0 0 0 2px rgba(61, 255, 168, 0.22);

  /* —— Elevation —— */
  --osi-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);

  /* —— SPA theme (hsl channels for Tailwind/shadcn) —— */
  --background: 198 48% 6%;
  --foreground: 190 30% 95%;
  --card: 198 38% 10%;
  --card-foreground: 190 30% 95%;
  --popover: 198 38% 10%;
  --popover-foreground: 190 30% 95%;
  --primary: 152 100% 62%;
  --primary-foreground: 168 80% 6%;
  --secondary: 198 28% 14%;
  --secondary-foreground: 190 30% 95%;
  --muted: 198 22% 16%;
  --muted-foreground: 190 16% 62%;
  --accent: 174 70% 48%;
  --accent-foreground: 168 80% 6%;
  --destructive: 0 72% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 198 22% 18%;
  --input: 198 22% 18%;
  --ring: 152 100% 62%;
  --radius: 0.65rem;
  --success: 152 70% 42%;
  --success-foreground: 168 40% 8%;
  --warning: 36 100% 55%;
  --warning-foreground: 198 40% 8%;
}

.dark {
  --background: 198 48% 6%;
  --foreground: 190 30% 95%;
  --card: 198 38% 10%;
  --card-foreground: 190 30% 95%;
  --popover: 198 38% 10%;
  --popover-foreground: 190 30% 95%;
  --primary: 152 100% 62%;
  --primary-foreground: 168 80% 6%;
  --secondary: 198 28% 14%;
  --secondary-foreground: 190 30% 95%;
  --muted: 198 22% 16%;
  --muted-foreground: 190 16% 62%;
  --accent: 174 70% 48%;
  --accent-foreground: 168 80% 6%;
  --border: 198 22% 18%;
  --input: 198 22% 18%;
  --ring: 152 100% 62%;
}

/* Shared button primitives */
.osi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--osi-space-2);
  box-sizing: border-box;
  height: var(--osi-ctrl-h);
  min-height: var(--osi-ctrl-h);
  padding: 0 var(--osi-ctrl-px);
  border-radius: var(--osi-radius);
  border: 1px solid transparent;
  font-family: var(--osi-font-body);
  font-size: var(--osi-ctrl-fs);
  font-weight: var(--osi-ctrl-fw);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.osi-btn:hover {
  transform: translateY(-1px);
}

.osi-btn:active {
  transform: translateY(0);
}

.osi-btn:focus-visible {
  outline: none;
  box-shadow: var(--osi-focus);
}

.osi-btn--primary {
  background: var(--osi-accent);
  color: var(--osi-accent-ink);
}

.osi-btn--primary:hover {
  filter: brightness(1.05);
}

.osi-btn--ghost {
  background: transparent;
  border-color: var(--osi-border);
  color: var(--osi-text);
}

.osi-btn--ghost:hover {
  border-color: var(--osi-border-hover);
  background: rgba(61, 255, 168, 0.06);
}

.osi-btn--sm {
  height: var(--osi-ctrl-h-sm);
  min-height: var(--osi-ctrl-h-sm);
  padding: 0 var(--osi-ctrl-px-sm);
  font-size: var(--osi-ctrl-fs-sm);
}

.osi-field {
  box-sizing: border-box;
  width: 100%;
  height: var(--osi-ctrl-h);
  min-height: var(--osi-ctrl-h);
  padding: 0 var(--osi-ctrl-px-sm);
  border-radius: var(--osi-radius);
  border: 1px solid var(--osi-border);
  background: rgba(7, 16, 22, 0.55);
  color: var(--osi-text);
  font-family: var(--osi-font-body);
  font-size: var(--osi-fs-sm);
  outline: none;
}

.osi-field:focus {
  border-color: var(--osi-border-hover);
  box-shadow: var(--osi-focus);
}

textarea.osi-field {
  height: auto;
  min-height: 72px;
  padding: var(--osi-space-3) var(--osi-ctrl-px-sm);
  resize: vertical;
}