/* ============================================================
   Flexus Theme — Base & Reset (warm paper, )
   Author: Mauro Gashfix
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  width: 100%;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--color-midnight-ink);
  font-family: var(--font-inter);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  font-weight: var(--font-weight-ui, var(--font-weight-regular));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-inter);
  font-weight: var(--font-weight-ui, var(--font-weight-semibold));
  color: var(--color-charcoal);
  line-height: 1.15;
  margin: 0 0 var(--spacing-16);
}
h1 { font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); letter-spacing: var(--tracking-heading-lg); }
h2 { font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
h3 { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); letter-spacing: var(--tracking-heading-sm); }
h4 { font-size: var(--text-subheading); }
h5 { font-size: var(--text-body-xl); font-weight: var(--font-weight-semibold); }
h6 { font-size: var(--text-body-lg); font-weight: var(--font-weight-semibold); }

p { margin: 0 0 var(--spacing-16); }

a {
  color: var(--color-midnight-ink);
  text-decoration: none;
  transition: color .2s ease;
}
a:hover { color: var(--color-notion-blue); }

small { font-size: var(--text-body); }

code, pre, kbd, samp {
  font-family: var(--font-geist-mono);
  font-weight: var(--font-weight-mono, 400);
  font-size: var(--text-body);
  background: var(--color-paper-mist);
  border: 1px solid var(--color-ash);
  border-radius: var(--radius-md);
}
code { padding: 2px var(--spacing-4); }
pre { padding: var(--spacing-16); overflow: auto; line-height: 1.43; }
pre code { background: transparent; border: 0; padding: 0; }

hr { border: 0; border-top: 1px solid var(--color-ash); margin: var(--spacing-24) 0; }

img, svg, video { max-width: 100%; height: auto; vertical-align: middle; }

::selection { background: var(--color-sky-tint); color: var(--color-charcoal); }

/* Display headlines (marketing) */
.flexus-display {
  font-family: var(--font-inter); font-weight: var(--font-weight-medium);
  font-size: var(--text-display); line-height: var(--leading-display);
  letter-spacing: var(--tracking-display); color: var(--color-charcoal);
}
.flexus-display--lg { font-size: var(--text-display-lg); line-height: var(--leading-display-lg); letter-spacing: var(--tracking-display-lg); }
.flexus-subtitle { font-family: var(--font-serif); font-weight: var(--font-weight-serif, 400); font-size: var(--text-body-xl); line-height: var(--leading-body-xl); color: var(--color-graphite); }
.fx-serif { font-family: var(--font-serif); font-weight: var(--font-weight-serif, 400); }

/* Hero highlight pill — the signature typographic device */
.fx-highlight-pill {
  display: inline-block; border-radius: var(--radius-full);
  padding: 0 .35em; margin: 0 .02em;
  background: var(--color-peach); color: var(--color-charcoal);
  line-height: 1.18; white-space: nowrap;
}
.fx-highlight-pill--blue { background: var(--color-sky-tint); color: var(--color-notion-blue); }
.fx-highlight-pill--marigold { background: var(--color-marigold); }
.fx-highlight-pill--coral { background: var(--color-coral); color: #fff; }

/* Central width */
.flexus-container { width: 100%; max-width: var(--page-max-width); margin-inline: auto; padding-inline: var(--spacing-24); }
.fx-bleed { width: 100%; max-width: 100%; min-width: 0; overflow-x: clip; }

#main-body:not(.fx-portal__main),
.fx-shell__main {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}

@media (max-width: 640px) {
  .flexus-container { padding-inline: var(--spacing-16); }
}

/* Dotted grid background */
.flexus-dotted-bg {
  background-image: radial-gradient(rgba(0,0,0,.10) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
}

/* Section rhythm */
.flexus-section { padding-block: var(--section-gap); }
.flexus-section--bordered { border-top: 1px solid var(--color-ash); }
.flexus-section--alt { background: var(--color-pure-white); border-block: 1px solid var(--color-ash); }
.flexus-section--no-border { border-top: 0; }

/* Utility monochrome text scale */
.text-caption { font-size: var(--text-caption); line-height: var(--leading-caption); }
.text-body { font-size: var(--text-body); line-height: var(--leading-body); }
.text-body-lg { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); }
.text-body-xl { font-size: var(--text-body-xl); line-height: var(--leading-body-xl); }
.text-subheading { font-size: var(--text-subheading); line-height: var(--leading-subheading); }
.text-heading-sm { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); }
.text-heading { font-size: var(--text-heading); line-height: var(--leading-heading); }
.text-heading-lg { font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); }
.text-display { font-size: var(--text-display); line-height: var(--leading-display); }
.font-mono { font-family: var(--font-geist-mono); }

