/* =====================================================
"Here's the version info TANK FORGOT TO ADD, AGAIN.. oh, v3.0"   
fonts-integrate.css
   FINAL / CANONICAL
   PURPOSE:
   - Absolute-last typography layer
   - Font pairing + typographic role treatments only
   - Text sizes, faces, and colors ONLY
   - No layout, spacing, animation, or breakpoints
   ===================================================== */


/* -----------------------------------------------------
   ROOT VARIABLES
----------------------------------------------------- */

:root {
  /* -------------------------------------------------
     Accent colors (typography scope)
  ------------------------------------------------- */
  --font-accent-cyan: #00d4ff;
  --font-accent-fuchsia: #ff2fb3;

  /* -------------------------------------------------
     Base text colors
  ------------------------------------------------- */
  --font-color-primary: #ffffff;
  --font-color-muted: rgba(255, 255, 255, 0.75);

  /* -------------------------------------------------
     Font families
  ------------------------------------------------- */
  --font-display: 'Stardos Stencil', sans-serif;
  --font-system: 'Space Grotesk', sans-serif;

  /* -------------------------------------------------
     Font sizes
  ------------------------------------------------- */
  --fs-display-1: clamp(3rem, 5vw, 4rem);
  --fs-display-2: clamp(2.2rem, 3.5vw, 3rem);
  --fs-text-1: 1.05rem;
  --fs-text-2: 0.85rem;

  /* -------------------------------------------------
     Font weights
  ------------------------------------------------- */
  --weight-display: 400;
  --weight-system-regular: 400;
  --weight-system-semibold: 600;
  --weight-system-bold: 700;

  /* -------------------------------------------------
     Letter spacing / tracking
  ------------------------------------------------- */
  --tracking-display: 0.02em;
  --tracking-lead: 0.06em;
  --tracking-eyebrow: 0.14em;
  --tracking-body: 0.02em;

  /* -------------------------------------------------
     Line heights
  ------------------------------------------------- */
  --line-display: 0.95;
  --line-lead: 1.25;
  --line-body: 1.55;
}


/* -----------------------------------------------------
   CORE TYPOGRAPHIC ROLES
----------------------------------------------------- */

/* DISPLAY-1: Hero / page titles */
.type-display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--line-display);
  color: var(--font-color-primary);
}

/* DISPLAY-2: Major sections / emphasis */
.type-display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--line-display);
  color: var(--font-color-primary);
}

/* DISPLAY-3: Subsections / callouts */
.type-display-3 {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
  color: var(--font-color-primary);
}


/* -----------------------------------------------------
   BODY TEXT ROLES
----------------------------------------------------- */

/* TEXT-1: Lead / intro body */
.type-text-1 {
  font-family: var(--font-system);
  font-size: var(--fs-text-1);
  font-weight: var(--weight-system-regular);
  letter-spacing: var(--tracking-body);
  line-height: var(--line-body);
  color: var(--font-color-muted);
}

/* TEXT-2: Standard body copy */
.type-text-2 {
  font-family: var(--font-system);
  font-size: 0.95rem;
  font-weight: var(--weight-system-regular);
  letter-spacing: var(--tracking-body);
  line-height: var(--line-body);
  color: var(--font-color-muted);
}

/* TEXT-3: Metadata / captions */
.type-text-3 {
  font-family: var(--font-system);
  font-size: 0.8rem;
  font-weight: var(--weight-system-regular);
  letter-spacing: var(--tracking-body);
  line-height: var(--line-body);
  color: var(--font-color-muted);
}

/* TEXT-4: Microcopy / UI hints */
.type-text-4 {
  font-family: var(--font-system);
  font-size: 0.7rem;
  font-weight: var(--weight-system-regular);
  letter-spacing: var(--tracking-eyebrow);
  line-height: var(--line-body);
  color: var(--font-color-muted);
}


/* -----------------------------------------------------
   EYEBROW / LABEL TEXT
----------------------------------------------------- */

.type-eyebrow {
  font-family: var(--font-system);
  font-size: 0.7rem;
  font-weight: var(--weight-system-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--font-color-muted);
}


/* -----------------------------------------------------
   LINK / URL TREATMENT (TYPOGRAPHY ONLY)
----------------------------------------------------- */

a,
.type-link {
  color: var(--font-accent-cyan);
  font-weight: var(--weight-system-semibold);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover,
.type-link:hover {
  color: var(--font-accent-fuchsia);
  text-decoration: underline;
}


/* =====================================================
   TYPOGRAPHY COLOR MODIFIERS
   PURPOSE:
   - Text-only color variation
   - Intentional, opt-in signal control
   ===================================================== */

/* -----------------------------------------------------
   SEMANTIC TYPOGRAPHY COLOR TOKENS
----------------------------------------------------- */

:root {
  --type-color-primary: var(--font-color-primary);
  --type-color-muted: var(--font-color-muted);
  --type-color-dim: rgba(255, 255, 255, 0.45);

  --type-accent-cyan: var(--font-accent-cyan);
  --type-accent-fuchsia: var(--font-accent-fuchsia);
}


/* -----------------------------------------------------
   UNIVERSAL TEXT COLOR MODIFIERS
----------------------------------------------------- */

.--cyan {
  color: var(--type-accent-cyan);
}

.--fuchsia {
  color: var(--type-accent-fuchsia);
}

.muted {
  color: var(--type-color-muted);
}

.dim {
  color: var(--type-color-dim);
}


/* -----------------------------------------------------
   FONT WEIGHT UTILITIES (TYPOGRAPHY ONLY)
----------------------------------------------------- */

.w-300 { font-weight: 300; }
.w-400 { font-weight: 400; }
.w-500 { font-weight: 500; }
.w-600 { font-weight: 600; }
.w-700 { font-weight: 700; }


/* UPGRADE */
/* Add these after existing rules for more dramatic weight contrast */
.type-text-1.w-600, .type-text-2.w-600 { font-weight: 600; letter-spacing: -0.01em; }
.type-text-1.w-700, .type-text-2.w-700 { font-weight: 700; letter-spacing: -0.015em; }

.type-display-1, .type-display-2, .type-display-3.w-700 {
  font-weight: 700;  /* If you want bolder display options */
}