/* ============================================================
   FLOWENGAGED — SYSTEM FOUNDATION
   Ported from the Hermoso reference (brief: WEB UI/IMPLEMENTACAO-UI.md
   §2 tokens, §4 layout). Structure (radii, shadows, easings, section
   rhythm, container) is ported as-is; every colour is rebound to the
   FlowEngaged brand — near-black canvas, rose accent.

   CONTRACT: this :root block is the single source of colour. No literal
   colour may appear outside it in this file. Components consume tokens.
   ============================================================ */
:root {
  /* — Chromatic (brand-rebound: Hermoso light/orange -> FlowEngaged dark/rose) — */
  --bg: #0a0a0a;                       /* page canvas */
  --bg-2: #101010;                     /* alternating band */
  --surface: #171717;                  /* card / panel / sheet */
  --surface-2: #1a1a1a;
  --surface-3: #1e1e1e;                /* recessed surface (chips, wells) */
  --line: rgba(255, 255, 255, 0.06);   /* 1px hairline */
  --line-2: rgba(255, 255, 255, 0.16); /* form-field border (real contrast) */
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);  /* secondary text */
  --faint: rgba(255, 255, 255, 0.5);   /* metadata, captions */
  --cta: #ffffff;                      /* primary action: the site's white pill */
  --cta-hot: rgba(255, 255, 255, 0.88); /* primary hover */
  --cta-ink: #0a0a0a;                  /* text on --cta (dark on white) */
  --accent: #E1306C;                   /* decorative accent */
  --accent-2: #DD2A7B;
  --accent-deep: #B0245A;              /* pressed */
  --accent-text: #F06292;              /* accent as text (AA on --bg) */
  --accent-line: #E1306C;              /* focus ring, underline (>=3:1) */
  --glow: rgba(255, 255, 255, 0.12);   /* CTA halo */
  --cinema: #060606;                   /* deepest contrast band */
  --cinema-ink: #fafafa;
  --success: #34d399;
  --warning: #fbbf24;
  --error: #f87171;

  /* — Structural (ported literally from the reference brief §2.2) — */
  --maxw: 1200px;
  --gutter: clamp(18px, 4vw, 40px);
  --r-sm: 8px;     /* chips, cells, tags */
  --r: 12px;       /* cards, media, fields */
  --r-lg: 18px;    /* panels, sheets */
  --r-xl: 22px;    /* modals, big blocks */
  --pill: 999px;
  --el-1: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 12px -6px rgba(0, 0, 0, 0.35);
  --el-2: 0 0 0 1px var(--line), 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 32px -14px rgba(0, 0, 0, 0.55);
  --t: 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-slow: 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  --ease-hero: cubic-bezier(0.19, 1, 0.22, 1);
  --glass-blur: blur(14px) saturate(1.85) brightness(1.04);
  --pad-section: clamp(76px, 10vw, 120px);
  --pad-section-tight: clamp(62px, 8vw, 96px);
  --el-btn: 0 1px 4px rgba(0, 0, 0, 0.2);
  --focus-halo: rgba(225, 48, 108, 0.18);
  --accent-glow: rgba(225, 48, 108, 0.35);
  --accent-border: rgba(225, 48, 108, 0.30);
  --accent-soft: rgba(225, 48, 108, 0.12);
  --accent-veil: rgba(225, 48, 108, 0.08);
  --line-soft: rgba(255, 255, 255, 0.04);
  --line-mid: rgba(255, 255, 255, 0.10);
}

/* — Container: one class for every section (§4.1) — */
.fg-wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* — Vertical rhythm: two densities + fixed-nav clearance (§4.2) — */
.fg-section {
  padding-block: var(--pad-section);
  scroll-margin-top: 136px;
}
.fg-section--tight {
  padding-block: var(--pad-section-tight);
}
@media (max-width: 767px) {
  .fg-section {
    padding-block: clamp(60px, 12vw, 92px);
    scroll-margin-top: 150px;
  }
  .fg-section--tight {
    padding-block: clamp(50px, 10vw, 78px);
  }
}