/* Color utility tokens */
.text-ink { color: var(--color-midnight-ink); }
.text-charcoal { color: var(--color-charcoal); }
.text-graphite { color: var(--color-graphite); }
.text-slate { color: var(--color-slate); }
.text-steel { color: var(--color-steel); }
.text-fog { color: var(--color-fog); }
.text-silver { color: var(--color-silver); }
.text-electric-blue, .text-blue { color: var(--color-notion-blue); }
.text-deep-sapphire { color: var(--color-deep-sapphire); }
.text-vivid-green { color: var(--color-vivid-green); }
.text-tangerine { color: var(--color-tangerine); }
.text-lavender { color: var(--color-lavender); }
.bg-canvas { background: var(--surface-page); }
.bg-paper { background: var(--color-paper-mist); }
.bg-white { background: var(--color-pure-white); }
.bg-tinted-accent { background: var(--color-sky-tint); }
.bg-marigold { background: var(--color-marigold); }
.bg-coral { background: var(--color-coral); }
.bg-sky { background: var(--color-sky-wash); }
.bg-midnight { background: var(--color-midnight-brand); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-paper-mist); }
::-webkit-scrollbar-thumb { background: var(--color-smoke); border-radius: var(--radius-full); border: 2px solid var(--color-paper-mist); }
::-webkit-scrollbar-thumb:hover { background: var(--color-pebble); }

/* Focus visible default */
:focus-visible { outline: 2px solid var(--color-notion-blue); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Reveal-on-scroll primitives (activated by flexus.js IntersectionObserver) */
.fx-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.fx-reveal.is-in { opacity: 1; transform: translateY(0); }
.fx-reveal--d1 { transition-delay: .08s; }
.fx-reveal--d2 { transition-delay: .16s; }
.fx-reveal--d3 { transition-delay: .24s; }
.fx-reveal--d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .fx-reveal { opacity: 1; transform: none; transition: none; }
}

/* Dark theme variant (auto from .flexus-dark class on body) */
.flexus-dark {
  --surface-page: #191919;
  --surface-card: #202020;
  --color-canvas-white: #202020;
  --color-paper-warmth: #191919;
  --color-paper-mist: #2a2a2a;
  --color-ash: rgba(255, 255, 255, 0.09);
  --color-ash-solid: #333333;
  --color-smoke: #404040;
  --color-pebble: #525252;
  --color-midnight-ink: #ececec;
  --color-charcoal: #f5f5f5;
  --color-graphite: #b8b4af;
  --color-slate: #a8a8a8;
  --color-steel: #9c9c9c;
  --color-fog: #8f8d8a;
  --color-silver: #737373;
  --color-sky-tint: #0d2c47;
  --color-peach: #4a3418;
  --surface-paper: #2a2a2a;
}
.flexus-dark body, body.flexus-dark {
  background: var(--surface-page);
  color: var(--color-midnight-ink);
}
@media (prefers-color-scheme: dark) {
  body.flexus-auto {
    --surface-page: #191919;
    --surface-card: #202020;
    --color-canvas-white: #202020;
    --color-paper-mist: #2a2a2a;
    --color-ash: rgba(255, 255, 255, 0.09);
    --color-midnight-ink: #ececec;
    --color-charcoal: #f5f5f5;
    --color-graphite: #b8b4af;
    --color-fog: #8f8d8a;
    background: var(--surface-page);
    color: var(--color-midnight-ink);
  }
}