/* OpenTeams Design System — Foundations
   Navy-default dark direction with optional light surfaces.
   Typography: Manrope (display) + Inter (body) + JetBrains Mono (code).
*/

/* Self-hosted fonts (Manrope/Inter/JetBrains Mono) — see fonts/fonts.css.
   The former Google Fonts css2 @import was removed so no visitor request leaves
   the origin (privacy stance + subdomain CSP font-src 'self'). */
@import url('fonts/fonts.css');

:root {
  /* ───────── Brand palette ───────── */
  --ot-navy-950: #04091F;       /* deepest, near-black navy */
  --ot-navy-900: #06112E;       /* primary canvas (default) */
  --ot-navy-800: #0B1B45;       /* secondary surface / cards on navy */
  --ot-navy-700: #102164;       /* glow target / hover surface */
  --ot-navy-600: #1A2D5C;       /* card border base */
  --ot-navy-500: #22397A;       /* card border hover */

  --ot-blue-600: #2545D8;       /* primary action hover */
  --ot-blue-500: #3056F5;       /* primary action / links / "Teams" wordmark */
  --ot-blue-400: #5B7BFF;       /* lighter blue / decorative */
  --ot-blue-300: #8FA5FF;       /* eyebrow on dark */
  --ot-blue-200: #BFCBFF;       /* faint blue */

  --ot-purple-500: #8E5BC8;     /* gradient midpoint */

  --ot-coral-500: #FF8463;      /* gradient terminus / accent */
  --ot-coral-400: #FFA388;      /* lighter coral */
  --ot-orange-500: #F7A23B;     /* logomark orange figure */

  --ot-cream-100: #FBE9E2;      /* light section background */
  --ot-cream-50: #FDF5F0;       /* lighter cream */
  --ot-lavender-100: #E8E5F7;   /* secondary light bg */
  --ot-lavender-50: #F2F0FA;    /* lighter lavender */

  --ot-white: #FFFFFF;
  --ot-ink-900: #0E1330;        /* near-black for light-mode body */
  --ot-ink-700: #2A2F4E;        /* secondary ink on light */
  --ot-ink-500: #5B6080;        /* tertiary ink on light */

  /* ───────── Signature gradient ───────── */
  --ot-gradient-brand: linear-gradient(95deg, #3056F5 0%, #8E5BC8 45%, #FF8463 100%);
  --ot-gradient-brand-soft: linear-gradient(95deg, #3056F5 0%, #FF8463 100%);
  --ot-gradient-glow: radial-gradient(ellipse 80% 60% at 20% 90%, #102164 0%, #06112E 60%);

  /* ───────── Semantic — dark mode (default) ───────── */
  --ot-bg: var(--ot-navy-900);
  --ot-bg-alt: var(--ot-navy-800);
  --ot-surface: var(--ot-navy-800);
  --ot-surface-hover: var(--ot-navy-700);
  --ot-border: rgba(255, 255, 255, 0.08);
  --ot-border-strong: rgba(255, 255, 255, 0.14);

  --ot-fg: #FFFFFF;
  --ot-fg-muted: #B8C0D9;
  --ot-fg-subtle: #7B85A6;
  --ot-fg-eyebrow: var(--ot-blue-300);

  --ot-link: var(--ot-blue-400);
  --ot-link-hover: var(--ot-blue-300);

  /* ───────── Type families ───────── */
  --ot-font-display: 'Manrope', system-ui, sans-serif;
  --ot-font-body: 'Inter', system-ui, sans-serif;
  --ot-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ───────── Type scale ───────── */
  --ot-text-xs: 12px;
  --ot-text-sm: 14px;
  --ot-text-base: 16px;
  --ot-text-md: 18px;
  --ot-text-lg: 20px;
  --ot-text-xl: 24px;
  --ot-text-2xl: 32px;
  --ot-text-3xl: 44px;
  --ot-text-4xl: 60px;
  --ot-text-5xl: 80px;
  --ot-text-6xl: 104px;

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

  /* ───────── Radii ───────── */
  --ot-radius-sm: 6px;
  --ot-radius-md: 10px;
  --ot-radius-lg: 16px;
  --ot-radius-xl: 20px;
  --ot-radius-2xl: 28px;
  --ot-radius-pill: 999px;

  /* ───────── Shadows ───────── */
  --ot-shadow-card-light: 0 8px 24px rgba(20, 14, 60, 0.08);
  --ot-shadow-card-light-hover: 0 16px 40px rgba(20, 14, 60, 0.12);
  --ot-shadow-button: 0 4px 14px rgba(48, 86, 245, 0.32);
  --ot-shadow-button-hover: 0 8px 22px rgba(48, 86, 245, 0.42);

  /* ───────── Motion ───────── */
  --ot-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ot-duration-fast: 140ms;
  --ot-duration: 240ms;
  --ot-duration-slow: 420ms;

  /* ───────── Layout ───────── */
  --ot-max-width: 1200px;
  --ot-nav-height: 72px;
}

/* Light surfaces (for cream/lavender sections) — opt in via class */
.ot-light,
.ot-section-cream,
.ot-section-lavender {
  --ot-bg: var(--ot-cream-100);
  --ot-bg-alt: var(--ot-lavender-100);
  --ot-surface: var(--ot-white);
  --ot-surface-hover: var(--ot-cream-50);
  --ot-border: rgba(20, 14, 60, 0.08);
  --ot-border-strong: rgba(20, 14, 60, 0.14);
  --ot-fg: var(--ot-ink-900);
  --ot-fg-muted: var(--ot-ink-700);
  --ot-fg-subtle: var(--ot-ink-500);
  --ot-fg-eyebrow: var(--ot-blue-500);
  --ot-link: var(--ot-blue-500);
  --ot-link-hover: var(--ot-blue-600);
}

.ot-section-lavender {
  --ot-bg: var(--ot-lavender-100);
}

/* ───────── Base typographic styles ───────── */
.ot-h1 {
  font-family: var(--ot-font-display);
  font-weight: 800;
  font-size: var(--ot-text-5xl);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ot-fg);
  text-wrap: balance;
}

.ot-h2 {
  font-family: var(--ot-font-display);
  font-weight: 800;
  font-size: var(--ot-text-4xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ot-fg);
  text-wrap: balance;
}

.ot-h3 {
  font-family: var(--ot-font-display);
  font-weight: 700;
  font-size: var(--ot-text-2xl);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ot-fg);
}

.ot-h4 {
  font-family: var(--ot-font-display);
  font-weight: 700;
  font-size: var(--ot-text-xl);
  line-height: 1.25;
  color: var(--ot-fg);
}

.ot-body {
  font-family: var(--ot-font-body);
  font-weight: 400;
  font-size: var(--ot-text-md);
  line-height: 1.55;
  color: var(--ot-fg-muted);
  text-wrap: pretty;
}

.ot-body-sm {
  font-family: var(--ot-font-body);
  font-size: var(--ot-text-sm);
  line-height: 1.5;
  color: var(--ot-fg-muted);
}

.ot-eyebrow {
  font-family: var(--ot-font-body);
  font-weight: 600;
  font-size: var(--ot-text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ot-fg-eyebrow);
}

.ot-eyebrow::before {
  content: '— ';
  margin-right: 2px;
}

.ot-eyebrow.ot-eyebrow--bare::before {
  content: '';
  margin: 0;
}

.ot-mono {
  font-family: var(--ot-font-mono);
  font-size: var(--ot-text-sm);
}

/* ───────── Signature gradient text ───────── */
.ot-gradient-text {
  background: var(--ot-gradient-brand);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ───────── Surfaces / structural ───────── */
.ot-canvas {
  background: var(--ot-bg);
  color: var(--ot-fg);
  font-family: var(--ot-font-body);
}

.ot-canvas--glow {
  background: var(--ot-gradient-glow);
}

.ot-card {
  background: var(--ot-surface);
  border: 1px solid var(--ot-border);
  border-radius: var(--ot-radius-lg);
  padding: var(--ot-space-6);
  transition: border-color var(--ot-duration) var(--ot-ease),
              background-color var(--ot-duration) var(--ot-ease),
              box-shadow var(--ot-duration) var(--ot-ease);
}

.ot-card:hover {
  border-color: var(--ot-border-strong);
}

.ot-light .ot-card,
.ot-section-cream .ot-card,
.ot-section-lavender .ot-card {
  box-shadow: var(--ot-shadow-card-light);
  border: none;
}

.ot-light .ot-card:hover,
.ot-section-cream .ot-card:hover,
.ot-section-lavender .ot-card:hover {
  box-shadow: var(--ot-shadow-card-light-hover);
}