/* OpenHosst design tokens: extracted from openhosst.com (assets/oh.css).
   Every colour, radius, type size and motion value in the panel comes from here. Dark theme only, like the site. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=DM+Sans:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  color-scheme: dark;

  /* surfaces */
  --oh-base: #090d0e;
  --oh-surface: #0f1517;
  --oh-elevated: #162022;

  /* brand */
  --oh-teal: #00c9a7;
  --oh-teal-bright: #2de8c8;
  --oh-mint: #bdfff0;

  /* text */
  --oh-ink: #f0f4f5;
  --oh-mute: #8aa3a8;
  --oh-faint: #4d6b70;

  /* lines */
  --oh-line: rgba(0, 201, 167, 0.12);
  --oh-line-bright: rgba(0, 201, 167, 0.3);
  --oh-line-mint: rgba(189, 255, 240, 0.35);

  /* status */
  --oh-success: #00b67a;
  --oh-danger: #ff4d6d;
  --oh-info: #3b82f6;
  --oh-warn: #f5b942;

  /* tints */
  --oh-teal-05: rgba(0, 201, 167, 0.05);
  --oh-teal-10: rgba(0, 201, 167, 0.1);
  --oh-teal-15: rgba(0, 201, 167, 0.15);
  --oh-danger-10: rgba(255, 77, 109, 0.1);
  --oh-danger-30: rgba(255, 77, 109, 0.3);
  --oh-success-15: rgba(0, 182, 122, 0.15);
  --oh-warn-15: rgba(245, 185, 66, 0.15);
  --oh-info-15: rgba(59, 130, 246, 0.15);

  /* gradients */
  --oh-gradient: linear-gradient(135deg, #00c9a7, #2de8c8 55%, #bdfff0);
  --oh-text-gradient: linear-gradient(120deg, #00c9a7, #2de8c8 45%, #bdfff0);
  --oh-hero-mesh:
    radial-gradient(ellipse 70% 55% at 50% -8%, rgba(45, 232, 200, 0.18) 0, transparent 62%),
    radial-gradient(ellipse 40% 30% at 82% 60%, rgba(189, 255, 240, 0.08) 0, transparent 60%);

  /* radii */
  --oh-radius-sm: 0.5rem;
  --oh-radius-btn: 0.625rem;
  --oh-radius-md: 0.75rem;
  --oh-radius-card: 1rem;
  --oh-radius-hero: 1.25rem;
  --oh-radius-bento: 1.5rem;
  --oh-radius-full: 9999px;

  /* shadows */
  --oh-shadow-lit: 0 0 0 1px rgba(45, 232, 200, 0.35), 0 0 60px -12px rgba(189, 255, 240, 0.4), inset 0 1px 0 rgba(189, 255, 240, 0.1);
  --oh-shadow-card: 0 8px 32px rgba(0, 201, 167, 0.1);
  --oh-shadow-float: 0 8px 32px rgba(0, 0, 0, 0.4);
  --oh-glow: 0 0 24px rgba(0, 201, 167, 0.4);

  /* type */
  --oh-font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --oh-font-display: "Cabinet Grotesk", "Satoshi", system-ui, sans-serif;
  --oh-font-sans: "DM Sans", system-ui, sans-serif;
  --oh-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --oh-text-display: clamp(3rem, 5.5vw, 4.75rem);
  --oh-text-h1: clamp(2.5rem, 4.5vw, 3.75rem);
  --oh-text-h2: clamp(1.875rem, 3vw, 2.5rem);
  --oh-text-h3: clamp(1.25rem, 2vw, 1.5rem);
  --oh-text-lead: 1.1875rem;
  --oh-text-body: 1rem;
  --oh-text-small: 0.875rem;
  --oh-text-micro: 0.6rem;

  /* spacing (4px grid) */
  --oh-space-1: 0.25rem;
  --oh-space-2: 0.5rem;
  --oh-space-3: 0.75rem;
  --oh-space-4: 1rem;
  --oh-space-5: 1.25rem;
  --oh-space-6: 1.5rem;
  --oh-space-8: 2rem;
  --oh-space-10: 2.5rem;
  --oh-space-12: 3rem;
  --oh-space-16: 4rem;

  /* motion */
  --oh-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --oh-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --oh-fast: 150ms;
  --oh-base-time: 200ms;
  --oh-slow: 300ms;

  /* focus ring: 2px mint ring with 2px offset, as on the site */
  --oh-focus: 0 0 0 2px var(--oh-base), 0 0 0 4px var(--oh-mint);
}

@media (prefers-reduced-motion: reduce) {
  :root { --oh-fast: 0.01ms; --oh-base-time: 0.01ms; --oh-slow: 0.01ms; }
}