/* ============================================================================
   Bedrock Energy Corp — design tokens
   ----------------------------------------------------------------------------
   THE SHARED LAYER. This file is loaded by both halves of the site:

     · the static homepage (template-home.php / index.html)
     · every Elementor page, via the child theme's enqueue

   Elementor's Global Colours and Global Fonts must be pointed at the SAME
   values (see docs/elementor-globals.md). If someone changes a brand colour in
   the Elementor UI instead of here, the two halves drift apart within two
   edits. This file is the single source of truth; Elementor only mirrors it.

   Nothing in here is a component. Components live in components.css.
   ========================================================================== */

:root {

  /* --- Brand palette ------------------------------------------------------
     Sampled from the live site, not invented. Petrol is the anchor; the two
     greens are kept separate because they are genuinely different hues in the
     existing brand — bright is the logo/CTA green, deep is the footer band. */

  --bd-petrol:          #002838;   /* primary dark — bands, headings on light */
  --bd-petrol-deep:     #001C27;   /* pressed states, band-on-band layering   */
  --bd-petrol-soft:     #0A3B4F;   /* hairlines and dividers inside dark bands*/

  --bd-green:           #00AB67;   /* deep green — footer band, area fills    */
  --bd-green-bright:    #0CA750;   /* logo/CTA green — interactive only       */
  --bd-blue:            #0075BF;   /* logo blue — secondary action, links     */
  --bd-yellow:          #FDF03B;   /* accent — the numbers band, sparingly    */

  --bd-ink:             #201E20;   /* body copy on light                      */
  --bd-ink-soft:        #5F5F5F;   /* secondary copy, captions                */
  --bd-paper:           #FAFAFA;   /* the light alternate band                */
  --bd-white:           #FFFFFF;
  --bd-rule:            #E4E7E9;   /* hairlines on light                      */

  /* Shadow face of the porous pattern. Sampled from the original artwork —
     this exact grey is what makes the isometric blocks read as solid. */
  --bd-porous-shade:    #E5E5E5;

  /* --- Semantic surfaces --------------------------------------------------
     Components reference these, never the raw brand colours above. Swapping a
     band from paper to petrol is then one declaration, not a rewrite. */

  --bd-surface:         var(--bd-white);
  --bd-surface-alt:     var(--bd-paper);
  --bd-surface-dark:    var(--bd-petrol);
  --bd-text:            var(--bd-ink);
  --bd-text-soft:       var(--bd-ink-soft);
  --bd-text-on-dark:    var(--bd-white);
  --bd-text-on-dark-soft: rgba(255, 255, 255, 0.72);
  --bd-accent:          var(--bd-green-bright);
  --bd-accent-ink:      var(--bd-white);   /* text sitting on --bd-accent */

  /* --- Type ------------------------------------------------------------ */

  /* Manrope, replacing Raleway. A rounded geometric with generous apertures —
     warmer than a grotesque, which suits a company running public open houses,
     and it holds together at 800 where Raleway went soft.

     Swapping family is one line here; nothing downstream names a font. */
  --bd-font-display: 'Manrope', ui-sans-serif, system-ui, 'Helvetica Neue', Arial, sans-serif;
  --bd-font-body:    'Manrope', ui-sans-serif, system-ui, 'Helvetica Neue', Arial, sans-serif;
  --bd-font-ui:      'Manrope', ui-sans-serif, system-ui, 'Helvetica Neue', Arial, sans-serif;

  /* Mono carries every small uppercase label, section index and figure. This
     is the most modernising move in the refresh and the cheapest: wide-tracked
     mono at 11-12px reads current and technical where wide-tracked sans reads
     like a 2014 lifestyle brand. */
  --bd-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Tabular figures stop the count-up animation jittering its own width. */
  --bd-font-numeric:  var(--bd-font-display);
  --bd-numeric-feat:  'tnum' 1, 'lnum' 1;

  /* Fluid display scale. clamp() keeps the pinned sections legible at 390px
     without a media query per section. */
  --bd-size-hero:     clamp(2rem, 1.15rem + 2.72vw, 3.375rem);   /*  32 → 54 */
  --bd-size-display:  clamp(1.75rem, 1.20rem + 1.76vw, 2.625rem); /*  28 → 42 */
  --bd-size-title:    clamp(1.25rem, 1.05rem + 0.64vw, 1.625rem); /*  20 → 26 */
  --bd-size-sub:      clamp(1.0625rem, 1.00rem + 0.20vw, 1.1875rem); /* 17 → 19 */
  --bd-size-body:     1rem;                                       /*      16 */
  --bd-size-small:    0.90625rem;                                 /*    14.5 */
  --bd-size-eyebrow:  0.71875rem;                                 /*    11.5 */

  --bd-weight-display: 800;
  --bd-weight-title:   700;
  --bd-weight-body:    400;
  --bd-weight-strong:  600;

  /* Archivo tolerates — and wants — more negative tracking than Raleway did.
     Large display type set near 0 looks loose in a grotesque. */
  --bd-track-hero:     -0.038em;
  --bd-track-display:  -0.03em;
  --bd-track-title:    -0.02em;
  --bd-track-body:     -0.008em;
  --bd-track-eyebrow:   0.16em;   /* mono, so far less tracking is needed */

  --bd-leading-hero:    1.04;
  --bd-leading-display: 1.10;
  --bd-leading-title:   1.26;
  --bd-leading-body:    1.6;

  /* --- Space --------------------------------------------------------------
     A 4px base. Section rhythm is deliberately large: the structure being
     borrowed leans on long, calm bands between the two pinned sequences. */

  --bd-s1:  0.25rem;   --bd-s2:  0.5rem;    --bd-s3:  0.75rem;
  --bd-s4:  1rem;      --bd-s5:  1.5rem;    --bd-s6:  2rem;
  --bd-s7:  3rem;      --bd-s8:  4rem;      --bd-s9:  6rem;
  --bd-s10: 8rem;

  --bd-band-y:      clamp(4rem, 2.5rem + 4.8vw, 7.5rem);  /* band padding-block */
  --bd-gutter:      clamp(1.25rem, 0.75rem + 1.6vw, 2.5rem);
  --bd-measure:     68ch;      /* long-form reading width */

  /* Rendered width of the logo in the header bar. Page content is inset by
     this plus the bar's own padding, so text begins at the logo's RIGHT edge
     and is held the same distance off the right. Measured, not guessed: the
     mark renders 122px wide at its 48px slot. */
  --bd-logo-w:      122px;
  --bd-content:     1200px;    /* matches the existing wide-size */
  --bd-content-narrow: 800px;  /* matches the existing content-size */

  /* --- Shape --------------------------------------------------------------
     The asymmetric corner is the one distinctive shape already in the brand
     (50px 25px 50px 0); it is kept and formalised as the "quarry" corner. */

  --bd-radius:        6px;
  --bd-radius-sm:     3px;
  --bd-radius-lg:     12px;   /* media blocks — larger radii read current */
  --bd-radius-pill:   999px;
  --bd-radius-quarry: 50px 25px 50px 0;

  /* The button. The live site's hard green offset was the most dated element
     on the page — a flat-design device that reads as 2016 — so it is retired
     from the default. Buttons now sit on a soft radius and answer a hover by
     lifting a single pixel into a real shadow.

     The offset is not deleted: `bd-btn--offset` keeps it for a hero CTA where
     the brand cue is wanted deliberately, rather than on every control. */
  --bd-btn-radius:  8px;
  --bd-btn-offset:  2px 5px 0 0 var(--bd-green-bright);

  --bd-border:        1px solid var(--bd-rule);
  --bd-border-dark:   1px solid var(--bd-petrol-soft);

  /* Elevation is used sparingly — the porous pattern does the visual work. */
  /* Negative spread on the wide layer. A blur with no spread reduction spills
     a grey halo past the element's footprint and reads soft and dated; pulling
     the spread in keeps the shadow under the object where it belongs. */
  --bd-shadow-sm: 0 1px 2px rgba(0, 40, 56, 0.05);
  --bd-shadow-md: 0 1px 2px rgba(0, 40, 56, 0.04),
                  0 10px 24px -10px rgba(0, 40, 56, 0.18);
  --bd-shadow-lg: 0 2px 6px rgba(0, 40, 56, 0.05),
                  0 28px 56px -20px rgba(0, 40, 56, 0.24);

  /* Focus ring, as its own token so every component agrees. */
  --bd-ring: rgba(12, 167, 80, 0.34);

  /* --- Porous pattern geometry -------------------------------------------
     The divider SVGs are generated on a 30° isometric lattice (tools/porous.py).
     These two values must match the generator's constants or the CSS-side
     masks will not line up with the artwork.  cos30 = 0.86603, sin30 = 0.5 */

  --bd-porous-unit:   60px;   /* cube edge length in the source artwork */
  --bd-porous-height: clamp(48px, 4vw, 96px);  /* rendered divider height */

  /* --- Texture ------------------------------------------------------------
     A hairline lattice for the white bands, so large light areas have a
     surface instead of being blank. Two repeating gradients crossing at ±30°
     produce a rhombille grid — the same isometric geometry the porous spreads
     are drawn on, which is why it reads as part of the brand rather than as a
     generic pattern overlay.

     Pure CSS: no asset, no request, and it stays crisp at any zoom or density
     where a tiled PNG would blur.

     3% is deliberate. At 6% it becomes a pattern you look at; at 3% it is a
     surface you feel. If it is obvious in a screenshot it is too strong. */
  --bd-texture-cell: 34px;
  --bd-texture-ink:  color-mix(in srgb, var(--bd-petrol) 3%, transparent);

  /* --- Motion -------------------------------------------------------------
     Durations are short; the long scroll sequences carry the motion budget.
     Every transition here is interruptible and none of them loop. */

  --bd-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --bd-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --bd-dur-fast:    140ms;
  --bd-dur:         240ms;
  --bd-dur-slow:    480ms;

  --bd-z-band: 1;
  --bd-z-sticky: 10;
  --bd-z-header: 100;
  --bd-z-overlay: 1000;
}

/* Anyone who has asked their OS to stop animation gets a static site. The
   pinned sequences still work — they simply jump to their end state instead
   of tweening, so no content becomes unreachable. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bd-dur-fast: 1ms;
    --bd-dur: 1ms;
    --bd-dur-slow: 1ms;
  }
}