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

/* ============================================
   DESIGN SYSTEM — cora CLI
   8px grid · Linear-inspired dark theme
   Spacing reference: Linear, Supabase, Vercel
   ============================================ */

/* ---- CSS Custom Properties (oklch color space) ---- */
:root {
  --background: oklch(0.13 0.01 270);
  --foreground: oklch(0.92 0.01 270);
  --card: oklch(0.17 0.01 270);
  --card-foreground: oklch(0.92 0.01 270);
  --muted: oklch(0.22 0.01 270);
  --muted-foreground: oklch(0.65 0.01 270);
  --accent: oklch(0.65 0.22 270);
  --accent-foreground: oklch(0.98 0 0);
  --success: oklch(0.72 0.19 145);
  --warning: oklch(0.78 0.15 85);
  --destructive: oklch(0.55 0.22 25);
  --border: oklch(0.27 0.01 270);
  --ring: oklch(0.65 0.22 270);
  --shadow-card: 0 1px 3px oklch(0 0 0 / 0.3);
  --shadow-card-hover: 0 4px 12px oklch(0 0 0 / 0.4);

  /* Font families */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- 8px Spacing Scale ---- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
}

/* ---- Tailwind v4 Theme Tokens ---- */
@theme {
  --color-background: oklch(0.13 0.01 270);
  --color-foreground: oklch(0.92 0.01 270);
  --color-card: oklch(0.17 0.01 270);
  --color-card-foreground: oklch(0.92 0.01 270);
  --color-muted: oklch(0.22 0.01 270);
  --color-muted-muted-foreground: oklch(0.65 0.01 270);
  --color-accent: oklch(0.65 0.22 270);
  --color-accent-foreground: oklch(0.98 0 0);
  --color-success: oklch(0.72 0.19 145);
  --color-warning: oklch(0.78 0.15 85);
  --color-destructive: oklch(0.55 0.22 25);
  --color-border: oklch(0.27 0.01 270);
  --color-ring: oklch(0.65 0.22 270);
  --font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* ---- Base Reset ---- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
}

/* ---- Selection ---- */
::selection {
  background: oklch(0.65 0.22 270 / 0.3);
  color: var(--accent-foreground);
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--muted);
}

::-webkit-scrollbar-thumb {
  background: var(--muted-foreground);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: oklch(0.75 0.01 270);
}

/* ---- Animations (motion OK) ---- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes typing-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

  @keyframes subtle-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }

  @keyframes glow {
    0%, 100% {
      box-shadow: 0 0 8px oklch(0.65 0.22 270 / 0.15),
                  0 0 20px oklch(0.65 0.22 270 / 0.05);
    }
    50% {
      box-shadow: 0 0 12px oklch(0.65 0.22 270 / 0.25),
                  0 0 30px oklch(0.65 0.22 270 / 0.1);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out forwards;
  }

  .animate-fade-in {
    animation: fade-in 0.3s ease-out forwards;
  }

  .delay-100 { animation-delay: 100ms; opacity: 0; }
  .delay-200 { animation-delay: 200ms; opacity: 0; }
  .delay-300 { animation-delay: 300ms; opacity: 0; }
  .delay-400 { animation-delay: 400ms; opacity: 0; }
  .delay-500 { animation-delay: 500ms; opacity: 0; }
}

/* ---- Reduced Motion: disable ALL ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transform: none !important;
  }
  html {
    scroll-behavior: auto;
  }
  .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .animate-fade-in-up,
  .animate-fade-in {
    opacity: 1 !important;
    transform: none !important;
  }
  .delay-100, .delay-200, .delay-300, .delay-400, .delay-500 {
    opacity: 1 !important;
  }
}

/* ---- Scroll Reveal ---- */
.scroll-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Glass Card ---- */
.glass-card {
  background: var(--card);
  border-radius: var(--space-4);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  border: 1px solid oklch(0.27 0.01 270 / 0.5);
  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}

.glass-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

/* ---- Terminal ---- */
.terminal {
  background: oklch(0.10 0 0);
  border-radius: var(--space-3);
  border: 1px solid var(--border);
  overflow: hidden;
  font-family: var(--font-mono);
}

.terminal-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid oklch(0.27 0.01 270 / 0.5);
  position: relative;
}

.terminal-dot {
  width: var(--space-3);
  height: var(--space-3);
  border-radius: 9999px;
  flex-shrink: 0;
}

.terminal-dot-red { background: var(--destructive); }
.terminal-dot-yellow { background: var(--warning); }
.terminal-dot-green { background: var(--success); }

.terminal-title {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-foreground);
  margin-left: var(--space-2);
}

.terminal-body {
  padding: var(--space-5);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.625;
  color: var(--foreground);
}

