/* ============================================================
   Velvet Dots — Colors & Type
   Single source of truth for tokens. Import this in any HTML:
   <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

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

:root {
  /* -------- Color: surfaces -------- */
  --bg-1: #0A0A0F;          /* primary page bg */
  --bg-2: #0D1117;          /* card / panel bg */
  --bg-3: #15151F;          /* elevated: modal, dropdown, hover */
  --bg-4: #1C1C28;          /* highest elevation */

  /* -------- Color: foreground -------- */
  --fg-1: #F8F8FF;          /* primary text */
  --fg-2: #94A3B8;          /* secondary text */
  --fg-3: #64748B;          /* muted: captions, placeholders */
  --fg-4: #475569;          /* very muted */

  /* -------- Color: accent -------- */
  --accent-1: #7C3AED;      /* violet primary */
  --accent-2: #A855F7;      /* violet light (hover, gradient pair) */
  --accent-1-12: rgba(124, 58, 237, 0.12);
  --accent-1-24: rgba(124, 58, 237, 0.24);
  --accent-1-40: rgba(124, 58, 237, 0.40);

  /* -------- Color: borders -------- */
  --border-1: #1E1B4B;      /* deep indigo - primary border */
  --border-2: #27272A;      /* neutral subtle */
  --border-soft: rgba(255, 255, 255, 0.06);
  --border-violet: rgba(124, 58, 237, 0.40);

  /* -------- Color: semantic -------- */
  --success: #10B981;
  --success-bg: rgba(16, 185, 129, 0.12);
  --warning: #F59E0B;
  --warning-bg: rgba(245, 158, 11, 0.12);
  --danger: #EF4444;
  --danger-bg: rgba(239, 68, 68, 0.12);
  --info: var(--accent-2);

  /* -------- Gradients -------- */
  --gradient-violet: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%);
  --gradient-violet-soft: linear-gradient(135deg, rgba(124,58,237,0.12) 0%, rgba(168,85,247,0.04) 100%);
  --gradient-bg-radial: radial-gradient(60% 50% at 50% 0%, rgba(124,58,237,0.18) 0%, rgba(10,10,15,0) 70%);

  /* -------- Glass -------- */
  --glass-bg: rgba(13, 17, 23, 0.6);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 20px;

  /* -------- Type: family -------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* -------- Type: weight -------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* -------- Type: size -------- */
  --fs-display-xl: 80px;
  --fs-display: 64px;
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-h5: 18px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-micro: 11px;

  /* -------- Type: line-height -------- */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-loose: 1.6;

  /* -------- Type: tracking -------- */
  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --tracking-eyebrow: 0.08em;

  /* -------- Spacing (4px base) -------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* -------- Radius -------- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* -------- Shadow -------- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 0 1px var(--accent-1), 0 8px 24px rgba(124, 58, 237, 0.4);
  --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);

  /* -------- Motion -------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;

  /* -------- Layout -------- */
  --max-width: 1280px;
  --nav-height: 64px;
}

/* ============================================================
   Semantic element styles — drop-in defaults
   ============================================================ */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-1);
  margin: 0;
}

h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-1);
  margin: 0;
}

h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-1);
  margin: 0;
}

h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

h5, .h5 {
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  margin: 0;
}

.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}

.display-xl {
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}

.eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-2);
}

.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--fg-2); }
.body    { font-size: var(--fs-body); line-height: var(--lh-loose); color: var(--fg-2); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-2); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-3); }

.label {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
}

a, .link {
  color: var(--fg-1);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover, .link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

code, .code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--fg-1);
  background: var(--bg-3);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
}

::selection {
  background: var(--accent-1-40);
  color: var(--fg-1);
}

::placeholder { color: var(--fg-3); }

:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Gradient text utility — used sparingly for hero words */
.gradient-text {
  background: var(--gradient-violet);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}