/* ============================================
   CLAVITOR DESIGN SYSTEM — v0.1
   Violet #7C3AED + Figtree + JetBrains Mono
   ============================================ */

:root {
  /* Brand */
  --brand-black: #0A0A0A;
  --brand-accent: #7C3AED;
  --brand-accent-light: #8B5CF6;
  --brand-accent-dark: #6D28D9;

  /* Core Colors */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F5F5;
  --bg-tertiary: #E5E5E5;
  --bg-inverse: #0A0A0A;
  
  --text-primary: #171717;
  --text-secondary: #525252;
  --text-tertiary: #737373;
  --text-inverse: #FFFFFF;
  
  --border-default: #E5E5E5;
  --border-strong: #D4D4D4;

  /* Semantic */
  --success: #16A34A;
  --warning: #CA8A04;
  --error: #DC2626;

  /* Typography */
  --font-family: "Figtree", system-ui, sans-serif;
  
  /* Wordmark */
  --wordmark-font: "Figtree", system-ui, sans-serif;
  --wordmark-weight: 700;
  --wordmark-spacing: 0.25em;
  
  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Motion */
  --duration-fast: 100ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

/* ============================================
   LAYOUT
   ============================================ */

.container { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
.section { margin-bottom: 64px; }
.max-width { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* Grid */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-2-equal { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; overflow: visible; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-3-equal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.grid-4-equal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }

/* Flex */
.flex-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.flex-col { display: flex; flex-direction: column; gap: 12px; }

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1 { font-size: 72px; font-weight: 700; letter-spacing: -0.022em; line-height: 1; }
h2 { font-size: 56px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.1; }
h3 { font-size: 40px; font-weight: 600; letter-spacing: -0.019em; }
h4 { font-size: 28px; font-weight: 500; }

.text-sm { font-size: 16px; }
.text-xs { font-size: 14px; }
.text-lg { font-size: 18px; }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-inverse { color: var(--text-inverse); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-semibold { font-weight: 600; }
.font-mono { font-family: "JetBrains Mono", monospace; }

/* Wordmark */
.wordmark { font-size: 18px; font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-spacing); text-transform: uppercase; }
.wordmark-lg { font-size: 32px; font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-spacing); text-transform: uppercase; color: var(--brand-accent); }

/* ============================================
   BRAND ELEMENTS
   ============================================ */

.brand-block { display: flex; align-items: center; gap: 16px; margin: 32px 0; }
.black-square { width: 64px; height: 64px; background: var(--brand-black); }
.black-square-sm { width: 48px; height: 48px; background: var(--brand-black); }

/* Logo Lockup — The Trinity */
.logo-lockup { display: inline-flex; gap: 20px; align-items: stretch; }
.logo-lockup-square { width: 80px; height: 80px; background: var(--brand-black); flex-shrink: 0; }
.logo-lockup-text { display: flex; flex-direction: column; justify-content: space-between; height: 80px; }
.logo-lockup-wordmark { font-family: var(--font-family); font-size: 56px; font-weight: var(--wordmark-weight); letter-spacing: var(--wordmark-spacing); text-transform: uppercase; color: var(--brand-accent); line-height: 1; }
.logo-lockup-tagline { font-size: 16px; font-weight: 500; color: var(--text-tertiary); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; margin-bottom: -2px; }

/* ============================================
   NAVIGATION (New)
   ============================================ */

.nav { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; border-bottom: 1px solid var(--border-default); }
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: color 100ms ease; }
.nav-links a:hover { color: var(--text-primary); }

/* ============================================
   SECTION PATTERNS (vault1984 style)
   ============================================ */

.section-vault { padding: 80px 0; }
.section-vault-dark { padding: 80px 0; background: var(--bg-inverse); color: var(--text-inverse); }

/* ============================================
   HERO (New)
   ============================================ */

.hero { padding: 80px 0; }
.hero-content { max-width: 600px; }

/* ============================================
   COMPONENTS
   ============================================ */

/* Pills */
.pill-row { display: flex; flex-wrap: wrap; gap: 12px; overflow: visible; }
.pill { 
  display: inline-flex; align-items: center; 
  height: 32px; padding: 0 16px;
  white-space: nowrap;
  background: var(--bg-secondary); 
  border: 1px solid var(--border-default);
  border-radius: 9999px; 
  font-size: 14px; font-weight: 500;
}
.pill-accent { background: var(--brand-accent); color: white; border-color: var(--brand-accent); }

/* Feature Cards */
.feature-card { background: var(--bg-secondary); border-radius: 12px; padding: 32px; }
.feature-card-dark { background: var(--bg-inverse); color: var(--text-inverse); border-radius: 12px; padding: 32px; }

/* Stats */
.stat-number { font-size: 72px; font-weight: 700; color: var(--brand-accent); line-height: 1; margin-bottom: 8px; }
.stat-label { font-size: 14px; color: var(--text-secondary); }

/* Section Title */
.section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--border-default); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 16px; font-weight: 500;
  text-decoration: none; border: none; border-radius: 8px;
  cursor: pointer; transition: all 100ms ease;
  height: 40px; padding: 0 16px;
}
.btn:focus { outline: none; box-shadow: 0 0 0 2px white, 0 0 0 4px var(--brand-accent); }
.btn-primary { background: var(--brand-black); color: white; }
.btn-primary:hover { background: #262626; }
.btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); }
.btn-secondary:hover { background: var(--bg-secondary); }
.btn-accent { background: var(--brand-accent); color: white; }
.btn-accent:hover { background: var(--brand-accent-light); }
.btn-ghost { background: transparent; color: var(--text-primary); }
.btn-ghost:hover { background: var(--bg-secondary); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 14px; }
.btn-lg { height: 48px; padding: 0 20px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Inputs */
.input-group { display: flex; flex-direction: column; gap: 8px; }
.input-label { font-size: 14px; font-weight: 500; color: var(--text-primary); }
.input {
  height: 40px; padding: 0 12px;
  font-family: inherit; font-size: 16px;
  color: var(--text-primary); background: var(--bg-primary);
  border: 1px solid var(--border-strong); border-radius: 8px;
  transition: all 100ms ease;
}
.input:hover { border-color: var(--text-tertiary); }
.input:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1); }
.input::placeholder { color: var(--text-tertiary); }
.input-error { border-color: var(--error); }
.input-hint { font-size: 12px; color: var(--text-tertiary); }
.input-error-text { font-size: 12px; color: var(--error); }

