/* ============================================================
   VIBRANCY & RESONANCE — DESIGN TOKENS
   Edit THIS file to change colors, type, or which fonts load.
   ============================================================ */

@font-face {
  font-family: 'HNHeavyCn';
  src: url('fonts/HelveticaNeueLTStd-HvCn.woff2') format('woff2');
  font-weight: 750;
}
@font-face {
  font-family: 'HNBold';
  src: url('fonts/HelveticaNeueLTStd-Bd.woff2') format('woff2');
  font-weight: 700;
}
@font-face {
  font-family: 'HNMedium';
  src: url('fonts/HelveticaNeueLTStd-Md.woff2') format('woff2');
  font-weight: 500;
}
@font-face {
  font-family: 'HNRoman';
  src: url('fonts/HelveticaNeueLTStd-Roman.woff2') format('woff2');
  font-weight: 400;
}

:root{

  /* ---------- Colors (from Marshall "Colors" spec) ---------- */
  --color-black-100: #121212;
  --color-black-90:  rgba(18,18,18,0.9);
  --color-black-70:  rgba(18,18,18,0.7);
  --color-black-50:  rgba(0,0,0,0.5);
  --color-white-100: #FFFFFF;
  --color-white-90:  rgba(255,255,255,0.9);
  --color-white-70:  rgba(255,255,255,0.7);
  --color-white-20:  rgba(255,255,255,0.2);

  /* ---------- Semantic colors (what the app actually uses) ---------- */
  --bg: var(--color-black-100);
  --card-bg: var(--color-black-90);
  --text: var(--color-white-100);
  --muted: var(--color-white-70);
  --line: var(--color-white-20);
  --accent: var(--color-white-100);

  /* ---------- Font families ---------- */
  --font-heavy:  'HNHeavyCn', Helvetica, Arial, sans-serif;  /* Helvetica Neue 87 Heavy Condensed */
  --font-medium: 'HNMedium',  Helvetica, Arial, sans-serif;  /* Helvetica Neue 65 Medium */
  --font-bold:   'HNBold',    Helvetica, Arial, sans-serif;  /* Helvetica Neue 75 Bold */
  --font-roman:  'HNRoman',   Helvetica, Arial, sans-serif;  /* Helvetica Neue 55 Roman — used for Body 1 / 2 */

  /* ---------- Type scale (from Marshall "Text Styles" spec) ---------- */
  /* Display 1 */
  --display1-size: 88px;
  --display1-line-height: 100%;
  --display1-letter-spacing: 0%;

  /* Display 2 */
  --display2-size: 32px;
  --display2-line-height: 120%;
  --display2-letter-spacing: 0%;

  /* Header 1 — updated: was 40px */
  --h1-size: 24px;
  --h1-line-height: 100%;
  --h1-letter-spacing: 0%;

  /* Header 2 — updated: was 28px in the Heavy family, now 12px in Medium */
  --h2-size: 12px;
  --h2-line-height: 100%;
  --h2-letter-spacing: 0%;

  /* Header 3 */
  --h3-size: 18px;
  --h3-line-height: 100%;
  --h3-letter-spacing: 0%;

  /* Body 1 */
  --body1-size: 18px;
  --body1-line-height: 130%;
  --body1-letter-spacing: 0%;

  /* Body 2 */
  --body2-size: 13px;
  --body2-line-height: 130%;
  --body2-letter-spacing: 0%;
}

/* ---------- Typographic utility classes ----------
   Apply these instead of writing font rules inline.
   Note: the app uses clamp() in places so text can shrink on
   smaller screens — the numbers above are always the desktop
   ceiling, matching the brand spec exactly.
------------------------------------------------------------ */

.text-display1{
  font-family: var(--font-heavy);
  font-weight: 750;
  font-size: var(--display1-size);
  letter-spacing: var(--display1-letter-spacing);
  line-height: var(--display1-line-height);
  text-transform: uppercase;
}
.text-h1{
  font-family: var(--font-heavy);
  font-weight: 750;
  font-size: var(--h1-size);
  letter-spacing: var(--h1-letter-spacing);
  line-height: var(--h1-line-height);
  text-transform: uppercase;
}
.text-h2{
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: var(--h2-size);
  letter-spacing: var(--h2-letter-spacing);
  line-height: var(--h2-line-height);
  text-transform: uppercase;
}
.text-h3{
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: var(--h3-size);
  letter-spacing: var(--h3-letter-spacing);
  line-height: var(--h3-line-height);
  text-transform: uppercase;
}
.text-body1{
  font-family: var(--font-medium);
  font-weight: 500;
  font-size: var(--body1-size);
  letter-spacing: var(--body1-letter-spacing);
  line-height: var(--body1-line-height);
}
.text-body2{
  font-family: var(--font-roman);
  font-weight: 400;
  font-size: var(--body2-size);
  letter-spacing: var(--body2-letter-spacing);
  line-height: var(--body2-line-height);
}

/* ============================================================
   COMPONENTS
   Add more tokens here as new components are designed
   (e.g. --input-radius, --card-radius, etc).
   ============================================================ */

:root{
  --button-radius: 2px;
  --button-padding: 13px 22px;
  --button-font: var(--font-bold);
  --button-font-size: 12px;
  --button-letter-spacing: 0.06em;
}