/* =========================================================================
   Mountain View Group — Design Tokens
   Colors, typography, spacing, radii, shadows.
   ========================================================================= */

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

:root {
  /* ============================================================
     COLOR — Primary brand
     ============================================================ */
  --mvg-forest:        #274734;
  --mvg-evergreen:     #3E8E54;
  --mvg-teal:          #5A8085;
  --mvg-sky:           #7AADC1;
  --mvg-slate-blue:    #2C597A;

  --mvg-forest-900:    #1B3125;
  --mvg-forest-700:    #274734;
  --mvg-forest-500:    #375F49;
  --mvg-forest-200:    #A7BEB1;
  --mvg-forest-50:     #EAF0EC;

  --mvg-evergreen-700: #2F6E42;
  --mvg-evergreen-500: #3E8E54;
  --mvg-evergreen-300: #7FB894;
  --mvg-evergreen-50:  #ECF5EF;

  --mvg-slate-900:     #1A3A52;
  --mvg-slate-700:     #2C597A;
  --mvg-slate-500:     #43749A;
  --mvg-slate-300:     #91B2CA;
  --mvg-slate-50:      #EAF0F5;

  --mvg-sky-500:       #7AADC1;
  --mvg-sky-300:       #A9C9D6;
  --mvg-sky-100:       #DDEAF0;

  /* ============================================================
     COLOR — Neutrals
     ============================================================ */
  --mvg-offwhite:      #F7F9FA;
  --mvg-white:         #FFFFFF;
  --mvg-gray-50:       #F2F4F6;
  --mvg-gray-100:      #E5E8EB;
  --mvg-gray-200:      #D1D6DB;
  --mvg-gray-300:      #B0B6BE;
  --mvg-gray-400:      #8A929B;
  --mvg-gray-500:      #6B7280;
  --mvg-gray-600:      #4B5563;
  --mvg-gray-700:      #374151;
  --mvg-gray-800:      #2A333F;
  --mvg-charcoal:      #1F2933;

  /* ============================================================
     COLOR — Semantic tokens
     ============================================================ */
  --bg-page:           var(--mvg-offwhite);
  --bg-surface:        var(--mvg-white);
  --bg-surface-alt:    var(--mvg-gray-50);
  --bg-sunken:         #EEF2F4;
  --bg-inverse:        var(--mvg-forest);
  --bg-brand:          var(--mvg-forest);
  --bg-brand-alt:      var(--mvg-slate-blue);
  --bg-tint-sky:       var(--mvg-sky-100);
  --bg-tint-forest:    var(--mvg-forest-50);

  --fg-1:              var(--mvg-charcoal);
  --fg-2:              var(--mvg-gray-700);
  --fg-3:              var(--mvg-gray-500);
  --fg-disabled:       var(--mvg-gray-300);
  --fg-on-brand:       var(--mvg-offwhite);
  --fg-on-accent:      #FFFFFF;
  --fg-link:           var(--mvg-slate-700);
  --fg-link-hover:     var(--mvg-forest);

  --border-subtle:     var(--mvg-gray-100);
  --border-default:    var(--mvg-gray-200);
  --border-strong:     var(--mvg-gray-300);
  --border-focus:      var(--mvg-evergreen);

  --action-primary-bg:         var(--mvg-evergreen);
  --action-primary-bg-hover:   var(--mvg-evergreen-700);
  --action-primary-bg-active:  #27623A;
  --action-primary-fg:         #FFFFFF;

  --action-secondary-bg:         var(--mvg-forest);
  --action-secondary-bg-hover:   var(--mvg-forest-900);
  --action-secondary-fg:         var(--mvg-offwhite);

  --action-tertiary-fg:          var(--mvg-slate-700);
  --action-tertiary-fg-hover:    var(--mvg-forest);

  --status-success:    var(--mvg-evergreen);
  --status-success-bg: var(--mvg-evergreen-50);
  --status-info:       var(--mvg-slate-700);
  --status-info-bg:    var(--mvg-slate-50);
  --status-warning:    #B7791F;
  --status-warning-bg: #FEF5E7;
  --status-danger:     #B42318;
  --status-danger-bg:  #FEF3F2;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Merriweather', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: var(--font-sans);

  --fs-display:   clamp(3rem, 4.8vw, 4.5rem);
  --fs-h1:        clamp(2.25rem, 3.4vw, 3rem);
  --fs-h2:        clamp(1.75rem, 2.6vw, 2.25rem);
  --fs-h3:        1.5rem;
  --fs-h4:        1.25rem;
  --fs-h5:        1.125rem;
  --fs-body:      1rem;
  --fs-body-sm:   0.9375rem;
  --fs-caption:   0.8125rem;
  --fs-micro:     0.6875rem;

  --lh-tight:     1.15;
  --lh-snug:      1.3;
  --lh-normal:    1.5;
  --lh-loose:     1.7;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-black:     900;

  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.08em;

  /* ============================================================
     SPACING (4-px base)
     ============================================================ */
  --space-0:    0;
  --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;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:   128px;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-xs:   0 1px 2px rgba(31, 41, 51, 0.06);
  --shadow-sm:   0 1px 3px rgba(31, 41, 51, 0.08), 0 1px 2px rgba(31, 41, 51, 0.04);
  --shadow-md:   0 4px 8px rgba(31, 41, 51, 0.08), 0 2px 4px rgba(31, 41, 51, 0.04);
  --shadow-lg:   0 12px 24px rgba(31, 41, 51, 0.10), 0 4px 8px rgba(31, 41, 51, 0.05);
  --shadow-xl:   0 24px 48px rgba(31, 41, 51, 0.14), 0 8px 16px rgba(31, 41, 51, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(31, 41, 51, 0.06);
  --shadow-focus: 0 0 0 3px rgba(62, 142, 84, 0.25);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-sm:  640px;
  --container-md:  840px;
  --container-lg:  1080px;
  --container-xl:  1280px;
}

html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-page); }
body { margin: 0; font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; }

.display, .t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

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

h2, .t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
  color: var(--fg-1);
}

h3, .t-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
  color: var(--fg-1);
}

h4, .t-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
  color: var(--fg-1);
}

h5, .t-h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
  color: var(--fg-1);
}

p, .t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  margin: 0 0 var(--space-4);
}

.t-lead {
  font-size: 1.25rem;
  line-height: var(--lh-snug);
  color: var(--fg-2);
  font-weight: var(--fw-regular);
}

.t-caption { font-size: var(--fs-caption); color: var(--fg-3); line-height: var(--lh-snug); }
.t-micro   { font-size: var(--fs-micro);   color: var(--fg-3); line-height: var(--lh-snug); }
.t-eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--mvg-slate-700);
}

code, kbd, samp, .t-mono, .t-tabular {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}
.t-tabular { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }

a, .t-link {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--fg-link-hover); text-decoration-thickness: 2px; }

hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-8) 0; }

::selection { background: var(--mvg-sky-300); color: var(--mvg-charcoal); }