/* ==========================================================================
   Red Dunes — token ALIAS layer (theme build)
   GENERATED from mockups/css/tokens.css. Do not hand-edit; regenerate instead.

   Makes the mockups' --rd-* tokens point at theme.json's --wp--preset--* variables, so
   a value changed in the Site Editor's Styles panel actually reaches the components.

   NOTE the font-size slugs are h-1/h-2/h-3, not h1/h2/h3: WordPress kebab-cases preset
   slugs, so "h1" is emitted as --wp--preset--font-size--h-1. Referencing --h1 silently
   resolves to nothing and every heading loses its size.
   ========================================================================== */
:root {
  color-scheme: light;

  /* ---- Colour ---------------------------------------------------------- */
  --rd-rust:        var(--wp--preset--color--rust);   /* primary: actions, eyebrows, active state  */
  --rd-rust-700:    var(--wp--preset--color--rust-700);   /* hover / pressed                           */
  --rd-rust-050:    var(--wp--preset--color--rust-050);   /* tint for chips + icon plates              */
  --rd-espresso:    var(--wp--preset--color--espresso);   /* headings                                  */
  --rd-slate:       var(--wp--preset--color--slate);   /* body text                                 */
  --rd-slate-600:   var(--wp--preset--color--slate-600);   /* secondary text                            */
  --rd-slate-400:   var(--wp--preset--color--slate-400);   /* meta, captions — AA on page/sand/sand-200 */
  --rd-sand:        var(--wp--preset--color--sand);   /* section background                        */
  --rd-sand-200:    var(--wp--preset--color--sand-200);   /* raised surface on sand                    */
  --rd-line:        var(--wp--preset--color--line);   /* borders                                   */
  --rd-line-soft:   var(--wp--preset--color--line-soft);
  --rd-page:        var(--wp--preset--color--page);   /* page background                           */
  --rd-white:       var(--wp--preset--color--white);
  --rd-wa:          var(--wp--preset--color--whatsapp);   /* WhatsApp — functional colour only         */
  --rd-wa-700:      #138A46;

  /* Social brands — used only on hover, so a link carries its own colour.
     The -on-dark pair is for the espresso top bar, where the real red and
     blue fall under 4.5:1 against #281919. */
  --rd-ig:          #E1306C;
  --rd-ig-grad:     linear-gradient(45deg, #F9CE34, #EE2A7B 45%, #6228D7);
  --rd-yt:          #FF0000;
  --rd-fb:          #1877F2;
  /* Footer pills rest in the brand colour with a white label. The true brand values
     are all just under AA on white (IG 4.34, YT 4.00, FB 4.23), so each is darkened the
     few per cent that clears 4.5:1 — indistinguishable from the real colour. No gradient
     here: the Instagram gradient's yellow end is 1.51:1 with white. */
  --rd-ig-pill:     #DC2F6A;   /* 4.51:1 on white */
  --rd-yt-pill:     #ED0000;   /* 4.56:1 on white */
  --rd-fb-pill:     #1772E8;   /* 4.56:1 on white */
  --rd-ig-on-dark:  #FF7FA8;
  --rd-yt-on-dark:  #FF5A5A;
  --rd-fb-on-dark:  #6FA8FF;
  --rd-star:        #B37400;   /* review stars — 3:1 as a graphic on page    */
  --rd-on-dark:     var(--wp--preset--color--on-dark);   /* body text on espresso                     */
  --rd-on-dark-dim: #C3B4AB;   /* meta on espresso, still AA                */
  --rd-on-dark-soft:#AC9C93;   /* inactive items on espresso, still AA      */
  --rd-night:       var(--wp--preset--color--night);   /* hero scrim base                           */

  /* ---- Type ------------------------------------------------------------ */
  --rd-font: var(--wp--preset--font-family--system);

  --rd-step--1: var(--wp--preset--font-size--meta);   /* 14px  meta, chips          */
  --rd-step-0:  var(--wp--preset--font-size--base);  /* 17px  body — handbook base */
  --rd-step-1:  var(--wp--preset--font-size--lead);  /* 19px  lead-in              */
  --rd-step-2:  var(--wp--preset--font-size--title);   /* 22px  card titles          */
  --rd-step-3:  var(--wp--preset--font-size--h-3);
  --rd-step-4:  var(--wp--preset--font-size--h-2);   /* section h2 */
  --rd-step-5:  var(--wp--preset--font-size--h-1);   /* hero h1    */

  --rd-tracking-tight: -0.022em;  /* handbook: headline tracking */
  --rd-leading-tight:  1.08;
  --rd-leading-snug:   1.25;
  --rd-leading-body:   1.6;

  /* ---- Space (8px scale) ----------------------------------------------- */
  --rd-sp-1: var(--wp--preset--spacing--10);   --rd-sp-2: var(--wp--preset--spacing--20);   --rd-sp-3: var(--wp--preset--spacing--30);  --rd-sp-4: var(--wp--preset--spacing--40);
  --rd-sp-5: var(--wp--preset--spacing--50);  --rd-sp-6: var(--wp--preset--spacing--60);  --rd-sp-7: var(--wp--preset--spacing--70);  --rd-sp-8: var(--wp--preset--spacing--80);
  --rd-sp-9: var(--wp--preset--spacing--90);  --rd-sp-10: var(--wp--preset--spacing--100);

  --rd-section-y: var(--wp--preset--spacing--section);   /* generous vertical rhythm */
  --rd-wrap: 1200px;
  --rd-wrap-narrow: 760px;
  --rd-gutter: clamp(16px, 4vw, 32px);

  /* ---- Shape ----------------------------------------------------------- */
  --rd-radius-card: 14px;   /* handbook */
  --rd-radius-sm: 10px;
  --rd-radius-pill: 999px;
  --rd-tap: 50px;           /* handbook: minimum tap target */

  /* ---- Elevation ------------------------------------------------------- */
  --rd-shadow-sm: var(--wp--preset--shadow--sm);
  --rd-shadow-md: var(--wp--preset--shadow--md);
  --rd-shadow-lg: var(--wp--preset--shadow--lg);

  /* ---- Motion — transform/opacity only. No parallax, no scroll JS. ----- */
  --rd-ease: cubic-bezier(.2, .7, .3, 1);
  --rd-fast: 120ms;
  --rd-base: 200ms;
  --rd-slow: 400ms;   /* image zoom, panel reveal */
}