/* ---- Buttons ---- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--accent);
  color: var(--accent-foreground);
  border-radius: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-weight: 500;
  font-size: 14px;
  font-family: var(--font-sans);
  min-height: 44px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-primary:active {
  opacity: 0.8;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--foreground);
  border: 1px solid var(--border);
  border-radius: var(--space-2);
  padding: var(--space-2) var(--space-5);
  font-weight: 500;
  font-size: 14px;
  font-family: var(--font-sans);
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-ghost:hover {
  background: var(--muted);
  border-color: oklch(0.35 0.01 270);
}

.btn-ghost:active {
  background: oklch(0.25 0.01 270);
}

/* ---- Section Container (8px grid based) ---- */
.section {
  max-width: 1152px; /* 72 × 16px */
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);   /* 24px mobile */
  padding-right: var(--space-6);  /* 24px mobile */
}

@media (min-width: 768px) {
  .section {
    padding-left: var(--space-8);  /* 32px tablet */
    padding-right: var(--space-8);
  }
}

@media (min-width: 1280px) {
  .section {
    padding-left: var(--space-10); /* 40px desktop */
    padding-right: var(--space-10);
  }
}

/* Section vertical rhythm — based on Linear (96/128) + Supabase (64/72/96) */
.section-hero {
  padding-top: var(--space-20);   /* 80px mobile */
  padding-bottom: var(--space-16); /* 64px mobile */
}

.section-tall {
  padding-top: var(--space-16);   /* 64px mobile */
  padding-bottom: var(--space-16); /* 64px mobile */
}

.section-compact {
  padding-top: var(--space-12);  /* 48px mobile */
  padding-bottom: var(--space-12); /* 48px mobile */
}

@media (min-width: 768px) {
  .section-hero {
    padding-top: var(--space-24);   /* 96px tablet+ */
    padding-bottom: var(--space-20); /* 80px tablet+ */
  }
  .section-tall {
    padding-top: var(--space-24);   /* 96px tablet+ */
    padding-bottom: var(--space-24); /* 96px tablet+ */
  }
  .section-compact {
    padding-top: var(--space-16);  /* 64px tablet+ */
    padding-bottom: var(--space-16); /* 64px tablet+ */
  }
}

@media (min-width: 1280px) {
  .section-hero {
    padding-top: var(--space-32);   /* 128px desktop */
    padding-bottom: var(--space-24); /* 96px desktop */
  }
  .section-tall {
    padding-top: var(--space-32);   /* 128px desktop */
    padding-bottom: var(--space-32); /* 128px desktop */
  }
}

/* section-tall and section-compact mobile handled by min-width queries above */

/* ---- Badge ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 12px;
  font-weight: 500;
  background: var(--muted);
  color: var(--muted-foreground);
  border-radius: 9999px;
  padding: var(--space-1) var(--space-2);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--success);
}

.accent-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 12px;
  font-weight: 500;
  background: oklch(0.65 0.22 270 / 0.15);
  color: var(--accent);
  border-radius: 9999px;
  padding: var(--space-1) var(--space-2);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* ---- Typing Cursor ---- */
.typing-cursor {
  display: inline-block;
  width: 8px;
  height: 1.1em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: typing-cursor 1s step-end infinite;
}

/* ---- Copy Button ---- */
.copy-btn {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--space-1);
  color: var(--muted-foreground);
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}

.copy-btn:hover {
  background: oklch(0.28 0.01 270);
  color: var(--foreground);
}

.copy-btn.copied {
  color: var(--success);
  border-color: oklch(0.72 0.19 145 / 0.3);
}

/* ---- Compare Table ---- */
.compare-table {
  width: 100%;
  border-collapse: collapse;
}

.compare-table th,
.compare-table td {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid oklch(0.27 0.01 270 / 0.5);
  text-align: left;
  font-size: 14px;
  color: var(--foreground);
}

.compare-table thead th {
  color: var(--muted-foreground);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: var(--space-3);
}

.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table .cora-col {
  background: oklch(0.65 0.22 270 / 0.05);
  font-weight: 500;
}

.compare-table thead .cora-col {
  background: oklch(0.65 0.22 270 / 0.1);
  color: var(--accent);
}

/* Compare table mobile handled by min-width queries in section container */

/* ---- Syntax Highlighting ---- */
.syntax-cmd { color: var(--muted-foreground); }
.syntax-flag { color: oklch(0.75 0.15 240); }
.syntax-string { color: var(--success); }
.syntax-comment { color: var(--muted-foreground); }
.syntax-highlight { color: var(--accent); }
.syntax-success { color: var(--success); }
.syntax-warning { color: var(--warning); }
.syntax-error { color: var(--destructive); }

/* ---- Check/X Symbols ---- */
.symbol-check {
  color: var(--success);
  font-weight: 600;
}

.symbol-cross {
  color: var(--muted-foreground);
  font-weight: 600;
}

/* ---- Connect Line (How It Works) ---- */
.connect-line {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--space-10);
}

.connect-line::after {
  content: '';
  display: block;
  width: 100%;
  max-width: var(--space-10);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    oklch(0.65 0.22 270 / 0.4),
    transparent
  );
}

