/* ============================
   FINAL TYPOGRAPHY SYSTEM – PORTFOLIO CANON (UPDATED 2026)
   Display: Stardos Stencil | Body: Space Grotesk
   ============================ */

:root {
  --font-display: 'Stardos Stencil', sans-serif;
  --font-text:   'Space Grotesk', sans-serif;

  --c-offwhite: #f5f5f5;
  --c-white:    #ffffff;
  --c-muted:    rgba(245, 245, 245, 0.70);   /* Softer on dark bg */
  --c-cyan:     #00d4ff;
  --c-fuchsia:  #ff2fb3;  /* Keep for potential future use */
  --c-orange:   #ff3300;  /* Primary accent - neon orange */

  /* Slightly refined responsive clamps for better feel */
  --display-1: clamp(3rem,  5.5vw + 0.5rem, 4.5rem);
  --display-2: clamp(2.25rem, 4vw + 0.5rem, 3.25rem);
  --display-3: clamp(1.6rem,  2.5vw, 1.8rem);

  --text-1: 1.125rem;
  --text-2: 0.975rem;
  --text-3: 0.875rem;
  --text-4: 0.75rem;
}

/* DISPLAY ================================= */

.type-display-1,
.type-display-2,
.type-display-3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 1.05;
  color: var(--c-white);          /* Keep pure white for display punch */
}

/* Add to end of fonts-integrated.css */
.type-display-2 {
  font-family: var(--font-text);              /* Space Grotesk instead of Stardos */
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.08em;                    /* hungry/condensed */
  font-size: calc(var(--display-2) * 0.82);   /* ~1.5 clicks smaller */
  line-height: 1.1;                           /* tighter */
}

/* TEXT / BODY ================================= */

.type-text-1,
.type-text-2,
.type-text-3,
.type-text-4 {
  font-family: var(--font-text);
  font-weight: 400;
  line-height: 1.65;
  color: var(--c-offwhite);       /* <-- Key change: off-white default for readability */
}

/* EYEBROW ================================= */

.type-eyebrow {
  font-family: var(--font-text);
  font-size: var(--text-4);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-cyan);           /* Default to cyan for eyebrows */
}

/* UTILITIES – these override defaults when added */

.--cyan     { color: var(--c-cyan) !important; }     /* !important helps punch through */
.--fuchsia  { color: var(--c-fuchsia) !important; }
.--orange   { color: var(--c-orange) !important; }
.muted      { color: var(--c-muted); }

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

/* Demo helpers (blockquote, code, etc.) – unchanged from before */
blockquote {
  border-left: 3px solid var(--c-orange);
  padding-left: 1.25rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--c-offwhite);
}

code {
  background: rgba(0,212,255,0.08);
  color: var(--c-cyan);
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
}

/* ... rest of helpers like pre, ul/ol as before ... */


/* Fucking container tweaks, again 
#content {
  margin-top:00px!important;
  padding-top:0px!important;
}*/