/* ==========================================================================
   variables.css  —  design tokens
   Reva Enterprises. Every value the site uses lives here.
   Responsive overrides redeclare tokens; they never restyle components.
   ========================================================================== */

:root {

  /* ---- Brand colours (from brand kit) ------------------------------------ */
  --c-navy:            #003366;
  --c-terracotta:      #FF7B0F;   /* brand orange                            */
  --c-cream:           #F8F5EC;

  /* ---- Derived navy ramp -------------------------------------------------
     Brand kit defines one navy only. These are tints/shades of #003366 used
     for surfaces, borders, hovers and the logo's secondary blue.            */
  --c-navy-900:        #00223F;   /* deepest — footer base                   */
  --c-navy-800:        #002B52;   /* card surface on navy                    */
  --c-navy-700:        #003D78;   /* navy button hover                       */
  --c-navy-500:        #1B6FC0;   /* logo mark secondary blue, icon accents  */
  --c-navy-200:        #A8C6E2;
  --c-navy-100:        #D4E5F3;   /* pale blue — brand kit board background  */
  --c-navy-050:        #EDF4FA;

  /* ---- Derived terracotta ramp ------------------------------------------ */
  --c-terracotta-700:  #CC6209;
  --c-terracotta-600:  #E86F0C;   /* hover                                   */
  --c-terracotta-200:  #FFCFA8;
  --c-terracotta-100:  #FFE8D3;

  /* ---- Neutrals ---------------------------------------------------------- */
  --c-white:           #FFFFFF;
  --c-ink:             #10213A;   /* body copy on light                      */
  --c-ink-muted:       #4B5D75;   /* secondary copy                          */
  --c-ink-faint:       #8496AC;
  --c-line:            rgba(0, 51, 102, 0.12);
  --c-line-strong:     rgba(0, 51, 102, 0.22);
  --c-line-on-dark:    rgba(255, 255, 255, 0.18);
  --c-mist:            #EFEFEF;   /* product pages: feature card, applications band */
  --c-error:           #B3261E;   /* form validation                             */
  --c-slate-200:       #CBD6E2;   /* product pages: grade pills                  */

  /* ---- Semantic roles ---------------------------------------------------- */
  --bg-page:           var(--c-cream);
  --bg-surface:        var(--c-white);
  --bg-deep:           var(--c-navy);
  --text-default:      var(--c-ink);
  --text-muted:        var(--c-ink-muted);
  --text-on-dark:      var(--c-white);
  --text-on-dark-mut:  rgba(255, 255, 255, 0.78);
  --accent:            var(--c-terracotta);

  /* ---- Typography -------------------------------------------------------- */
  --font-head:  "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-body:  "Urbanist", "Helvetica Neue", Arial, sans-serif;

  --fw-body:      400;
  --fw-medium:    500;
  --fw-semi:      600;
  --fw-bold:      700;

  /* Type scale — desktop (1280 design base) */
  --fs-display:   58px;   /* hero h1                                         */
  --fs-h2:        40px;   /* section headings                                */
  --fs-h3:        22px;   /* feature card titles                             */
  --fs-h4:        19px;   /* product card titles                             */
  --fs-lead:      22px;   /* intro paragraphs                                */
  --fs-body:      21px;   /* body copy, 30% up on the comp's 16              */
  --fs-sm:        19px;
  --fs-xs:        17px;
  --fs-eyebrow:   18px;
  --eyebrow-rule: 160px;  /* the rule under an eyebrow label, from the comp */
  --fs-badge:     10.5px;
  --fs-btn:       15px;

  --lh-display:   1.1;
  --lh-heading:   1.18;
  --lh-snug:      1.35;
  --lh-body:      1.62;

  --ls-display:  -0.8px;
  --ls-heading:  -0.4px;
  --ls-badge:     0.9px;

  /* ---- Spacing scale (8px base) ------------------------------------------ */
  --s-1:    4px;
  --s-2:    8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-7:   32px;
  --s-8:   40px;
  --s-9:   48px;
  --s-10:  64px;
  --s-11:  80px;
  --s-12:  96px;
  --s-13: 120px;

  /* Vertical rhythm between sections */
  --section-y:        var(--s-13);
  --section-y-tight:  var(--s-11);

  /* ---- Layout ------------------------------------------------------------ */
  --shell-max:     1440px;  /* outer page frame: the hero frame plus its margin */
  --shell-pad:       24px;  /* inset that gives the rounded blocks their gap */
  --container-max: 1340px;  /* text/content column inside a band             */
  --block-pad-x:     56px;  /* inner padding of a rounded block              */
  --block-pad-y:     56px;
  --band-pad-y:      96px;  /* full-bleed bands carry their own breathing room */
  --band-pad-y-lg:  108px;  /* the product grid needs more, measured off the comp */

  /* Fixed heights that must clear their children */
  --nav-h:           64px;  /* must exceed the nav pill's content height     */
  /* The comp seats the header band 19px below the photograph's top edge, which
     is what drops the quote button inside the notch. */
  --nav-drop:        19px;

  /* ---- Hero frame --------------------------------------------------------
     The hero is one screen: the frame takes the viewport height less the cream
     margin above and below it, runs the full width of the page, and the
     photograph covers it. The supplied export is a plain rectangle, so the
     shape is drawn here — rounded corners on the frame, the quote-button notch
     as a page-coloured tile, the wordmark panel as the cream card.          */
  --wp-bar:           0px;  /* admin bar height when logged in, see below   */
  --hero-inset:      32px;  /* cream margin above the photo, from the comp    */
  --hero-tail:       24px;  /* and below it, before the next band            */
  --logo-inset:      28px;  /* logo's inset from the photo's edge, comp: 29  */

  /* Sized to clear the quote button plus its breathing room, and no more — the
     button is a fixed size, so these are too. Measured: button 157 wide, inset
     28 from the frame's edge, bottom 70 below its top. */
  --hero-notch-w:   212px;
  --hero-notch-h:    96px;

  /* The wordmark panel, measured off the comp's notch: a quarter of the
     frame's width, a bit over a quarter of its height. */
  --hero-card-w:      25%;
  --hero-card-h:    27.5%;

  /* ---- Radii ------------------------------------------------------------- */
  --r-xs:     8px;
  --r-sm:    12px;
  --r-md:    18px;
  --r-lg:    24px;
  --r-xl:    32px;
  --r-pill: 999px;

  /* ---- Elevation --------------------------------------------------------- */
  --shadow-sm:  0 2px 8px rgba(0, 34, 63, 0.06);
  --shadow-md:  0 10px 28px rgba(0, 34, 63, 0.10);
  --shadow-lg:  0 22px 48px rgba(0, 34, 63, 0.16);

  /* ---- Motion ------------------------------------------------------------
     Entrance and hover motion only ever animates transform and opacity.    */
  --t-fast:    160ms;
  --t-base:    280ms;
  --t-slow:    520ms;
  --t-reveal:  760ms;

  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-smooth:  cubic-bezier(0.40, 0.00, 0.20, 1);
  --ease-spring:  cubic-bezier(0.34, 1.30, 0.64, 1);

  --reveal-shift: 28px;   /* how far a revealing element travels             */
  --reveal-step:  90ms;   /* stagger between siblings                        */

  /* ---- Image placeholders ------------------------------------------------
     Stand in for the Figma exports so layout and motion read correctly
     before the real photography is dropped into assets/images/.            */
  --ph-quarry:  linear-gradient(135deg, #3C5670 0%, #56718C 45%, #7E6A5A 100%);
  --ph-earth:   linear-gradient(135deg, #9A6242 0%, #C08154 50%, #7E5236 100%);
  --ph-mineral: linear-gradient(135deg, #C9B7A4 0%, #E3D6C6 50%, #A89482 100%);
  --ph-plant:   linear-gradient(135deg, #24374D 0%, #3F5771 55%, #1B2938 100%);
  --ph-steel:   linear-gradient(135deg, #5A3020 0%, #A8552C 55%, #3A2016 100%);
}

/* ==========================================================================
   Responsive token overrides — redeclare values, never restyle components
   ========================================================================== */

/* WordPress pushes the whole page down by the admin bar for logged-in users,
   so a 100vh hero would run that far past the fold for them alone. */
.admin-bar { --wp-bar: 32px; }
@media screen and (max-width: 782px) { .admin-bar { --wp-bar: 46px; } }
@media screen and (max-width: 600px) { .admin-bar { --wp-bar: 0px; } }

/* The bar hands over to the burger here (sections.css), so from this width down
   the notch only has to clear the burger — 46px square, sitting 28 in from the
   frame's right edge and 8 below its top. These leave an even 22 on the two
   open sides, so it reads as a cut that hugs the button rather than a block. */
@media (max-width: 1060px) {
  :root {
    --hero-notch-w:  96px;
    --hero-notch-h:  76px;
  }
}

@media (max-width: 1180px) {
  :root {
    --fs-display:  46px;
    --fs-h2:       34px;
    --fs-lead:     20px;
    --block-pad-x: 40px;
    --block-pad-y: 44px;
    --band-pad-y:  76px;
    --band-pad-y-lg: 84px;
    --section-y:       var(--s-12);
    --section-y-tight: var(--s-10);
  }
}

@media (max-width: 900px) {
  :root {
    --fs-display:  38px;
    --fs-h2:       29px;
    --fs-h3:       20px;
    --fs-lead:     21px;
    --shell-pad:   16px;
    --block-pad-x: 28px;
    --block-pad-y: 36px;
    --band-pad-y:  60px;
    --band-pad-y-lg: 68px;
    --hero-inset:   16px;
    --hero-tail:    16px;
    --nav-drop:  var(--s-2);
    --section-y:       var(--s-11);
    --section-y-tight: var(--s-9);
    --reveal-shift: 20px;
  }
}

@media (max-width: 560px) {
  :root {
    --fs-display:  26px;
    --fs-h2:       25px;
    --fs-h3:       18px;
    --fs-h4:       17px;
    /* The 30% step up is kept, but eased at phone width: a 390px screen only
       fits ~26 characters a line at 20px, which is below a readable measure. */
    --fs-body:     18px;
    --fs-lead:     18px;
    --fs-sm:       16px;
    --fs-xs:       15px;
    --shell-pad:   12px;
    --block-pad-x: 20px;
    --block-pad-y: 28px;
    --band-pad-y:  48px;
    --band-pad-y-lg: 52px;
    --hero-inset:   12px;
    --r-xl:        24px;
    --r-lg:        18px;
    --section-y:       var(--s-10);
    --section-y-tight: var(--s-9);
  }
}