/* ---- Feature Icon ---- */
.feature-icon {
  width: var(--space-12);
  height: var(--space-12);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--space-3);
  background: oklch(0.65 0.22 270 / 0.1);
}

.feature-icon svg {
  width: var(--space-6);
  height: var(--space-6);
  color: var(--accent);
}

/* ---- Timeline Step ---- */
.timeline-step {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.timeline-number {
  width: var(--space-10);
  height: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: oklch(0.65 0.22 270 / 0.15);
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

/* ---- Docs Layout ---- */
.docs-sidebar {
  position: sticky;
  top: 3.5rem;
  height: calc(100vh - 3.5rem);
  overflow-y: auto;
  width: 16rem;
  flex-shrink: 0;
  padding-top: var(--space-8);
  border-right: 1px solid var(--border);
}

.docs-sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--space-2);
  color: var(--muted-foreground);
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
  min-height: 44px;
}

.docs-sidebar-link:hover {
  background: var(--muted);
  color: var(--foreground);
}

.docs-sidebar-link.active {
  background: oklch(0.65 0.22 270 / 0.1);
  color: var(--accent);
}

.docs-content {
  flex: 1;
  min-width: 0;
  padding: var(--space-8) var(--space-8) var(--space-16);
}

.docs-content h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: var(--space-4);
  color: var(--foreground);
}

.docs-content h2 {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.3;
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  color: var(--foreground);
}

.docs-content h3 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.4;
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  color: var(--foreground);
}

.docs-content p {
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.docs-content ul, .docs-content ol {
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  line-height: 1.7;
  padding-left: var(--space-6);
  margin-bottom: var(--space-4);
}

.docs-content li {
  margin-bottom: var(--space-2);
}

.docs-content code:not(pre code) {
  background: var(--muted);
  color: var(--accent);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
}

.docs-content pre {
  background: oklch(0.10 0 0);
  border: 1px solid var(--border);
  border-radius: var(--space-3);
  padding: var(--space-5);
  overflow-x: auto;
  margin-bottom: var(--space-6);
}

.docs-content pre code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.625;
  color: var(--foreground);
}

.docs-content a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.docs-content a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* ---- Docs Section ---- */
.docs-section {
  margin-top: var(--space-12);
}

.docs-section h2 {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.3;
  margin-bottom: var(--space-3);
  color: var(--foreground);
}

.docs-section p {
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

/* ---- Docs Card ---- */
.docs-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--card);
  border-radius: var(--space-3);
  border: 1px solid var(--border);
}

.docs-card-number {
  width: var(--space-8);
  height: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: oklch(0.65 0.22 270 / 0.1);
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}

.docs-card-number.primary {
  background: oklch(0.65 0.22 270 / 0.15);
  color: var(--accent);
}

.docs-card-number.muted {
  background: var(--muted);
  color: var(--muted-foreground);
}

/* ---- Docs Terminal ---- */
.docs-terminal {
  background: oklch(0.10 0 0);
  border-radius: var(--space-3);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid oklch(0.27 0.01 270 / 0.5);
  background: oklch(0.10 0 0);
}

.terminal-bar span {
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 9999px;
}

.terminal-bar .terminal-dot-red { background: var(--destructive); }
.terminal-bar .terminal-dot-yellow { background: var(--warning); }
.terminal-bar .terminal-dot-green { background: var(--success); }

/* ---- Docs utility classes ---- */
.docs-term-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.docs-term-item {
  display: flex;
  gap: var(--space-2);
  font-size: 14px;
  color: var(--muted-foreground);
}

.docs-term-key {
  color: var(--accent);
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.docs-term-value {
  color: var(--muted-foreground);
  font-size: 14px;
}

.docs-link-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.docs-link-list a {
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
}

.docs-link-list a:hover {
  text-decoration: underline;
}

/* ---- Mobile docs nav ---- */
.mobile-docs-nav {
  display: none;
  position: sticky;
  top: 3.5rem;
  z-index: 20;
  background: var(--background);
  border-bottom: 1px solid var(--border);
  padding: var(--space-2) var(--space-4);
  overflow-x: auto;
  white-space: nowrap;
}

.mobile-docs-nav a {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--space-2);
  color: var(--muted-foreground);
  font-size: 14px;
  text-decoration: none;
  min-height: 44px;
  line-height: 1.25;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mobile-docs-nav a:hover {
  background: var(--muted);
  color: var(--foreground);
}

.mobile-docs-nav a.active {
  background: oklch(0.65 0.22 270 / 0.1);
  color: var(--accent);
}

@media (min-width: 768px) {
  .mobile-docs-nav {
    display: none;
  }
}

/* ---- Mobile: collapse docs sidebar ---- */
@media (max-width: 767px) {
  .docs-sidebar {
    display: none;
  }
  .docs-content {
    padding: var(--space-6) var(--space-4) var(--space-12);
  }
}
