/* =========================================================================
   Vertix Design System — Foundations
   Source of truth: Vertix Brand Foundation v1.1 (April 2026)
   ========================================================================= */

/* ---------- Webfonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lato:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* =====================================================================
     COLOR — Brand
     ===================================================================== */
  --vx-forest:        #2C5F2E;   /* Deep Forest — primary brand */
  --vx-forest-deep:   #1F4621;   /* hover / pressed */
  --vx-forest-soft:   #4A8A4D;   /* tints, subtle accents */

  --vx-terracotta:    #D4956A;   /* Warm Terracotta — secondary */
  --vx-terracotta-deep:#B97A4E;
  --vx-terracotta-soft:#E8C2A6;

  --vx-rust:          #C85A3A;   /* Rich Rust — CTAs, urgent moments */
  --vx-rust-deep:     #A8472B;
  --vx-rust-soft:     #E89A85;

  /* =====================================================================
     COLOR — Neutrals (warm, never stark)
     ===================================================================== */
  --vx-cream:         #F5F3F0;   /* Soft Cream — cards, containers */
  --vx-off-white:     #FAFAF8;   /* Page backgrounds */
  --vx-warm-gray:     #E8E5E0;   /* Borders, dividers */
  --vx-warm-gray-2:   #D6D2CB;   /* Stronger borders */
  --vx-stone:         #8A857C;   /* Muted text */
  --vx-graphite:      #4A4844;   /* Secondary text */
  --vx-deep-gray:     #2C2C2C;   /* Body — never pure black */
  --vx-ink:           #1A1A1A;   /* Reserved: very high-emphasis only */

  /* =====================================================================
     COLOR — Semantic
     ===================================================================== */
  --vx-bg:            var(--vx-off-white);
  --vx-bg-muted:      var(--vx-cream);
  --vx-bg-inverse:    var(--vx-forest);

  --vx-fg:            var(--vx-deep-gray);     /* primary text */
  --vx-fg-muted:      var(--vx-graphite);      /* secondary text */
  --vx-fg-subtle:     var(--vx-stone);         /* tertiary text, captions */
  --vx-fg-on-dark:    var(--vx-cream);
  --vx-fg-on-accent:  #FFFFFF;

  --vx-border:        var(--vx-warm-gray);
  --vx-border-strong: var(--vx-warm-gray-2);
  --vx-divider:       var(--vx-warm-gray);

  --vx-link:          var(--vx-forest);
  --vx-link-hover:    var(--vx-forest-deep);

  --vx-accent:        var(--vx-terracotta);
  --vx-cta:           var(--vx-rust);
  --vx-cta-hover:     var(--vx-rust-deep);

  /* Status — used sparingly, kept warm */
  --vx-success:       #4A8A4D;
  --vx-warning:       #C68A2E;
  --vx-danger:        #B14A2C;
  --vx-info:          #3F6E72;

  /* =====================================================================
     TYPE
     ===================================================================== */
  --vx-font-heading:  'Inter', 'Calibri', system-ui, -apple-system, sans-serif;
  --vx-font-body:     'Lato', 'Calibri', system-ui, -apple-system, sans-serif;
  --vx-font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --vx-text-xs:       12px;
  --vx-text-sm:       14px;
  --vx-text-base:     16px;
  --vx-text-md:       18px;
  --vx-text-lg:       20px;
  --vx-text-xl:       24px;
  --vx-text-2xl:      30px;
  --vx-text-3xl:      38px;
  --vx-text-4xl:      48px;
  --vx-text-5xl:      64px;
  --vx-text-6xl:      80px;

  --vx-leading-tight: 1.15;
  --vx-leading-snug:  1.3;
  --vx-leading-normal:1.55;
  --vx-leading-loose: 1.75;

  --vx-tracking-tight: -0.02em;
  --vx-tracking-snug:  -0.01em;
  --vx-tracking-normal: 0;
  --vx-tracking-wide:  0.04em;
  --vx-tracking-widest: 0.14em;

  /* =====================================================================
     SPACING — 4pt grid
     ===================================================================== */
  --vx-space-0: 0;
  --vx-space-1: 4px;
  --vx-space-2: 8px;
  --vx-space-3: 12px;
  --vx-space-4: 16px;
  --vx-space-5: 24px;
  --vx-space-6: 32px;
  --vx-space-7: 48px;
  --vx-space-8: 64px;
  --vx-space-9: 96px;
  --vx-space-10: 128px;

  /* =====================================================================
     RADII — soft, never pill-y outside of CTAs
     ===================================================================== */
  --vx-radius-xs: 2px;
  --vx-radius-sm: 4px;
  --vx-radius-md: 8px;
  --vx-radius-lg: 12px;
  --vx-radius-xl: 18px;
  --vx-radius-2xl: 24px;
  --vx-radius-pill: 999px;

  /* =====================================================================
     SHADOWS — warm, low-spread, never hard
     ===================================================================== */
  --vx-shadow-xs: 0 1px 2px rgba(44, 44, 44, 0.05);
  --vx-shadow-sm: 0 2px 6px rgba(44, 44, 44, 0.06), 0 1px 2px rgba(44, 44, 44, 0.04);
  --vx-shadow-md: 0 6px 16px rgba(44, 44, 44, 0.08), 0 2px 4px rgba(44, 44, 44, 0.04);
  --vx-shadow-lg: 0 14px 36px rgba(44, 44, 44, 0.10), 0 4px 8px rgba(44, 44, 44, 0.05);
  --vx-shadow-xl: 0 28px 64px rgba(44, 44, 44, 0.14);

  /* Inner shadows for inputs / sunken surfaces */
  --vx-shadow-inset: inset 0 1px 2px rgba(44, 44, 44, 0.06);

  /* Forest-tinted shadow for forest-on-cream cards */
  --vx-shadow-forest: 0 12px 32px rgba(44, 95, 46, 0.18);

  /* =====================================================================
     MOTION
     ===================================================================== */
  --vx-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --vx-ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --vx-ease-in:       cubic-bezier(0.4, 0.0, 1, 1);
  --vx-ease-emphasis: cubic-bezier(0.2, 0.7, 0.2, 1);

  --vx-dur-instant: 80ms;
  --vx-dur-fast:    160ms;
  --vx-dur-base:    240ms;
  --vx-dur-slow:    400ms;

  /* =====================================================================
     LAYOUT
     ===================================================================== */
  --vx-container:     1200px;
  --vx-container-narrow: 880px;
  --vx-gutter:        24px;
}

