/* =============================================================
   PARASTUDIO — TYPOGRAPHY
   /css/typography.css

   Font loading, base element styles, and typographic
   utility classes. Requires /css/theme.css to be loaded first.

   SWAPPING FONTS
   --------------
   1. Change the @import URL below to your new font
   2. Update --font-display / --font-body in theme.css
   That's it — everything else inherits automatically.

   UTILITY CLASSES (quick reference)
   ----------------------------------
   .type-hero        Full-bleed display headline (PARASTUDIO scale)
   .type-display     Section-level display heading
   .type-logotype    Uppercase brand/logo treatment
   .type-lead        Large intro paragraph
   .type-label       Uppercase eyebrow / section label
   .type-card-title  Uppercase card heading (portfolio style)
   .type-caption     Small metadata / captions
   .text-gold        Gold accent color
   .text-muted       Muted text color
   .text-gradient    Cyan-to-purple gradient text (homepage signature)
   ============================================================= */


/* -------------------------------------------------------------
   FONT LOADING
   Overpass — weights 300 (light) through 800 (extrabold)
   Used for all display and body text, matching portfolio.
   Swap this URL + update --font-* in theme.css to change fonts.
   ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@300..800&display=swap');


/* -------------------------------------------------------------
   BASE RESET
   ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-16);
  hanging-punctuation: first last;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100dvh;
  transition: background-color 0.3s ease, color 0.3s ease;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}


/* -------------------------------------------------------------
   HEADING ELEMENTS
   h1–h4  display font (Overpass Bold/ExtraBold)
   h5–h6  body font (Overpass SemiBold)
   ------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-wrap: balance;
  color: var(--color-text);
}

h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

h1 {
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
}

h3 {
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-normal);
}

h4 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

h5 {
  font-size: var(--text-sm);
}

h6 {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}


/* -------------------------------------------------------------
   BODY COPY
   ------------------------------------------------------------- */
p {
  text-wrap: pretty;
  max-width: 68ch;
  line-height: var(--leading-normal);
}

p + p {
  margin-top: var(--space-4);
}

small {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

strong {
  font-weight: var(--weight-bold);
}

em {
  font-style: italic;
}


/* -------------------------------------------------------------
   LINKS
   ------------------------------------------------------------- */
a {
  color: var(--color-link, inherit);
  text-decoration: none;
  transition: color var(--transition);
}

/* Underline links inside body copy only */
article a,
.prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-gold-subtle, rgba(225,188,99,0.4));
}

a:not(.btn):hover {
  color: var(--color-gold);
}


/* -------------------------------------------------------------
   DISPLAY UTILITIES
   Use these classes for typographic moments across the site.
   ------------------------------------------------------------- */

/* @sg-utility: .type-hero | Hero Headline | PARA | Full-bleed display headline. Overpass 800, fluid 56–160px. | type-hero text-gradient--animated */
.type-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

/* @sg-utility: .type-display | Display Heading | Design with clarity. | Section-level heading. Overpass 700, fluid 32–56px. */
.type-display {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* @sg-utility: .type-logotype | Logotype | Parastudio | Uppercase brand/logo mark. Overpass 700 uppercase. | type-logotype text-gold */
.type-logotype {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-none);
}

/* @sg-utility: .type-lead | Lead Paragraph | Senior UX & Digital Designer with 10+ years crafting intuitive user flows. | Intro paragraphs. Overpass 300, fluid 18–24px. */
.type-lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  max-width: 60ch;
}

/* @sg-utility: .type-label | Label / Eyebrow | UX Designer · Chicago, IL | Section eyebrows and metadata labels. 12px uppercase. */
.type-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-light);
}

/* @sg-utility: .type-card-title | Card Title | Marriott | Uppercase card heading, matches portfolio style. */
.type-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug);
}

/* @sg-utility: .type-caption | Caption | © 2026 · Parastudio | Metadata, footnotes, captions. */
.type-caption {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--color-text-light);
  line-height: var(--leading-normal);
}


/* -------------------------------------------------------------
   COLOR UTILITIES
   ------------------------------------------------------------- */
/* @sg-utility: .text-gold | Gold Text | Gold accent color | Applies --color-gold to any element. | type-display text-gold */
.text-gold     { color: var(--color-gold); }
/* @sg-utility: .text-muted | Muted Text | Supporting copy | Applies --color-text-muted. | type-display text-muted */
.text-muted    { color: var(--color-text-muted); }
/* @sg-utility: .text-light | Light Text | Captions and labels | Applies --color-text-light. | type-label text-light */
.text-light    { color: var(--color-text-light); }

/* @sg-utility: .text-gradient | Gradient Text | Parastudio | Static cyan→purple gradient text fill. | type-display text-gradient */
.text-gradient {
  background: var(--gradient);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* @sg-utility: .text-gradient--animated | Animated Gradient | PARASTUDIO | Animated gradient — best for hero text. | type-display text-gradient--animated */
.text-gradient--animated {
  background: var(--gradient);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientPulse 9s ease infinite alternate;
}

@keyframes gradientPulse {
  0%   { background-position: 0% 50%;   filter: hue-rotate(0deg); }
  50%  { background-position: 100% 50%; filter: hue-rotate(15deg); }
  100% { background-position: 0% 50%;   filter: hue-rotate(0deg); }
}


/* -------------------------------------------------------------
   GOLD RULE — horizontal divider (matches portfolio gold-rule)
   Usage: <hr class="gold-rule"> or <div class="gold-rule"></div>
   ------------------------------------------------------------- */
/* @sg-utility: .gold-rule | Gold Rule |  | 1px gold horizontal divider. Use &lt;hr class="gold-rule"&gt;. | *hr */
.gold-rule {
  height: 1px;
  background: var(--color-gold);
  border: none;
  margin-block: var(--space-8);
}


/* -------------------------------------------------------------
   LAYOUT CONTAINER
   ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--content-narrow); }
.container--wide   { max-width: var(--content-wide); }


/* -------------------------------------------------------------
   PROSE — long-form content block
   ------------------------------------------------------------- */
.prose {
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  max-width: 68ch;
}

.prose h2 { margin-top: var(--space-10); margin-bottom: var(--space-4); }
.prose h3 { margin-top: var(--space-8);  margin-bottom: var(--space-3); }
.prose p  { margin-bottom: var(--space-4); }
.prose ul,
.prose ol { padding-left: var(--space-6); margin-bottom: var(--space-4); }
.prose li { margin-bottom: var(--space-2); }


/* -------------------------------------------------------------
   SELECTION + FOCUS
   ------------------------------------------------------------- */
::selection {
  background: var(--color-gold-subtle, rgba(225, 188, 99, 0.2));
  color: var(--color-text);
}

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* -------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}