/* =====================================================
   Roam & Brew Widgets — Base / Design Tokens
   Loaded on every page, defines CSS variables & resets.
   ===================================================== */

:root {
    /* Colors — Coffee palette (edit here to rebrand) */
    --rb-primary:        #A47B52;   /* warm coffee brown */
    --rb-primary-dark:   #7A5A3A;
    --rb-primary-light:  #C49A75;

    --rb-accent:         #F2B137;   /* mustard gold */
    --rb-accent-dark:    #D49520;

    --rb-cream:          #F5EFE6;   /* cream background */
    --rb-cream-dark:     #EBE2D3;

    --rb-dark:           #1F1B16;   /* primary text */
    --rb-dark-soft:      #3D352B;
    --rb-muted:          #6B6155;
    --rb-light:          #FFFFFF;
    --rb-border:         #E5DCC9;

    /* Typography */
    --rb-font-heading:   'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --rb-font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing — 8px scale */
    --rb-space-1:  4px;
    --rb-space-2:  8px;
    --rb-space-3:  16px;
    --rb-space-4:  24px;
    --rb-space-5:  32px;
    --rb-space-6:  40px;
    --rb-space-7:  48px;
    --rb-space-8:  64px;
    --rb-space-9:  80px;
    --rb-space-10: 96px;

    /* Radius */
    --rb-radius-sm: 6px;
    --rb-radius-md: 12px;
    --rb-radius-lg: 20px;
    --rb-radius-pill: 999px;

    /* Shadows */
    --rb-shadow-sm: 0 2px 8px rgba(31, 27, 22, 0.06);
    --rb-shadow-md: 0 8px 24px rgba(31, 27, 22, 0.10);
    --rb-shadow-lg: 0 20px 48px rgba(31, 27, 22, 0.14);

    /* Motion */
    --rb-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --rb-transition-fast: all 0.15s ease-out;
}

/* ---------- Isolation guards ----------
   Force theme/Elementor not to bleed pink, blue, etc.
   ANY element inside .rb- wrappers inherits the right tokens.
*/
[class*="rb-"] {
    box-sizing: border-box;
}

[class*="rb-"] *,
[class*="rb-"] *::before,
[class*="rb-"] *::after {
    box-sizing: border-box;
}

.elementor-page [class*="rb-widget-"],
.e-con [class*="rb-widget-"],
.elementor-widget-container [class*="rb-widget-"] {
    color: var(--rb-dark);
    font-family: var(--rb-font-body);
    line-height: 1.6;
}

[class*="rb-widget-"] h1,
[class*="rb-widget-"] h2,
[class*="rb-widget-"] h3,
[class*="rb-widget-"] h4,
[class*="rb-widget-"] h5,
[class*="rb-widget-"] h6 {
    font-family: var(--rb-font-heading);
    color: var(--rb-dark) ;
    line-height: 1.2;
    margin: 0;
}

[class*="rb-widget-"] p {
    margin: 0;
}

[class*="rb-widget-"] a {
    text-decoration: none;
    color: var(--rb-primary);
    transition: var(--rb-transition);
}

[class*="rb-widget-"] a:hover {
    color: var(--rb-primary-dark);
}

[class*="rb-widget-"] img {
    max-width: 100%;
    height: auto;
    display: block;
}

[class*="rb-widget-"] button {
    font-family: inherit;
    cursor: pointer;
}

/* ---------- Theme button isolation ----------
   WP themes (Hello Elementor, Twenty Twenty-X, etc.) often paint <button>
   elements with their accent color via background-image gradients and
   text-shadow. Strip those so our explicit background-color rules win.
*/
.rb-header button,
.rb-hero button,
.rb-tm button,
.rb-order button,
.rb-footer button,
.rb-cta button,
.rb-features button,
.rb-menu button,
.rb-team button,
.rb-stats button,
.rb-hl button,
.rb-about button,
[class*="rb-widget-"] button {
    background-image: none !important;
    text-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.rb-header button:hover, .rb-header button:focus, .rb-header button:active,
.rb-hero button:hover,   .rb-hero button:focus,   .rb-hero button:active,
.rb-tm button:hover,     .rb-tm button:focus,     .rb-tm button:active,
.rb-order button:hover,  .rb-order button:focus,  .rb-order button:active,
.rb-footer button:hover, .rb-footer button:focus, .rb-footer button:active,
.rb-cta button:hover,    .rb-cta button:focus,    .rb-cta button:active {
    background-image: none !important;
    text-shadow: none !important;
}

/* Utility */
.rb-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}