/* Cards */
.card { background: var(--bg-secondary); border-radius: 12px; padding: 24px; }
.card-flat { background: var(--bg-secondary); border: 1px solid var(--border-default); }
.card-header { margin-bottom: 16px; }
.card-title { font-size: 18px; font-weight: 600; }

/* Badges */
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; font-size: 12px; font-weight: 500; border-radius: 8px; }
.badge-default { background: var(--bg-tertiary); color: var(--text-secondary); }
.badge-primary { background: var(--brand-black); color: white; }
.badge-accent { background: var(--brand-accent); color: white; }
.badge-success { background: rgba(22, 163, 74, 0.1); color: var(--success); }
.badge-warning { background: rgba(202, 138, 4, 0.1); color: var(--warning); }
.badge-error { background: rgba(220, 38, 38, 0.1); color: var(--error); }

/* Alerts */
.alert { display: flex; gap: 12px; padding: 16px; border-radius: 12px; }
.alert-accent { background: rgba(124, 58, 237, 0.05); }
.alert-success { background: rgba(22, 163, 74, 0.05); }
.alert-error { background: rgba(220, 38, 38, 0.05); }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); background: var(--bg-secondary); border-bottom: 1px solid var(--border-default); }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--border-default); }
.table tr:hover td { background: var(--bg-secondary); }

/* Code */
.code-block { background: var(--bg-inverse); color: var(--text-inverse); font-family: "JetBrains Mono", monospace; font-size: 14px; line-height: 1.6; padding: 16px; border-radius: 12px; overflow-x: auto; }

/* Colors utility */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
.color-swatch { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-default); }
.color-block { height: 80px; }
.color-label { padding: 12px; font-size: 12px; background: var(--bg-primary); }
.color-label code { font-family: "JetBrains Mono", monospace; background: var(--bg-secondary); padding: 2px 4px; border-radius: 4px; }

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Spacing (margin-top) */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mt-10 { margin-top: 40px; }
.mt-12 { margin-top: 48px; }
.mt-16 { margin-top: 64px; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mb-10 { margin-bottom: 40px; }
.mb-12 { margin-bottom: 48px; }
.mb-16 { margin-bottom: 64px; }

/* Auto margins */
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* Flex/alignment */
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }

/* Border utilities */
.border-top { border-top: 1px solid var(--border-default); }
.border-bottom { border-bottom: 1px solid var(--border-default); }
.border-left { border-left: 1px solid var(--border-default); }
.border-right { border-right: 1px solid var(--border-default); }

/* Width/height */
.w-full { width: 100%; }
.h-full { height: 100%; }

/* Max-width */
.max-w-prose { max-width: 65ch; }
.max-w-md { max-width: 600px; }

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (max-width: 768px) {
  h1 { font-size: 48px; }
  h2 { font-size: 36px; }
  h3 { font-size: 28px; }
  
  .grid-2-equal { grid-template-columns: 1fr; gap: 32px; }
  .grid-3-equal { grid-template-columns: 1fr; gap: 24px; }
  .grid-4-equal { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  
  .nav { flex-direction: column; gap: 16px; align-items: flex-start; }
  .nav-links { flex-wrap: wrap; gap: 16px; }
  
  .hero { padding: 48px 0; }
  .section-vault { padding: 48px 0; }
}

@media (max-width: 480px) {
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  
  .grid-4-equal { grid-template-columns: 1fr; }
  .pill-row { gap: 8px; }
  .pill { padding: 0 12px; font-size: 13px; }
  
  .btn-lg { height: 44px; padding: 0 16px; }
}