/* ========================================================= */
/* FONTS.CSS — General Sans (headings) + Inter (body/UI)*/
/* ========================================================= */

/* 1. Font-face declarations — only Regular (400) + Semibold (600) */
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans/GeneralSans-Regular.woff2') format('woff2'),
       url('../fonts/general-sans/GeneralSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans/GeneralSans-Semibold.woff2') format('woff2'),
       url('../fonts/general-sans/GeneralSans-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/Inter-Regular.woff2') format('woff2'),
       url('../fonts/inter/Inter-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter/Inter-SemiBold.woff2') format('woff2'),
       url('../fonts/inter/Inter-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ========================================================= */
/* 2. Variables */
:root{
  --ff-primary: 'General Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ff-secondary: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* sizes */
  --fz-h1: 3rem;    /* 48px */
  --fz-h2: 2.25rem; /* 36px */
  --fz-h3: 1.75rem; /* 28px */
  --fz-h4: 1.375rem;/* 22px */
  --fz-body: 1rem;  /* 16px */
  --fz-caption: 0.875rem; /* 14px */

  /* mobile overrides */
  --fz-h1-mobile: 2rem; /* 32px */
  --fz-body-mobile: 0.875rem; /* 14px */
  --fz-caption-mobile: 0.75rem; /* 12px */

  --fw-regular: 400;
  --fw-semibold: 600;

  /* tracking */
  --track-caption-primary: 0.03em; /* 30 units */
  --track-title-primary: 0.01em;   /* 10 units */
  --track-body-primary: -0.02em;   /* -20 units */

  --track-caption-secondary: 0.03em;
  --track-title-secondary: -0.02em;
  --track-body-secondary: -0.02em;

  /* leading */
  --lh-title: 1.2;
  --lh-body: 1.6;
  --lh-caption: 1.4;

  --text: #222;
  --muted: #666;
}

/* ========================================================= */
/* 3. Base */
html,body{height:100%;}
body{
  margin:0;
  font-family: var(--ff-secondary);
  font-size: var(--fz-body);
  font-weight: var(--fw-regular);
  letter-spacing: var(--track-body-secondary);
  line-height: var(--lh-body);
  color:var(--text);
  background:#fafafa;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,.key-marketing-copy{
  font-family: var(--ff-primary);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-title-primary);
  line-height: var(--lh-title);
  margin:0 0 0.5em 0;
}

h1{font-size:var(--fz-h1);}
h2{font-size:var(--fz-h2);}
h3{font-size:var(--fz-h3);}
h4{font-size:var(--fz-h4);}

.p{
  margin:0 0 1em 0;
  font-size: var(--fz-bod);
}

.caption{
  font-family: var(--ff-secondary);
  font-size: var(--fz-caption);
  letter-spacing: var(--track-caption-secondary);
  line-height: var(--lh-caption);
  color:var(--muted);
}

.ui-label,.small-text{
  font-family: var(--ff-secondary);
  font-size: 0.875rem;
  font-weight: var(--fw-regular);
  letter-spacing: var(--track-body-secondary);
}

.container{
  max-width:900px;
  margin:48px auto;
  padding:24px;
  background:white;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  border-radius:12px;
}

@media(max-width:768px){
  body{font-size: var(--fz-body-mobile);}
  h1{font-size: var(--fz-h1-mobile);}
  .caption{font-size: var(--fz-caption-mobile);}
}

:focus{outline:2px solid #0366d6;outline-offset:2px;}

/* ========================================================= */
/* 4. Utilities (New Addition) */
/* ========================================================= */

/* Font Weight Utilities */
.font-weight-400,
.font-regular {
    font-weight: var(--fw-regular); /* 400 */
}
.font-weight-600,
.font-semibold {
    font-weight: var(--fw-semibold); /* 600 */
}
.font-weight-bold {
    font-weight: 700; /* Bold */
}