/* ============================================================
   Form & Framework — root CSS variable defaults.

   Every block in the library reads from these custom properties.
   Loaded BEFORE any theme CSS, so themes only need to override the
   variables they care about. Customer sites layer their own
   overrides on top via a runtime <style> tag injected by the picker.

   Names + meanings are documented in docs/CSS_CONTRACT.md.
   Adding/renaming a variable here is a contract change.
   ============================================================ */

:root {
  /* ----- Colors ----- */
  --fnf-color-bg:               #ffffff;
  --fnf-color-surface:          #f7f3ec;  /* warm card / section bg */
  --fnf-color-surface-alt:      #f4f6f8;  /* cool muted bg */
  --fnf-color-text:             #212529;
  --fnf-color-text-muted:       #6c757d;
  --fnf-color-heading:          #212529;
  --fnf-color-primary:          #4f46e5;
  --fnf-color-primary-contrast: #ffffff;
  --fnf-color-accent:           #6c757d;
  --fnf-color-accent-contrast:  #ffffff;
  --fnf-color-border:           #dee2e6;
  --fnf-color-success:          #198754;
  --fnf-color-warning:          #ffc107;
  --fnf-color-error:            #dc3545;

  /* ----- Typography -----
     Four font slots + a brand alias. Themes ("font presets") set as many
     of these as they care about; unset slots fall through to the defaults
     below. See docs/CSS_CONTRACT.md for the slot meanings and example
     preset bundles in editor/themes/font-preset-*.css.

     Each role is a *named text style* — a bundle of family + weight +
     size + color. The .fnf-{role} utility classes apply the full bundle
     so a user (or the WYSIWYG Style picker) can mark any element with a
     single class and get cohesive role styling. */
  --fnf-font-display: var(--fnf-font-heading);  /* page hero / big statement */
  --fnf-font-heading: system-ui, -apple-system, "Segoe UI", sans-serif;
  --fnf-font-body:    system-ui, -apple-system, "Segoe UI", sans-serif;
  --fnf-font-accent:  var(--fnf-font-heading);  /* taglines, pull quotes, button labels */
  --fnf-font-brand:   var(--fnf-font-body);     /* alias for site-name in header */
  --fnf-font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --fnf-font-weight-display: 700;
  --fnf-font-weight-heading: 500;  /* matches Bootstrap reboot default */
  --fnf-font-weight-body:    400;
  --fnf-font-weight-accent:  500;
  --fnf-font-weight-brand:   var(--fnf-font-weight-heading);
  --fnf-scale-base:   1rem;
  --fnf-scale-ratio:  1.25;
  /* Role sizes use clamp() so they scale with viewport without the
     author needing to write per-breakpoint media queries. */
  --fnf-display-size:  clamp(2.25rem, 3vw + 1.5rem, 3.5rem);
  --fnf-heading-size:  clamp(1.5rem, 1vw + 1.25rem, 2rem);
  --fnf-body-size:     1rem;
  --fnf-accent-size:   1rem;
  --fnf-brand-size:    1.25rem;
  /* Role colors pull from the palette so swapping the palette also
     swaps role colors automatically. Override at the role level when
     a theme wants, e.g., display in the brand color. */
  --fnf-display-color: var(--fnf-color-heading);
  --fnf-heading-color: var(--fnf-color-heading);
  --fnf-body-color:    var(--fnf-color-text);
  --fnf-accent-color:  var(--fnf-color-accent);
  --fnf-brand-color:   var(--fnf-color-heading);

  /* ----- Spacing ----- */
  --fnf-space-xs:      0.25rem;
  --fnf-space-sm:      0.75rem;
  --fnf-space-md:      1.5rem;
  --fnf-space-lg:      2.5rem;
  --fnf-space-xl:      4rem;
  --fnf-space-section: 4rem;

  /* ----- Layout ----- */
  --fnf-container-max: 1200px;
  --fnf-radius-sm:     0.25rem;
  --fnf-radius-md:     0.5rem;
  --fnf-radius-lg:     1rem;
  --fnf-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.05);
  --fnf-shadow-md:     0 6px 24px rgba(0, 0, 0, 0.08);
  --fnf-shadow-lg:     0 12px 32px rgba(0, 0, 0, 0.15);

  /* ----- Bootstrap mirror -----
     Keep Bootstrap components (modals, dropdowns, .btn-primary, etc.)
     visually consistent with --fnf-* without authoring two value sets.
     --bs-primary-rgb stays a literal because CSS can't compute hex→rgb;
     the picker writes both --fnf-color-primary and --bs-primary-rgb
     when a customer changes the primary color.                           */
  --bs-primary:                var(--fnf-color-primary);
  --bs-primary-rgb:            79, 70, 229;
  --bs-body-font-family:       var(--fnf-font-body);
  --bs-body-color:             var(--fnf-color-text);
  --bs-body-font-weight:       var(--fnf-font-weight-body);
  --bs-headings-font-weight:   var(--fnf-font-weight-heading);
  --bs-border-radius:          var(--fnf-radius-md);
  --bs-border-radius-lg:       var(--fnf-radius-lg);
  --bs-border-color:           var(--fnf-color-border);
}

/* Body baseline so theme fonts/colors take effect without per-block work. */
body {
  font-family: var(--fnf-font-body);
  color: var(--fnf-color-text);
  background: var(--fnf-color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fnf-font-heading);
  font-weight: var(--fnf-font-weight-heading);
  color: var(--fnf-color-heading);
}

/* Named text-style classes. Each one bundles family + weight + size +
   color so applying a single class delivers the full role look. Applied
   directly (e.g. <p class="fnf-body">) or via the WYSIWYG Style picker,
   which wraps the selection in <span class="fnf-{role}">. */
.fnf-display {
  font-family: var(--fnf-font-display);
  font-weight: var(--fnf-font-weight-display);
  font-size:   var(--fnf-display-size);
  color:       var(--fnf-display-color);
  line-height: 1.15;
}
.fnf-heading {
  font-family: var(--fnf-font-heading);
  font-weight: var(--fnf-font-weight-heading);
  font-size:   var(--fnf-heading-size);
  color:       var(--fnf-heading-color);
  line-height: 1.25;
}
.fnf-body {
  font-family: var(--fnf-font-body);
  font-weight: var(--fnf-font-weight-body);
  font-size:   var(--fnf-body-size);
  color:       var(--fnf-body-color);
}
.fnf-accent {
  font-family: var(--fnf-font-accent);
  font-weight: var(--fnf-font-weight-accent);
  font-size:   var(--fnf-accent-size);
  color:       var(--fnf-accent-color);
}
.fnf-brand {
  font-family: var(--fnf-font-brand);
  font-weight: var(--fnf-font-weight-brand);
  font-size:   var(--fnf-brand-size);
  color:       var(--fnf-brand-color);
}

/* Bootstrap's .display-1 … .display-6 inherit the display family + weight +
   color from the role, but keep their own sizes (so heroes can pick a
   numeric tier for hierarchy). The .fnf-display class above gets the
   role's default size. */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--fnf-font-display);
  font-weight: var(--fnf-font-weight-display);
  color:       var(--fnf-display-color);
}