/* ========================================
   SENSOLYTICS - BASE STYLES
   Variables, Typography, Resets
   ======================================== */

/* ========================================
   1. CSS VARIABLES
   ======================================== */

:root {
  /* BRAND COLORS */
  --color-text: #333;
  --color-brand-blue: rgb(45, 132, 205);
  --color-brand-blue-dark: rgb(35, 102, 165); /* Darker blue for hover */ 
  --color-brand-blue-light: rgba(45, 132, 205, .03);
  --color-brand-gray: #626262;
  --color-brand-green: #74B43C;

  /* NEUTRAL COLORS - Professional Palette */
  --color-white: #ffffff;
  --color-black: #000000;

  /* BACKGROUNDS - for section alternation */
  --color-bg-white: #ffffff;
  --color-bg-light-gray: #f7f7f7;
  --color-bg-extra-light-gray: #fafafa;
  --color-bg-blue-tint: rgba(45, 132, 205, 0.03); /* Very subtle blue */
  
  /* SHADOWS - for cards without borders */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
  
  /* SPACING - consistent rhythm */
  --space-section: 80px; /* Vertical padding for sections */
  --space-section-lg: 120px; /* For hero, key sections */
  --space-section-sm: 60px; /* For smaller sections */

  /* SECTION BACKGROUNDS - for alternating rhythm */
  .sx-bg-white {
    background: var(--color-bg-white);
  }

  .sx-bg-gray {
    background: var(--color-bg-light-gray);
  }

  .sx-bg-blue-tint {
    background: var(--color-bg-blue-tint);
  }
  
  /* TYPOGRAPHY - Sizes - 1rem = 16px */
  --font-size-body: 1.0625rem;      /* 17px */
  --font-size-small: 0.875rem;      /* 14px - captions, labels */
  --font-size-lead: 1.3rem;         /* 20.8px - intro/lead text */
  --font-size-h1: 2.8rem;           /* 44.8px - main titles */
  --font-size-h2: 2.2rem;           /* 35.2px - section titles */
  --font-size-h3: 1.75rem;          /* 28px - subsections */
  --font-size-h4: 1.4rem;           /* 22.4px - card titles */
  --font-size-h5: 1.2rem;           /* 19.2px */
  --font-size-h6: 1rem;             /* 16px */
  
  /* TYPOGRAPHY - Fonts */
  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-headings: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Courier New", Courier, monospace; /* For technical specs */
  
  
  /* LAYOUT */
  --container-width: 1200px;
  --container-narrow: 800px;
  --border-radius: 8px;
  --border-radius-sm: 4px;
  --border-radius-lg: 12px;

}

/* LEAD/INTRO TEXT - Our "middle" size text */

.sx-lead {
  font-size: 1.3rem;
  line-height: 1.7;
  margin-bottom: 30px; 
  font-weight: 400;
  color: var(--color-brand-blue);
}

.sx-title {
  font-family: var(--font-headings);
  font-size: 2.8rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-brand-gray);
  margin: 10px 0 25px 0;
  text-align: left;
}

/*old .sx-secm-container p*/
.sx-body-text {
  font-family: var(--font-primary);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text);
  text-align: justify;
}

/* INLINE LINKS */
a {
  color: var(--color-brand-blue);
  text-decoration: none;
  transition: color 0.2s ease, text-decoration-color 0.2s ease, font-weight 0.2s ease;
}

a:hover,
a:focus {
  /*color: var(--color-brand-blue-dark);*/
  /*border-bottom: 1px solid var(--color-brand-blue-dark);*/
  font-weight: 600;
}


/* CARDS - without borders, using shadows */
.sx-card {
  background: var(--color-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.sx-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.sx-card-no-hover {
  background: var(--color-white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}