/* =============================================================================
   VEREN DESIGN SYSTEM — colors_and_type.css
   Canonical source of truth for color, type, spacing, and motion tokens.
   Locked to Logo v7. Aman-grade restraint.

   Visual posture: quiet luxury. Bone + ink only. No accent color. Marcellus
   for the wordmark and display serifs; Cormorant Garamond for editorial
   prose; Inter for tracked sans labels and UI.

   Every other CSS file in the system should reference variables defined
   here. If a value isn't tokenized, it shouldn't exist.
   ========================================================================== */

/* --- Webfonts (Google Fonts) --------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Marcellus&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* =====================================================================
     1. COLOR — RAW PALETTE
     Bone + ink, plus a single deeper tone for hover/pressed surfaces.
     No copper, no metallic, no accent. Restraint is the system.
     ===================================================================== */
  --veren-bone:       #F4EFE7; /* primary surface */
  --veren-bone-deep:  #ECE6DA; /* hover / nested surface */
  --veren-bone-hair:  #E2DBCC; /* divider / inset border */
  --veren-ink:        #1A1A1A; /* primary ink */
  --veren-ink-warm:   #2A2520; /* slightly warmer alternate ink */
  --veren-ink-soft:   #3D3933; /* secondary body */
  --veren-ink-mute:   rgba(26, 26, 26, 0.55); /* captions, muted text */

  /* =====================================================================
     2. COLOR — SEMANTIC (use these in product code)
     ===================================================================== */
  --bg-page:          var(--veren-bone);
  --bg-surface:       var(--veren-bone);
  --bg-surface-hover: var(--veren-bone-deep);
  --bg-thesis:        var(--veren-ink);
  --bg-inverse:       var(--veren-ink);

  --fg-primary:       var(--veren-ink);
  --fg-body:          var(--veren-ink-soft);
  --fg-muted:         var(--veren-ink-mute);
  --fg-inverse:       var(--veren-bone);
  --fg-on-ink-muted:  rgba(244, 239, 231, 0.55);

  --border-hairline:  rgba(26, 26, 26, 0.22);
  --border-strong:    rgba(26, 26, 26, 0.35);
  --divider:          var(--border-hairline);
  --hair-on-ink:      rgba(244, 239, 231, 0.26);

  --focus-ring:       rgba(26, 26, 26, 0.40);

  /* =====================================================================
     3. TYPOGRAPHY — FONT FAMILIES
     Wordmark: Marcellus (monoline serif, mirror-twin V/N geometry).
     Editorial prose / slide display: Cormorant Garamond Light.
     UI / labels / sans: Inter Light.
     Mono: JetBrains for citations and code.
     ===================================================================== */
  --font-wordmark:    "Marcellus", "Trajan Pro", "Optima", Georgia, serif;
  --font-serif:       "Cormorant Garamond", "GT Sectra", "Saol Display", Georgia, serif;
  --font-sans:        "Inter", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:        "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* =====================================================================
     4. TYPOGRAPHY — TYPE SCALE
     Generous line-height. Serif prose runs in Cormorant Light at large
     sizes — the slide display is the system's strongest editorial voice.
     ===================================================================== */
  /* Display & headings (Cormorant 300) */
  --type-display-xl:  300 64px/1.20 var(--font-serif);
  --type-display-lg:  300 52px/1.22 var(--font-serif);
  --type-display-md:  300 44px/1.30 var(--font-serif);
  --type-h1:          300 36px/1.32 var(--font-serif);
  --type-h2:          400 28px/1.32 var(--font-serif);
  --type-h3:          400 22px/1.36 var(--font-serif);

  /* Editorial italic (Cormorant 300 italic) */
  --type-italic-lg:   italic 300 28px/1.40 var(--font-serif);
  --type-italic-md:   italic 300 18px/1.50 var(--font-serif);

  /* Body & UI (Inter Light/Regular) */
  --type-body-lg:     400 17px/1.65 var(--font-sans);
  --type-body:        400 15px/1.60 var(--font-sans);
  --type-body-sm:     400 13px/1.55 var(--font-sans);
  --type-caption:     400 12px/1.50 var(--font-sans);

  /* Tracked caps — descriptor and tagline lines */
  --type-tracked-md:  400 11px/1.0 var(--font-sans);
  --type-tracked-sm:  400 9.5px/1.0 var(--font-sans);
  --tracked-letter:   0.28em;
  --tracked-letter-tight: 0.22em;

  /* Mono (citations, fee tables) */
  --type-mono:        400 12px/1.5 var(--font-mono);

  /* =====================================================================
     5. SPACING — 4pt rhythm, with editorial generosity at the top of the
     scale. Quiet luxury needs air.
     ===================================================================== */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   56px;
  --space-10:  80px;
  --space-11: 112px;
  --space-12: 160px;

  /* =====================================================================
     6. RADII — restrained. The system is mostly square.
     ===================================================================== */
  --radius-none:  0;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    8px;
  --radius-xl:   12px;
  --radius-pill: 999px;

  /* =====================================================================
     7. SHADOWS — very low-key. Most surfaces don't need any.
     ===================================================================== */
  --shadow-none:   none;
  --shadow-xs:     0 1px 0 0 rgba(26, 26, 26, 0.04);
  --shadow-sm:     0 1px 2px rgba(26, 26, 26, 0.06);
  --shadow-md:     0 4px 14px rgba(26, 26, 26, 0.08);
  --shadow-lg:     0 18px 36px rgba(26, 26, 26, 0.10);

  /* =====================================================================
     8. MOTION — slow, considered. No bounces.
     ===================================================================== */
  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-entrance:   cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:       cubic-bezier(0.4, 0, 1, 1);
  --duration-fast:   140ms;
  --duration-base:   240ms;
  --duration-slow:   400ms;

  /* =====================================================================
     9. LAYOUT — narrow reading widths; the system breathes.
     ===================================================================== */
  --content-max:    1180px;
  --reading-max:    620px;
  --gutter:         var(--space-8);
}

