/**
 * Cubic Nexa — Typography design system
 * -----------------------------------------------------------------
 * Tokens: rem-only scale (base 16px). Weights: 400 | 500 | 600 | 700
 * Primary face: Inter (+ system fallbacks). Fluid display via clamp().
 */

:root {
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Strict scale (rem) — matches 32/40, 28/36, 24/32, 20/28, 18/28, 16/24, 14/20, 12/16 */
  --text-h1: 2rem;
  --leading-h1: 2.5rem;
  --text-h2: 1.75rem;
  --leading-h2: 2.25rem;
  --text-h3: 1.5rem;
  --leading-h3: 2rem;
  --text-h4: 1.25rem;
  --leading-h4: 1.75rem;
  --text-h5: 1.125rem;
  --leading-h5: 1.625rem;
  --text-h6: 1rem;
  --leading-h6: 1.5rem;

  --text-body-lg: 1.125rem;
  --leading-body-lg: 1.75rem;
  --text-body: 1rem;
  --leading-body: 1.5rem;
  --text-sm: 0.875rem;
  --leading-sm: 1.25rem;
  --text-caption: 0.75rem;
  --leading-caption: 1rem;

  /* Hero / marketing display */
  --text-display: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  --leading-display: clamp(2.125rem, 3vw + 1.25rem, 3.125rem);
  --text-hero-lead: clamp(0.9375rem, 0.8vw + 0.85rem, 1.125rem);
  --leading-hero-lead: clamp(1.375rem, 1.2vw + 1.1rem, 1.75rem);

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.01em;
  --tracking-label: 0.04em;

  --leading-tight: 1.25;
  --leading-none: 1;

  /* Logo wordmark — editorial serif, pairs with Inter body */
  --font-brand: "Fraunces", Georgia, "Times New Roman", serif;
  --brand-word-size: clamp(1.125rem, 0.55vw + 0.95rem, 1.45rem);
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  letter-spacing: var(--tracking-normal);
}

/* Heading defaults (overrides Bootstrap rem scale to our system) */
h1,
.h1 {
  font-family: var(--font-sans);
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  font-style: normal;
}

h2,
.h2 {
  font-family: var(--font-sans);
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
  font-style: normal;
}

h3,
.h3 {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  font-style: normal;
}

h4,
.h4 {
  font-family: var(--font-sans);
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  font-style: normal;
}

h5,
.h5 {
  font-family: var(--font-sans);
  font-size: var(--text-h5);
  line-height: var(--leading-h5);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-normal);
  font-style: normal;
}

h6,
.h6 {
  font-family: var(--font-sans);
  font-size: var(--text-h6);
  line-height: var(--leading-h6);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-normal);
  font-style: normal;
}

p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-regular);
}

small,
.small {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--font-weight-regular);
}

/* Navigation */
.navbar .nav-link {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  font-style: normal;
}
@media (min-width: 992px) {
  .navbar .nav-link {
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }
}

/* Footer — nav links at comfortable reading size on dark background */
.footer {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: var(--font-weight-regular);
  font-style: normal;
}

.footer a {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  font-style: normal;
}

.footer .cp {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.55;
  font-weight: var(--font-weight-regular);
  font-style: normal;
  letter-spacing: 0.01em;
  opacity: 0.88;
}

/* Form controls — minimum readable body size (16px) */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.form-control {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--font-weight-regular);
  font-style: normal;
}

/* Placeholder contrast (WCAG-friendly gray, not too faint) */
::placeholder {
  color: #5c6370;
  opacity: 1;
}

textarea::placeholder,
input::placeholder {
  font-weight: var(--font-weight-regular);
}

/* Utility classes */
.text-display {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-tight);
}

.text-body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
}

.text-caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: var(--font-weight-regular);
}

.font-regular {
  font-weight: var(--font-weight-regular) !important;
}
.font-medium {
  font-weight: var(--font-weight-medium) !important;
}
.font-semibold {
  font-weight: var(--font-weight-semibold) !important;
}
.font-bold {
  font-weight: var(--font-weight-bold) !important;
}

/* Brand lockup — icon + typeset wordmark (header & footer) */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none !important;
  color: inherit;
}

.brand-lockup:focus-visible {
  outline: 2px solid rgba(52, 231, 191, 0.55);
  outline-offset: 3px;
  border-radius: 4px;
}

.brand-lockup__mark {
  flex-shrink: 0;
  height: 2.75rem;
  width: auto;
  max-height: 2.75rem;
  object-fit: contain;
}

.brand-lockup__wordmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

.brand-lockup__line {
  font-family: var(--font-brand);
  font-size: var(--brand-word-size);
  font-weight: 600;
  font-optical-sizing: auto;
  letter-spacing: -0.03em;
  line-height: 1.05;
  white-space: nowrap;
}

.brand-lockup__cubic {
  color: #ffffff;
  font-weight: 600;
}

.brand-lockup__nexa {
  margin-left: 0.22em;
  font-weight: 700;
  color: #b8f5e8;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand-lockup__nexa {
    background: linear-gradient(118deg, #7ae8d2 0%, #ffffff 48%, #8ec5ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.navbar .brand-lockup.navbar-brand {
  font-family: var(--font-sans);
}

/* Responsive: slightly tighter body on small viewports (still ≥16px) */
@media (max-width: 575.98px) {
  :root {
    --text-body-lg: 1.0625rem;
    --leading-body-lg: 1.625rem;
  }

  .brand-lockup__mark {
    height: 2.4rem;
    max-height: 2.4rem;
  }
}