/* ============================================================
   theme-cursor.css — Cursor-inspired UI/UX skin
   Applied site-wide. Loaded AFTER each page's inline <style>,
   so it wins by source order (variables) / !important (elements).
   Design language: near-black canvas, crisp near-white type,
   tight bold headings, thin translucent borders, soft depth.
   ============================================================ */

:root {
  /* Cursor palette */
  --ct-canvas:    #0A0A0B;
  --ct-surface:   #141416;
  --ct-surface-2: #1C1C20;
  --ct-surface-3: #26262B;
  --ct-text:      #F5F5F7;
  --ct-text-2:    #9B9BA4;
  --ct-text-3:    #6B6B74;
  --ct-border:    rgba(255,255,255,0.09);
  --ct-border-2:  rgba(255,255,255,0.06);
  --ct-accent:    #FFFFFF;
  --ct-link:      #8AB4FF;

  /* ---- Remap the AWS/Spark/ML/etc. variable family ---- */
  --bg:  #0A0A0B;  --bg2: #141416; --bg3: #1C1C20; --bg4: #26262B;
  --border:  rgba(255,255,255,0.09);
  --border2: rgba(255,255,255,0.06);
  --text:  #F5F5F7; --text2: #9B9BA4; --text3: #6B6B74;
  --orange:  #FFFFFF; --orange2: #F0F0F2;
  --orange-dim: rgba(255,255,255,0.08);

  /* ---- Remap the Hub (index.html) variable family ---- */
  --bg-1: #0A0A0B; --bg-2: #141416; --bg-3: #1C1C20; --bg-4: #26262B;
  --yellow: #FFFFFF; --yellow-hover: #FFFFFF;
  --yellow-dim:  rgba(255,255,255,0.08);
  --yellow-dim2: rgba(255,255,255,0.04);
  --text-1: #F5F5F7; --text-2: #9B9BA4; --text-3: #6B6B74;
  --border-card: rgba(255,255,255,0.06);

  /* keep a refined link blue where pages use --blue */
  --blue: #8AB4FF;
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--ct-canvas) !important;
  background-image:
    radial-gradient(900px 480px at 50% -8%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(700px 420px at 100% 0%, rgba(138,180,255,0.05), transparent 55%) !important;
  background-attachment: fixed;
  color: var(--ct-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.011em;
}

/* Tight, confident headings — Cursor signature */
h1, h2, h3, h4,
.hero h1, .hero-title, .section-title, .page-title {
  letter-spacing: -0.022em !important;
  font-weight: 700 !important;
}
.hero h1, .hero-title { letter-spacing: -0.035em !important; font-weight: 800 !important; }

/* Softer, rounder surfaces with hairline borders */
.section, .card, .feature-card, .col-card, .topic-card,
.tip, .warn, .note, .info, .data, pre, .code-block, .drawio-wrap {
  border-radius: 14px !important;
}
.card, .feature-card, .col-card, .topic-card {
  border: 1px solid var(--ct-border) !important;
  background: rgba(255,255,255,0.02) !important;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.card:hover, .feature-card:hover, .col-card:hover, .topic-card:hover {
  border-color: rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.04) !important;
  transform: translateY(-2px);
}

/* Code surfaces */
pre, code, .code-block {
  border-radius: 12px;
}

/* Links: subtle, underline on hover (Cursor restraint) */
a { transition: color .15s ease, opacity .15s ease; }

/* Pill primary buttons (white fill / dark text) */
.btn-primary, .button-primary, .cta-primary, .download-btn, .btn.primary {
  background: var(--ct-accent) !important;
  color: #0A0A0B !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}

/* Custom scrollbar */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); background-clip: padding-box; }

/* Selection */
::selection { background: rgba(138,180,255,0.30); color: #fff; }