/* ============================================================
   PelagosAI — Design tokens
   Sourced verbatim from the project's claude.ai/design system
   (pelagosai-design-system-8e5960b7): colours, fonts, type,
   radius / elevation / motion, and base element styles.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* Brand core */
  --pelagos-green: #c1fa6f;
  --abyssal-charcoal: #272727;
  --deep-sea-teal: #0e5a52;
  --mist: #f2f4ef;
  --pure-white: #ffffff;

  /* Green ramp */
  --green-50: #f4fde8;
  --green-100: #e6fbc9;
  --green-200: #d6fba3;
  --green-300: #c1fa6f;
  --green-400: #a6e84b;
  --green-500: #8bcb33;
  --green-600: #6ba51f;
  --green-700: #527e16;

  /* Charcoal / ink ramp */
  --ink-950: #161616;
  --ink-900: #1c1c1c;
  --ink-850: #222222;
  --ink-800: #272727;
  --ink-700: #323232;
  --ink-600: #3d3d3d;
  --ink-500: #4a4a4a;
  --ink-400: #6b6b6b;
  --ink-300: #8c8c8c;

  /* Teal ramp */
  --teal-900: #093d38;
  --teal-700: #0e5a52;
  --teal-600: #137268;
  --teal-500: #1b9384;
  --teal-300: #5dc2b6;
  --teal-100: #c7eae5;

  /* Neutral / light ramp */
  --neutral-0: #ffffff;
  --neutral-50: #f8faf6;
  --neutral-100: #f2f4ef;
  --neutral-200: #e4e8df;
  --neutral-300: #cfd5c8;
  --neutral-400: #a8b0a0;
  --neutral-500: #7c8574;
  --neutral-600: #5a6253;
  --neutral-700: #404539;
  --neutral-800: #2b2e27;

  /* Status */
  --success: #5fc56b;
  --success-soft: rgba(95, 197, 107, 0.16);
  --warning: #f2b544;
  --warning-soft: rgba(242, 181, 68, 0.16);
  --danger: #f2755c;
  --danger-soft: rgba(242, 117, 92, 0.16);
  --info: #5dc2b6;
  --info-soft: rgba(93, 194, 182, 0.16);

  /* Surfaces (dark-first) */
  --surface-void: var(--ink-950);
  --surface-canvas: var(--ink-900);
  --surface-base: var(--ink-800);
  --surface-raised: var(--ink-700);
  --surface-hover: var(--ink-600);
  --surface-teal: var(--teal-700);
  --surface-inverse: var(--mist);

  /* Text */
  --text-primary: #f4f6f1;
  --text-secondary: #b9beb2;
  --text-muted: var(--ink-400);
  --text-disabled: var(--ink-300);
  --text-on-green: #1b2410;
  --text-on-teal: #eaf7f4;
  --text-link: var(--green-300);

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);
  --border-focus: var(--green-300);

  /* Action */
  --action-primary: var(--green-300);
  --action-primary-hover: var(--green-200);
  --action-primary-press: var(--green-400);
  --action-primary-text: var(--text-on-green);

  /* Focus ring */
  --ring: 0 0 0 3px rgba(193, 250, 111, 0.4);

  /* Fonts */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-heading: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line heights */
  --leading-tight: 1.12;
  --leading-snug: 1.28;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.16em;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.34);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.48);
  --shadow-xl: 0 32px 70px rgba(0, 0, 0, 0.55);
  --inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --glow-green: 0 6px 22px rgba(193, 250, 111, 0.28);
  --glow-green-soft:
    0 0 0 1px rgba(193, 250, 111, 0.18), 0 6px 20px rgba(193, 250, 111, 0.18);

  /* Motion */
  --ease-current: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --dur-slower: 600ms;
  --transition: var(--dur-base) var(--ease-current);

  /* Spacing (4/8 rhythm) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Layout */
  --container: 1180px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-slower: 0ms;
  }
}

/* ---- Base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
}
p {
  margin: 0;
  text-wrap: pretty;
}
a {
  color: inherit;
  text-decoration: none;
}
img,
svg {
  display: block;
  max-width: 100%;
}
button {
  font-family: inherit;
}
code,
kbd,
samp {
  font-family: var(--font-mono);
}
::selection {
  background: var(--green-300);
  color: var(--text-on-green);
}
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--ink-600);
  border-radius: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}