/* ==========================================================================
   Ransack Viking - Forged Petrol
   Design tokens v7. Definitions only - renders nothing on its own.
   Source of truth: the active Novamira design "ransack-viking-forged-petrol".

   WHY v2 EXISTS
   tokens-1.css declared the DARK "Forge" palette (near-black grounds, ember
   #FF5A1F accent, bone as primary text). That direction was rejected; petrol
   is locked. Nothing consumed those tokens - every colour in the live CSS was
   hardcoded - so this file replaces them with no visual risk and gives the
   block library one real source of truth to build on.

   Type sizes are px, not rem: Woodmart sets a root font-size of roughly 93%,
   so a rem scale silently renders about 7% small.

   Versioned in the FILENAME because LiteSpeed has "Remove Query Strings" on
   and strips the ?ver= cache-buster. Bump to tokens-3.css to publish a change.
   ========================================================================== */

:root {

  /* --- Grounds. Petrol is a DARK colour: it only works on light grounds. --- */
  --rv-bg:          #FFFFFF;  /* page ground */
  --rv-surface:     #F2F5F4;  /* second light ground, for section rhythm */
  --rv-petrol:      #062930;  /* full-bleed dark ground AND the single accent */
  --rv-petrol-deep: #041D22;  /* one step darker, for petrol-on-petrol panels */

  /* --- Ink on light grounds. Off-black biased to the petrol hue. --- */
  --rv-ink:         #1A1F1E;  /* headings, primary text */
  --rv-ink-soft:    #4A5654;  /* body copy */
  --rv-ink-muted:   #5F6B69;  /* captions, meta, supporting */

  /* --- Ink on petrol grounds --- */
  --rv-bone:        #EDEAE2;  /* primary text on petrol */
  --rv-bone-muted:  #B9C4C2;  /* the ONLY supporting text colour on petrol */

  /* --- Accent. One, locked. No brass, no gold, no second accent. --- */
  --rv-accent:      #062930;
  --rv-on-accent:   #EDEAE2;

  /* --- Derived alphas. Rules above a block, not borders around one. --- */
  --rv-hairline:        rgba(6, 41, 48, 0.14);   /* on light grounds */
  --rv-hairline-strong: rgba(6, 41, 48, 0.26);
  --rv-hairline-bone:   rgba(237, 234, 226, 0.22); /* on petrol grounds */
  --rv-hairline-bone-strong: rgba(237, 234, 226, 0.40);
  --rv-wash:            rgba(6, 41, 48, 0.05);   /* faintest petrol tint */
  --rv-scrim:           rgba(6, 41, 48, 0.72);   /* petrol over photography */

  /* --- The one non-palette colour: form and checkout error state. A store
     cannot signal a failed payment in petrol. Declared in the design document
     so it is a chosen exception, not drift. --- */
  --rv-error:           #8A2A1B;

  /* --- Type families. Serif ONLY for Cinzel display, never body. --- */
  --rv-font-display: "Cinzel", Georgia, serif;
  --rv-font-heading: "hkgroteskpro", Arial, Helvetica, sans-serif;
  --rv-font-body:    "Jost", Arial, Helvetica, sans-serif;

  /* --- Type scale --- */
  --rv-text-xs:   12px;  /* eyebrows and micro-labels only */
  --rv-text-sm:   15px;  /* captions, meta, button labels */
  --rv-text-base: 17px;  /* body floor */
  --rv-text-lg:   19px;  /* lead paragraphs */
  --rv-text-xl:   22px;
  --rv-text-2xl:  30px;
  --rv-text-3xl:  40px;
  --rv-text-4xl:  54px;  /* display */

  /* --- Leading. Display tight, body measured. --- */
  --rv-leading-display: 1.08;
  --rv-leading-heading: 1.15;
  --rv-leading-body:    1.75;

  /* --- Tracking --- */
  --rv-tracking-display: 0.015em;
  --rv-tracking-label:   0.08em;
  --rv-tracking-eyebrow: 0.18em;

  /* --- Measure: 60-70 characters --- */
  --rv-measure:      66ch;
  --rv-measure-tight: 54ch;

  /* --- Spacing. density dial 0.35: moderately airy. --- */
  --rv-space-2xs: 6px;
  --rv-space-xs:  10px;
  --rv-space-sm:  16px;
  --rv-space-md:  20px;
  --rv-space-lg:  40px;
  --rv-space-xl:  64px;
  --rv-space-2xl: 96px;   /* section vertical rhythm, desktop */

  /* --- Radius. One scale: 5px forms, 8px everything else. --- */
  --rv-radius-sm: 5px;   /* form fields, matching --wd-form-brd-radius */
  --rv-radius-md: 8px;   /* buttons, cards, images, panels */

  /* --- Layout --- */
  /* Must match Woodmart's site_custom_width, now 1660px. At 1140 every injected
     section sat narrower than the theme's own content, which read as
     off-centre against the header, product grid and footer. */
  --rv-container: 1860px;
  --rv-container-wide: 1900px;
  --rv-gutter: 20px;

  /* --- Motion. Dial 0.2: restrained. Transform and opacity only. --- */
  --rv-ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --rv-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --rv-duration-fast: 160ms;
  --rv-duration-base: 240ms;

  /* --- Z-index scale --- */
  --rv-z-base:   10;
  --rv-z-sticky: 20;
  --rv-z-drawer: 30;
  --rv-z-modal:  50;
}

@media (min-width: 1024px) {
  :root {
    --rv-text-base: 18px;
    --rv-text-3xl:  46px;
    --rv-text-4xl:  68px;
  }
}

@media (max-width: 767px) {
  :root {
    --rv-text-2xl:  26px;
    --rv-text-3xl:  32px;
    --rv-text-4xl:  38px;
    --rv-space-2xl: 56px;
    --rv-space-xl:  40px;
    --rv-gutter:    18px;
  }
}

/* Reduced motion collapses every duration to instant. Anything animated must
   remain fully visible without the animation. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --rv-duration-fast: 0ms;
    --rv-duration-base: 0ms;
  }
}