/* ==========================================================================
   Mavericks Aminos : bridge
   Auxentis Group Inc.

   This file is the mechanism. It assigns the brand variables onto Blocksy's
   --theme-* variables and Elementor's --e-global-* variables, once, in one
   place. Nothing else in the build sets a colour, a family or a container
   width on those systems.

   This is what stops the three-place font trap. A build that sets type in
   the Elementor Global Fonts panel, again in the Blocksy Customizer and
   again in the stylesheet has three owners for one value and no way to tell
   which one is winning. Cloned from Reforged's bridge.css, which the
   ClickUp record never mentioned.

   Selector is :root:root for specificity. It has to outrank the customizer's
   own inline :root block, which loads later in the document.
   ========================================================================== */

:root:root {

  /* --- Blocksy palette --------------------------------------------------- */

  --theme-palette-color-1: var(--brand-primary);
  --theme-palette-color-2: var(--brand-primary-hover);
  --theme-palette-color-3: var(--brand-heading);
  --theme-palette-color-4: var(--brand-text);
  --theme-palette-color-5: var(--brand-border);
  --theme-palette-color-6: var(--brand-surface);
  --theme-palette-color-7: var(--brand-bg);
  --theme-palette-color-8: var(--brand-bg);

  /* --- Blocksy semantics ------------------------------------------------- */

  --theme-text-color: var(--brand-text);
  --theme-headings-color: var(--brand-heading);
  /* Orange fails as text on white, so the blue carries links. */
  --theme-link-initial-color: var(--brand-link);
  --theme-link-hover-color: var(--brand-link-hover);
  --theme-border-color: var(--brand-border);
  --theme-content-boxes-background: var(--brand-surface);

  /* Button ink is set on both states deliberately. Letting hover inherit is
     how a button loses its label mid-transition. */
  --theme-button-text-initial-color: var(--brand-ink-on-accent);
  --theme-button-text-hover-color: var(--brand-ink-on-accent);
  --theme-button-background-initial-color: var(--brand-primary);
  --theme-button-background-hover-color: var(--brand-primary-hover);
  --theme-button-border-radius: var(--mav-field-radius);
  --theme-button-min-height: var(--mav-btn-min-height);

  --theme-form-field-border-initial-color: var(--brand-border);
  --theme-form-field-border-focus-color: var(--brand-primary);
  --theme-form-selection-condition-initial-color: var(--brand-primary);

  --theme-normal-container-max-width: var(--mav-container-max);
  --theme-narrow-container-max-width: var(--mav-container-narrow);
  --theme-content-vertical-spacing: var(--mav-content-space-desk);

  --theme-font-family: var(--brand-font-body);
  --theme-font-size: var(--mav-body-size);
  --theme-line-height: var(--mav-body-lh);
  --theme-heading-font-family: var(--brand-font-heading);

  /* --- Elementor globals -------------------------------------------------
     Set here so the Kit inherits rather than holding its own copy. Weights
     match Reforged: 800 display, 700 heading, 400 body, 600 accent. */

  --e-global-color-primary: var(--brand-primary);
  --e-global-color-secondary: var(--brand-secondary);
  --e-global-color-text: var(--brand-text);
  --e-global-color-accent: var(--brand-accent-ink);

  --e-global-typography-primary-font-family: var(--brand-font-display);
  --e-global-typography-primary-font-weight: 800;
  --e-global-typography-secondary-font-family: var(--brand-font-heading);
  --e-global-typography-secondary-font-weight: 700;
  --e-global-typography-text-font-family: var(--brand-font-body);
  --e-global-typography-text-font-weight: 400;
  --e-global-typography-accent-font-family: var(--brand-font-accent);
  --e-global-typography-accent-font-weight: 600;
}

/* --- Surface context ----------------------------------------------------
   The base is white. A section marked .mav-dark is an inverted band on the
   navy deep surface: the footer, the gate, any full-bleed strip. Orange
   passes as text again on navy, so the accent flips back to it there, and
   the blue lightens because #0054FE is only 3.51 on navy.

   Everything downstream reads --brand-accent-current and never picks. */

:root,
.mav-light {
  --brand-accent-current: var(--brand-accent-ink);
}

.mav-dark {
  --brand-accent-current: var(--brand-accent);
  --theme-palette-color-6: var(--brand-surface-deep);
  --theme-text-color: var(--brand-text-inverse);
  --theme-headings-color: var(--brand-text-inverse);
  --theme-link-initial-color: var(--brand-link-on-deep);
  --theme-link-hover-color: var(--brand-accent);
  --theme-border-color: rgb(255 255 255 / 0.14);
  background-color: var(--brand-surface-deep);
  color: var(--brand-text-inverse);
}

/* --- The footer is an inverted band ---
   Blocksy paints footer.ct-footer from var(--theme-palette-color-6)
   with a selector that outranks a plain component rule, so the
   component layer cannot win this by declaring a background. It is
   assigned here instead, scoped to the footer, which is the bridge's
   job: Blocksy keeps painting, it just paints with the deep surface. */

footer.ct-footer {
  --theme-palette-color-6: var(--brand-surface-deep);
  --theme-palette-color-7: var(--brand-surface-deep);
  --theme-palette-color-8: var(--brand-surface-deep);
  --theme-text-color: var(--brand-text-inverse);
  --theme-headings-color: var(--brand-text-inverse);
  --theme-link-initial-color: var(--brand-text-inverse);
  --theme-link-hover-color: var(--brand-accent);
  --theme-border-color: rgb(255 255 255 / 0.14);
}

/* --- The active navigation item -----------------------------------------
   Third time this pattern has shown up, so it is worth naming plainly:
   anything Blocksy paints for itself is fed a variable here, never given a
   colour in the component file. A current menu item is painted from
   --theme-link-active-color by a selector components.css cannot outrank.

   This keeps exactly the colour already on screen. It only makes it a
   decision. Rest is the ink grey, hover is the blue at 5.68:1, active is the
   darker blue at 9.16:1. */

header.ct-header {
  --theme-link-active-color: var(--brand-link-hover);
}