@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import "tailwindcss";

@font-face {
  font-family: 'BallPill';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/BallPill-light.otf') format('opentype');
}

@theme {
  --font-sans: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --color-teal: #1F5560;
  --color-teal-900: #183E46;
  --color-teal-700: #2A6C78;
  --color-purple: #5C1DD8;
  --color-purple-700: #4A17AE;
  --color-sage: #CDD8BB;
  --color-peri: #AFC0FF;
  --color-tan: #B1A089;
  --color-cream: #ECE9E9;
  --color-ink: #3C3A3A;
  --color-paper: #FFFFFF;

  --color-fg: var(--color-ink);
  --color-fg-muted: rgba(60,58,58,0.65);
  --color-fg-subtle: rgba(60,58,58,0.45);
  --color-bg: var(--color-paper);
  --color-bg-warm: var(--color-cream);
  --color-bg-dark: var(--color-teal);
  --color-accent: var(--color-purple);
  --color-accent-soft: var(--color-peri);
  --color-success: var(--color-sage);

  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 24px;
  --spacing-6: 32px;
  --spacing-7: 48px;
  --spacing-8: 64px;
  --spacing-9: 96px;
  --spacing-10: 144px;

  --radius-sm: 12px;
  --radius-md: 22px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-2xl: 56px;
  --radius-pill: 9999px;
  --radius-org: 48% 52% 62% 38% / 50% 44% 56% 50%;
  --radius-org2: 60% 40% 45% 55% / 38% 62% 38% 62%;

  --shadow-pill: 0 14px 40px rgba(24,62,70,0.35);
  --shadow-soft: 0 12px 40px rgba(0,0,0,0.08);
}

:root {
  /* Keeping original variables for direct var() usage */
  --teal: #1F5560;
  --teal-900: #183E46;
  --teal-700: #2A6C78;
  --purple: #5C1DD8;
  --purple-700: #4A17AE;
  --sage: #CDD8BB;
  --peri: #AFC0FF;
  --tan: #B1A089;
  --cream: #ECE9E9;
  --ink: #3C3A3A;
  --paper: #FFFFFF;

  --fg: var(--ink);
  --fg-muted: rgba(60,58,58,0.65);
  --fg-subtle: rgba(60,58,58,0.45);
  --bg: var(--paper);
  --bg-warm: var(--cream);
  --bg-dark: var(--teal);
  --accent: var(--purple);
  --accent-soft: var(--peri);
  --success: var(--sage);

  --font-sans: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --t-display: clamp(44px, 8vw, 112px);
  --t-h1: clamp(40px, 5.5vw, 72px);
  --t-h2: clamp(32px, 4vw, 52px);
  --t-h3: 26px;
  --t-lead: 19px;
  --t-body: 17px;
  --t-small: 15px;
  --t-label: 11px;
  --label-ls: 0.14em;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 144px;

  --r-sm: 12px;
  --r-md: 22px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-2xl: 56px;
  --r-pill: 9999px;
  --r-org: 48% 52% 62% 38% / 50% 44% 56% 50%;
  --r-org2: 60% 40% 45% 55% / 38% 62% 38% 62%;

  --shadow-pill: 0 14px 40px rgba(24,62,70,0.35);
  --shadow-soft: 0 12px 40px rgba(0,0,0,0.08);

  --max: 1320px;
  --sec-y: clamp(80px, 10vw, 144px);
}

body { font-family: var(--font-sans); color: var(--fg); background: var(--bg); margin: 0; padding: 0; }
h1 { font: 700 var(--t-h1)/0.98 var(--font-sans); letter-spacing: -0.01em; color: var(--teal); }
h2 { font: 700 var(--t-h2)/1.0 var(--font-sans); letter-spacing: -0.01em; color: var(--teal); }
h3 { font: 700 var(--t-h3)/1.15 var(--font-sans); color: var(--teal); }
p  { font: 400 var(--t-body)/1.6 var(--font-sans); margin-top: 0; margin-bottom: 1rem; }
code, .mono { font-family: var(--font-mono); }
.label { font: 500 var(--t-label)/1 var(--font-mono); letter-spacing: var(--label-ls); text-transform: uppercase; }

::selection { background: var(--purple); color: var(--paper); }

/* ─── R42 chatbot mark animations ────────────────────────────── */
@keyframes dotBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-4px); opacity: 1; }
}
.r42-mark .dot { animation: dotBounce 1.2s ease-in-out infinite; transform-origin: center; }
.r42-mark .dot:nth-child(2) { animation-delay: 0.15s; }
.r42-mark .dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes r42Shake {
  0%, 100%  { transform: translateX(0); }
  20%, 60%  { transform: translateX(-2px); }
  40%, 80%  { transform: translateX(2px); }
}
.r42-mark.shake { animation: r42Shake 0.5s ease-in-out; }