/* -------------------------------------------------------
   LogicVein Brand System
   Derived from: LogicVein US Brand Guidelines 2024
   ------------------------------------------------------- */

/* -------------------------
   COLOR VARIABLES
   ------------------------- */
:root {
  /* Primary Palette */
  --lv-royal-blue: #0E59F2;      /* Primary Website Blue */
  --lv-deep-blue: #004EA2;       /* Accent / Dark Blue */
  --lv-light-blue: #DCE7FB;
  --lv-pale-blue: #F3F6FF;

  /* Grayscale & Neutrals */
  --lv-black: #000000;
  --lv-dark-gray: #231815;
  --lv-white: #FFFFFF;

  /* Accent */
  --lv-mature-red: #C11920;

  /* Typography */
  --lv-font-primary: 'Outfit', Arial, sans-serif;
  --lv-font-secondary: Arial, sans-serif;

  /* Spacing scale (8pt grid) */
  --lv-space-xs: 4px;
  --lv-space-sm: 8px;
  --lv-space-md: 16px;
  --lv-space-lg: 24px;
  --lv-space-xl: 40px;
}

/* -------------------------
   TYPOGRAPHY SYSTEM
   ------------------------- */
body {
  font-family: var(--lv-font-primary);
  color: var(--lv-dark-gray);
  line-height: 1.6;
  background: var(--lv-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lv-font-primary);
  font-weight: 600;
  color: var(--lv-black);
  margin-bottom: var(--lv-space-md);
}

p, li {
  font-size: 1rem;
  margin-bottom: var(--lv-space-md);
}

/* Applied guideline sizes */
.lvt-h1 { font-size: 2rem; }
.lvt-h2 { font-size: 1.625rem; }
.lvt-h3 { font-size: 1.375rem; }
.lvt-body-lg { font-size: 1.125rem; }
.lvt-body-sm { font-size: 0.875rem; }

/* -------------------------
   LOGO SAFE AREA HELPERS
   ------------------------- */
.lv-logo {
  display: inline-block;
  max-width: 220px;
}

.lv-logo--safe {
  padding: calc(6%); /* approximates 1x–2x jar height rule */
}

/* -------------------------
   BRAND BACKGROUND HELPERS
   ------------------------- */
.bg-royal { background-color: var(--lv-royal-blue); color: var(--lv-white); }
.bg-deep { background-color: var(--lv-deep-blue); color: var(--lv-white); }
.bg-light { background-color: var(--lv-light-blue); }
.bg-pale { background-color: var(--lv-pale-blue); }
.bg-white { background-color: var(--lv-white); }
.bg-black { background-color: var(--lv-black); color: var(--lv-white); }

.text-red { color: var(--lv-mature-red); }
.text-dark { color: var(--lv-dark-gray); }
.text-white { color: var(--lv-white); }

/* -------------------------
   LAYOUT HELPERS
   ------------------------- */
.section {
  padding: var(--lv-space-xl) 0;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--lv-space-lg);
}

/* -------------------------
   BUTTONS
   ------------------------- */
.lv-btn {
  padding: var(--lv-space-sm) var(--lv-space-md);
  border-radius: 6px;
  font-weight: 600;
  display: inline-block;
  text-decoration: none;
}

.lv-btn--primary {
  background: var(--lv-royal-blue);
  color: var(--lv-white);
}

.lv-btn--secondary {
  background: var(--lv-deep-blue);
  color: var(--lv-white);
}

.lv-btn--outline {
  border: 2px solid var(--lv-royal-blue);
  color: var(--lv-royal-blue);
  background: transparent;
}

/* -------------------------
   FORMS (minimal baseline)
   ------------------------- */
input, select, textarea {
  width: 100%;
  padding: var(--lv-space-sm);
  border-radius: 4px;
  border: 1px solid var(--lv-light-blue);
  font-family: var(--lv-font-primary);
  font-size: 1rem;
}

/* -------------------------
   SPACING UTILITIES
   ------------------------- */
.mt-xs { margin-top: var(--lv-space-xs); }
.mt-sm { margin-top: var(--lv-space-sm); }
.mt-md { margin-top: var(--lv-space-md); }
.mt-lg { margin-top: var(--lv-space-lg); }
.mt-xl { margin-top: var(--lv-space-xl); }

.mb-xs { margin-bottom: var(--lv-space-xs); }
.mb-sm { margin-bottom: var(--lv-space-sm); }
.mb-md { margin-bottom: var(--lv-space-md); }
.mb-lg { margin-bottom: var(--lv-space-lg); }
.mb-xl { margin-bottom: var(--lv-space-xl); }

/* -------------------------
   GRID HELPERS
   ------------------------- */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lv-space-lg);
}

.col-6 {
  width: 100%;
}
@media (min-width: 768px) {
  .col-6 {
    width: calc(50% - var(--lv-space-lg));
  }
}