/* =============================================================================
   BASE
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-body);
  font: var(--type-body);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--fg-primary);
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 300;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
h1 { font: var(--type-display-md); }
h2 { font: var(--type-h1); }
h3 { font: var(--type-h2); }
h4 { font: var(--type-h3); }

p {
  margin: 0;
  text-wrap: pretty;
  max-width: var(--reading-max);
}

a {
  color: var(--fg-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-hairline);
  transition: border-color var(--duration-base) var(--ease-standard);
}
a:hover { border-bottom-color: var(--fg-primary); }

code, pre, .mono {
  font: var(--type-mono);
  color: var(--fg-primary);
}

::selection { background: rgba(26, 26, 26, 0.18); }

/* =============================================================================
   BRAND PRIMITIVES — the wordmark and descriptor as system utilities.
   Use these classes anywhere the brand needs to appear; do not redefine
   the wordmark per-context.
   ========================================================================== */

/* The wordmark. Marcellus 400, tracked caps. Size via .veren-wordmark--N. */
.veren-wordmark {
  font-family: var(--font-wordmark);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  color: var(--fg-primary);
  display: inline-block;
  letter-spacing: 0.38em;
  font-size: 32px;
}
.veren-wordmark--inverse { color: var(--fg-inverse); }
.veren-wordmark--xxl  { font-size: 64px; letter-spacing: 0.42em; }
.veren-wordmark--xl   { font-size: 44px; letter-spacing: 0.38em; }
.veren-wordmark--lg   { font-size: 32px; letter-spacing: 0.36em; }
.veren-wordmark--md   { font-size: 22px; letter-spacing: 0.32em; }
.veren-wordmark--sm   { font-size: 16px; letter-spacing: 0.28em; }
.veren-wordmark--xs   { font-size: 12px; letter-spacing: 0.24em; }
.veren-wordmark--tiny { font-size: 10px; letter-spacing: 0.20em; }

/* Descriptor / tagline line. Inter, tracked caps, muted. */
.veren-descriptor {
  font: var(--type-tracked-md);
  font-weight: 400;
  letter-spacing: var(--tracked-letter);
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}
.veren-descriptor--sm { font: var(--type-tracked-sm); letter-spacing: var(--tracked-letter-tight); }
.veren-descriptor--inverse { color: var(--fg-on-ink-muted); }

/* Lockups */
.veren-lockup-h { /* primary horizontal */
  display: inline-flex;
  align-items: center;
  gap: 24px;
}
.veren-lockup-h__divider {
  width: 1px;
  height: 28px;
  background: var(--border-hairline);
  flex-shrink: 0;
}
.veren-lockup-v { /* stacked */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* =============================================================================
   UTILITY CLASSES
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  font: var(--type-tracked-sm);
  letter-spacing: var(--tracked-letter);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.subhead {
  font: var(--type-italic-md);
  color: var(--fg-body);
  max-width: 60ch;
  text-wrap: pretty;
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-8);
}

.divider {
  height: 1px;
  background: var(--border-hairline);
  border: 0;
}