/* =========================================================================
   BASE — semantic element styling
   Apply by including this file at the document root.
   ========================================================================= */

html, body {
  background: var(--vx-bg);
  color: var(--vx-fg);
  font-family: var(--vx-font-body);
  font-size: var(--vx-text-base);
  line-height: var(--vx-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--vx-font-heading);
  color: var(--vx-deep-gray);
  font-weight: 600;
  line-height: var(--vx-leading-tight);
  letter-spacing: var(--vx-tracking-snug);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--vx-text-5xl); font-weight: 700; letter-spacing: var(--vx-tracking-tight); }
h2 { font-size: var(--vx-text-3xl); }
h3 { font-size: var(--vx-text-2xl); font-weight: 600; }
h4 { font-size: var(--vx-text-xl); font-weight: 600; }
h5 { font-size: var(--vx-text-lg); font-weight: 600; }
h6 {
  font-size: var(--vx-text-xs);
  font-weight: 700;
  letter-spacing: var(--vx-tracking-widest);
  text-transform: uppercase;
  color: var(--vx-fg-subtle);
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
  max-width: 70ch;
}

a {
  color: var(--vx-link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--vx-forest) 30%, transparent);
  transition: color var(--vx-dur-fast) var(--vx-ease-standard),
              border-color var(--vx-dur-fast) var(--vx-ease-standard);
}
a:hover {
  color: var(--vx-link-hover);
  border-bottom-color: var(--vx-forest);
}

small { font-size: var(--vx-text-sm); color: var(--vx-fg-muted); }

code, pre, kbd, samp {
  font-family: var(--vx-font-mono);
  font-size: 0.92em;
}
code {
  background: var(--vx-cream);
  border: 1px solid var(--vx-border);
  padding: 0.12em 0.4em;
  border-radius: var(--vx-radius-sm);
  color: var(--vx-graphite);
}

hr {
  border: 0;
  border-top: 1px solid var(--vx-divider);
  margin: var(--vx-space-6) 0;
}

::selection {
  background: var(--vx-terracotta-soft);
  color: var(--vx-deep-gray);
}

/* =========================================================================
   UTILITY — eyebrow, lede, etc. used across the system
   ========================================================================= */
.vx-eyebrow {
  font-family: var(--vx-font-heading);
  font-size: var(--vx-text-xs);
  font-weight: 700;
  letter-spacing: var(--vx-tracking-widest);
  text-transform: uppercase;
  color: var(--vx-terracotta-deep);
}
.vx-lede {
  font-family: var(--vx-font-body);
  font-size: var(--vx-text-lg);
  line-height: var(--vx-leading-snug);
  color: var(--vx-fg-muted);
  max-width: 56ch;
}
.vx-display {
  font-family: var(--vx-font-heading);
  font-size: var(--vx-text-6xl);
  font-weight: 700;
  letter-spacing: var(--vx-tracking-tight);
  line-height: var(--vx-leading-tight);
}