:root {
    /* Brand colours */
    --jrrs-color-primary: #1d6048;
    --jrrs-color-primary-dark: #154735;
    --jrrs-color-primary-light: #e5f0ea;
    --jrrs-color-accent: #5ea87e;

    /* Text colours */
    --jrrs-color-heading: #17221d;
    --jrrs-color-text: #39443e;
    --jrrs-color-muted: #727b76;
    --jrrs-color-white: #ffffff;

    /* Background colours */
    --jrrs-color-background: #f4f6f2;
    --jrrs-color-surface: #ffffff;
    --jrrs-color-border: #dfe5df;
    --jrrs-color-overlay: rgba(15, 35, 27, 0.48);

    /* Typography */
    --jrrs-font-family: "Segoe UI", Arial, sans-serif;
    --jrrs-font-weight-regular: 400;
    --jrrs-font-weight-medium: 500;
    --jrrs-font-weight-semibold: 600;
    --jrrs-font-weight-bold: 700;

    /* Border radius */
    --jrrs-radius-sm: 8px;
    --jrrs-radius-md: 12px;
    --jrrs-radius-lg: 20px;
    --jrrs-radius-xl: 30px;
    --jrrs-radius-pill: 999px;

    /* Spacing */
    --jrrs-space-1: 4px;
    --jrrs-space-2: 8px;
    --jrrs-space-3: 12px;
    --jrrs-space-4: 16px;
    --jrrs-space-5: 20px;
    --jrrs-space-6: 24px;
    --jrrs-space-8: 32px;
    --jrrs-space-10: 40px;
    --jrrs-space-12: 48px;

    /* Layout */
    --jrrs-container-width: 1240px;
    --jrrs-container-padding: 24px;
    --jrrs-navbar-height: 72px;

    /* Shadows */
    --jrrs-shadow-sm: 0 4px 15px rgba(23, 34, 29, 0.07);
    --jrrs-shadow-md: 0 12px 35px rgba(23, 34, 29, 0.12);

    /* Transitions */
    --jrrs-transition-fast: 160ms ease;
    --jrrs-transition-normal: 240ms ease;

    /* Layering */
    --jrrs-z-navbar: 1000;
    --jrrs-z-overlay: 990;
}

/* Homepage hero and reusable cards */
:root {
    --jrrs-color-hero-text: #ffffff;
    --jrrs-color-hero-overlay: rgba(20, 28, 22, 0.46);
    --jrrs-color-hero-overlay-edge: rgba(20, 28, 22, 0.22);
    --jrrs-color-product-section: #fbfdfb;
    --jrrs-color-card-background: #ffffff;
    --jrrs-color-card-action: #f5f4f2;
    --jrrs-color-card-border: #eceeea;

    --jrrs-radius-hero: 20px;
    --jrrs-radius-product-card: 22px;
    --jrrs-radius-product-image: 20px;
    --jrrs-radius-control: 50%;
}

/* Homepage reliability/about section */
:root {
    --jrrs-color-about-background: #f7f6f5;
    --jrrs-color-about-image-accent: #d9f2e3;

    --jrrs-radius-about-section: 22px;
    --jrrs-radius-about-image: 26px;
}

/* Testimonials */
:root {
    --jrrs-color-testimonial-background: #ffffff;
    --jrrs-color-testimonial-border: #e8e3de;
    --jrrs-color-testimonial-divider: #eeeae6;
    --jrrs-color-testimonial-star: #d8aa27;
    --jrrs-color-testimonial-quote: #777976;

    --jrrs-radius-testimonial-card: 22px;
}

/* Homepage contact section */
:root {
    --jrrs-color-contact-background: #f7f6f5;
    --jrrs-color-contact-card: #ffffff;

    --jrrs-color-validation-success-bg:
        var(--jrrs-color-validation-success-background);
    --jrrs-color-validation-error-bg:
        var(--jrrs-color-validation-error-background);

    --jrrs-radius-contact-section: 22px;
}

/* Footer shared by every public page */
:root {
    --jrrs-color-footer-background: #123d2f;
    --jrrs-color-footer-bottom: #0d3126;
    --jrrs-color-footer-cta: #1e684d;
    --jrrs-color-footer-cta-accent: #2f8f68;
    --jrrs-color-footer-heading: #ffffff;
    --jrrs-color-footer-text: #e3eee8;
    --jrrs-color-footer-muted: #abc1b6;
    --jrrs-color-footer-border: rgba(255, 255, 255, 0.13);
    --jrrs-color-footer-icon: rgba(255, 255, 255, 0.09);
    --jrrs-color-footer-logo-background: #ffffff;

    --jrrs-shadow-footer-cta:
        0 20px 45px rgba(8, 38, 28, 0.22);

    --jrrs-radius-footer: 24px;
    --jrrs-radius-footer-cta: 20px;
}

/* Compatibility aliases used by shared/legal components */
:root {
    --jrrs-color-background-soft: #f8faf8;
    --jrrs-color-text-muted: var(--jrrs-color-muted);
}

:root {
    --jrrs-color-product-detail-background: #ffffff;
    --jrrs-color-product-media-background: #f2f5ef;
    --jrrs-color-product-panel-background: #f8f9f7;
    --jrrs-color-product-detail-border: #e4e8e3;

    --jrrs-color-product-organic: #238653;
    --jrrs-color-product-organic-bg: #effaf3;
    --jrrs-color-product-grade-bg: #e9f5ed;
    --jrrs-color-product-note: #747b76;

    --jrrs-shadow-product-detail: 0 15px 40px rgba(28, 55, 42, 0.1);
    --jrrs-shadow-product-image: 0 10px 30px rgba(28, 55, 42, 0.08);

    --jrrs-radius-product-gallery: 24px;
    --jrrs-radius-product-thumbnail: 14px;
    --jrrs-radius-product-feature: 16px;
    --jrrs-radius-product-quote: 20px;
}

