/* Gratin marketing site — plain CSS layered on top of Tailwind CDN.
 *
 * Tailwind utilities (bg-base, text-muted, max-w-6xl, etc.) come from
 * the CDN script in base.html. Everything below is project-specific:
 * design tokens shared with the desktop app, plus custom component
 * classes that the templates reference (.card, .cta-primary, etc.).
 */

:root {
  /* Background scale */
  --bg-base:    #08090a;
  --bg-raised:  #0f1011;
  --bg-surface: #191a1b;
  --bg-overlay: #222326;
  --bg-muted:   #2c2d31;
  --bg-pane:    rgba(8, 9, 10, 0.84);

  /* Text scale */
  --text-primary:   #ffffff;
  --text-secondary: #d4d4d8;
  --text-muted:     #71717a;
  --text-subtle:    #52525b;
  --text-ghost:     #4b4b50;

  /* Borders */
  --border-default: rgba(255, 255, 255, 0.08);
  --border-faint:   rgba(255, 255, 255, 0.04);

  /* Brand */
  --brand:       #2dd4bf;
  --brand-dim:   #14b8a6;
  --accent-blue: #60a5fa;
  --accent-red:  #f87171;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Type sizes */
  --text-2xs: 10px;
  --text-xs:  11px;
  --text-sm:  12px;
  --text-base: 13.5px;
  --text-md:  14px;
  --text-lg:  16px;
  --text-xl:  18px;
  --text-2xl: 20px;

  /* Fonts — Geist for body + display (different weights), Geist Mono for code.
   * Matches the desktop app's bundled face. Modern geometric sans; reads as
   * Linear / Vercel / Raycast register, not 1990s-Microsoft. */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'JetBrains Mono', Menlo, monospace;
}

html {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  margin: 0;
}

/* Aurora backdrop */
body::after {
  content: '';
  position: fixed;
  inset: -25%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 40% at 22% 28%, rgba(96,165,250,0.20), transparent 70%),
    radial-gradient(ellipse 55% 45% at 78% 72%, rgba(74,222,128,0.18), transparent 72%);
  filter: blur(60px);
  will-change: transform;
  animation: aurora-drift 80s ease-in-out infinite;
}

@keyframes aurora-drift {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-3%, 2%); }
}

body > * { position: relative; z-index: 1; }

/* Display headings: heavier weight + tighter tracking for the
 * "modern monolithic" register Geist does well. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
code, pre, kbd { font-family: var(--font-mono); }

a { color: inherit; text-decoration: none; }

/* ---- Color utility shortcuts (override Tailwind defaults) ---- */
.text-primary    { color: var(--text-primary); }
.text-secondary  { color: var(--text-secondary); }
.text-muted      { color: var(--text-muted); }
.text-subtle     { color: var(--text-subtle); }
.text-ghost      { color: var(--text-ghost); }
.text-brand      { color: var(--brand); }

.bg-base    { background-color: var(--bg-base); }
.bg-raised  { background-color: var(--bg-raised); }
.bg-surface { background-color: var(--bg-surface); }
.bg-overlay { background-color: var(--bg-overlay); }
.bg-brand   { background-color: var(--brand); }

.border-default { border-color: var(--border-default) !important; }
.border-faint   { border-color: var(--border-faint) !important; }

.font-display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.font-mono    { font-family: var(--font-mono); }

.text-2xs { font-size: var(--text-2xs); }

/* ---- Components ---- */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
}

.cta-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  background: var(--brand);
  color: var(--bg-base) !important;
  border-radius: var(--radius-md);
  font-weight: 590;
  font-size: var(--text-md);
  transition: background 0.15s ease;
  text-decoration: none;
}
.cta-primary:hover { background: var(--brand-dim); }

.cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-weight: 510;
  font-size: var(--text-md);
  transition: background 0.15s ease;
  text-decoration: none;
}
.cta-ghost:hover { background: var(--bg-overlay); }

.cta-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-3);
  background: var(--brand);
  color: var(--bg-base) !important;
  border-radius: 999px;
  font-weight: 590;
  font-size: var(--text-xs);
  transition: background 0.15s ease;
  text-decoration: none;
}
.cta-pill:hover { background: var(--brand-dim); }

.aurora-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 20%, rgba(45, 212, 191, 0.08), transparent 70%),
    radial-gradient(ellipse 50% 40% at 70% 80%, rgba(96, 165, 250, 0.06), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ---- Long-form prose (used by page.html via .prose-gratin) ---- */
.prose-gratin {
  color: var(--text-secondary);
  font-size: var(--text-md);
  line-height: 1.75;
}
.prose-gratin h2 {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
  letter-spacing: -0.01em;
}
.prose-gratin h3 {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
}
.prose-gratin p   { margin: var(--sp-4) 0; }
.prose-gratin ul,
.prose-gratin ol  { margin: var(--sp-4) 0; padding-left: var(--sp-6); }
.prose-gratin li  { margin: var(--sp-2) 0; }
.prose-gratin a   { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.prose-gratin a:hover { color: var(--brand-dim); }
.prose-gratin code {
  background: var(--bg-muted);
  color: var(--text-primary);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.92em;
}
.prose-gratin pre  {
  background: var(--bg-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  overflow-x: auto;
  margin: var(--sp-5) 0;
}
.prose-gratin pre code { background: transparent; padding: 0; }
.prose-gratin table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-5) 0;
}
.prose-gratin th,
.prose-gratin td {
  text-align: left;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-faint);
}
.prose-gratin th { color: var(--text-primary); font-weight: 590; }
.prose-gratin strong { color: var(--text-primary); font-weight: 590; }