/* ==========================================================================
   01 TOKENS: the single source of truth for the GEOSEO look
   ==========================================================================

   Change a value here and it updates everywhere on the site that uses it.
   You should almost never need to open the other two CSS files.

   HOW THIS CONNECTS TO ELEMENTOR
   Where a token maps to an Elementor Global Colour, it is written as:

       var(--e-global-color-accent, #A93E17)

   That means: use whatever is set in Elementor, Site Settings, Global
   Colours. Only fall back to the hex if Elementor is unavailable. So
   changing the accent colour in the Elementor UI now also restyles the
   custom sections, which previously had their own hardcoded copy.

   NOTE ON THE ACCENT COLOUR
   Before this child theme, two slightly different accents were in use:
   the theme used #A93E17 and the hand written CSS used #A93F18. They are
   one step apart and indistinguishable on screen, but they were two
   sources of truth. They are now unified on the Elementor global.
   ========================================================================== */

:root {

  /* --- Brand ------------------------------------------------------------ */
  --geo-accent:            var(--e-global-color-accent, #A93E17);
  --geo-accent-hover:      #C44A1E;
  --geo-accent-pressed:    #8C3212;
  --geo-accent-secondary:  var(--e-global-color-accentsecondary, #15399A);

  /* --- Surfaces ---------------------------------------------------------
     The parent theme's page background is near black (#060606). The custom
     sections use a slightly blue tinted dark instead. That mismatch was
     deliberate in places and accidental in others. Both are tokenised here
     so you can align them if you want a single background.              */
  --geo-bg-page:           var(--e-global-color-background, #060606);
  --geo-bg-deep:           #0D0E18;   /* GEO audit page background       */
  --geo-surface:           #13151F;   /* cards, cover panels             */
  --geo-surface-alt:       #1A1D2E;   /* inputs, badges, inset panels    */
  --geo-surface-chip:      #192B48;   /* capability chips                */

  /* --- Borders ---------------------------------------------------------- */
  --geo-border:            #1E2135;
  --geo-border-strong:     #2A2E45;
  --geo-border-chip:       #2A4070;
  --geo-border-input:      #2E3150;

  /* --- Text ------------------------------------------------------------- */
  --geo-text-bright:       #FFFFFF;
  --geo-text-body:         #E8ECF2;
  --geo-text-soft:         #B0BACA;
  --geo-text-muted:        #8B9AB2;
  --geo-text-dim:          #6B7A99;
  --geo-text-faint:        #4A516A;
  --geo-text-chip:         #A8BCDA;
  --geo-text-on-accent:    #FFFFFF;
  --geo-text-on-light:     #0D0E18;

  /* --- Form fields on light cards --------------------------------------- */
  --geo-input-light-bg:     #FFFFFF;
  --geo-input-light-border: #D0D5E0;

  /* --- Status ----------------------------------------------------------- */
  --geo-success:           #4CAF50;
  --geo-success-bg:        #1A3A1A;
  --geo-error:             #E05A3A;
  --geo-error-bg:          #3A1A1A;

  /* --- Typography -------------------------------------------------------
     Bound to Elementor's global typography so the Site Settings font
     picker stays authoritative. Previously "Manrope, sans-serif" was
     written out 21 separate times in the Customiser CSS.               */
  --geo-font:              var(--e-global-typography-text-font-family, "Manrope", sans-serif);
  --geo-font-heading:      var(--e-global-typography-primary-font-family, "Manrope", sans-serif);

  --geo-fs-hero:           52px;
  --geo-fs-h2:             30px;
  --geo-fs-h3:             22px;
  --geo-fs-h4:             20px;
  --geo-fs-lead:           17px;
  --geo-fs-body:           15px;
  --geo-fs-small:          14px;
  --geo-fs-fine:           13px;
  --geo-fs-label:          12px;
  --geo-fs-micro:          11px;

  --geo-fw-normal:         400;
  --geo-fw-medium:         500;
  --geo-fw-semi:           600;
  --geo-fw-bold:           700;
  --geo-fw-black:          800;

  --geo-lh-tight:          1.1;
  --geo-lh-heading:        1.25;
  --geo-lh-body:           1.7;
  --geo-lh-loose:          1.8;

  /* --- Spacing ---------------------------------------------------------- */
  --geo-space-xs:          8px;
  --geo-space-sm:          12px;
  --geo-space-md:          20px;
  --geo-space-lg:          32px;
  --geo-space-xl:          48px;
  --geo-space-2xl:         60px;

  /* --- Shape ------------------------------------------------------------ */
  --geo-radius-sm:         6px;
  --geo-radius-md:         8px;
  --geo-radius-lg:         12px;
  --geo-radius-xl:         16px;
  --geo-radius-pill:       20px;

  /* --- Layout ----------------------------------------------------------- */
  --geo-container:         920px;

  /* --- Motion ------------------------------------------------------------
     One duration and one easing, so hover states feel like one system. */
  --geo-transition:        0.2s ease;
}

/* Respect the operating system's reduced motion setting.
   The parent theme ships GSAP, ScrollTrigger, SplitText and a magic
   cursor, none of which check this. This will not stop the JS, but it
   removes CSS transitions and is the correct baseline. */
@media (prefers-reduced-motion: reduce) {
  :root { --geo-transition: 0s; }
}