:root {
    --jrrs-color-specification-background: #f8faf8;
    --jrrs-color-specification-card: #ffffff;
    --jrrs-color-specification-icon: #e9f5ed;
    --jrrs-color-specification-divider: #edf0ed;

    --jrrs-radius-specification-section: 24px;
    --jrrs-radius-specification-card: 18px;
    --jrrs-radius-specification-icon: 12px;
}

:root {
    --jrrs-color-harvest-background: #ffffff;
    --jrrs-color-harvest-card-background: #f9fbf9;
    --jrrs-color-harvest-border: #e5eae6;
    --jrrs-color-harvest-decoration: rgba(35, 134, 83, 0.08);

    --jrrs-radius-harvest-section: 24px;
    --jrrs-radius-harvest-card: 16px;
}

:root {
    --jrrs-color-contact-page-background: #ffffff;
    --jrrs-color-contact-soft-background: #f7f9f7;
    --jrrs-color-contact-card-background: #ffffff;
    --jrrs-color-contact-icon-background: #e7f5ec;
    --jrrs-color-contact-border: #e4e9e5;

    --jrrs-color-validation-success: #238653;
    --jrrs-color-validation-success-background: #f3fbf6;
    --jrrs-color-validation-error: #c83a3a;
    --jrrs-color-validation-error-background: #fff6f6;

    --jrrs-radius-contact-hero: 24px;
    --jrrs-radius-contact-card: 20px;
    --jrrs-radius-contact-field: 14px;
    --jrrs-radius-contact-map: 24px;

    --jrrs-shadow-contact-card:
        0 18px 45px rgba(28, 55, 42, 0.09);
}

:root {
    --jrrs-color-about-page-background: #ffffff;
    --jrrs-color-about-hero-background: #f8faf8;
    --jrrs-color-about-badge-background: #e5f5eb;
    --jrrs-color-about-image-overlay:
        linear-gradient(
            180deg,
            transparent 42%,
            rgba(10, 28, 20, 0.82) 100%
        );

    --jrrs-radius-about-hero: 24px;
    --jrrs-radius-about-visual: 22px;

    --jrrs-shadow-about-visual:
        0 20px 50px rgba(24, 54, 40, 0.15);
}

:root {
    --jrrs-color-trust-background: #f7f9f7;
    --jrrs-color-trust-card: #ffffff;
    --jrrs-color-trust-border: #e3e8e4;
    --jrrs-color-trust-icon-background: #e8f5ed;

    --jrrs-color-trust-stats-background: #153d30;
    --jrrs-color-trust-stats-text: #ffffff;
    --jrrs-color-trust-stats-muted: #b9cec4;
    --jrrs-color-trust-stats-divider:
        rgba(255, 255, 255, 0.14);

    --jrrs-radius-trust-section: 24px;
    --jrrs-radius-trust-card: 18px;
}

:root {
    --jrrs-color-compliance-background: #f8faf8;
    --jrrs-color-compliance-card: #ffffff;
    --jrrs-color-compliance-icon-background: #e8f5ed;
    --jrrs-color-compliance-border: #e3e8e4;
    --jrrs-color-compliance-table-head: #153d30;
    --jrrs-color-compliance-table-stripe: #f7f9f7;

    --jrrs-color-status-available: #238653;
    --jrrs-color-status-available-background: #e4f5ea;
    --jrrs-color-status-request: #956712;
    --jrrs-color-status-request-background: #fff4d8;

    --jrrs-radius-compliance-section: 24px;
    --jrrs-radius-compliance-card: 18px;
    --jrrs-radius-compliance-icon: 14px;
}

/* Basic reset */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--jrrs-color-text);
    background: var(--jrrs-color-background);
    font-family: var(--jrrs-font-family);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body.jrrs-menu-open {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.jrrs-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.jrrs-container {
    width: min(
        calc(100% - (var(--jrrs-container-padding) * 2)),
        var(--jrrs-container-width)
    );
    margin-inline: auto;
}

.jrrs-button {
    min-height: 44px;
    padding: 10px 24px;
    border: 1px solid transparent;
    border-radius: var(--jrrs-radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--jrrs-space-2);
    font-weight: var(--jrrs-font-weight-semibold);
    transition:
        background-color var(--jrrs-transition-fast),
        color var(--jrrs-transition-fast),
        border-color var(--jrrs-transition-fast),
        transform var(--jrrs-transition-fast),
        box-shadow var(--jrrs-transition-fast);
}

.jrrs-button:hover {
    transform: translateY(-2px);
}

.jrrs-button--primary {
    color: var(--jrrs-color-white);
    background: var(--jrrs-color-primary);
    box-shadow: 0 7px 18px rgba(29, 96, 72, 0.24);
}

.jrrs-button--primary:hover {
    background: var(--jrrs-color-primary-dark);
    box-shadow: 0 10px 25px rgba(29, 96, 72, 0.3);
}

.jrrs-button:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(94, 168, 126, 0.35);
    outline-offset: 3px;
}

/* Tablet */

@media (max-width: 1024px) {
    :root {
        --jrrs-container-padding: 20px;
    }
}

/* Mobile */

@media (max-width: 767px) {
    :root {
        --jrrs-container-padding: 16px;
        --jrrs-navbar-height: 64px;
    }
}