@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap');

/* ============================================================
   ChemSmog Design Tokens — extracted from Figma
   File: rQLRoSb7TlexzBhmf5KV1j (Chemsmog), 2026-05-28
   ============================================================ */

:root {
    /* ---------- Brand Colors ---------- */
    --cs-blue:           #007ba9;   /* Chem-Blue, primary */
    --cs-green:          #86c38b;   /* Chem-Green, accent CTA */
    --cs-teal:           #59cdc2;   /* hero swirl / category accent */
    --cs-navy:           #0b4054;   /* dark section bg (process steps) */
    --cs-orange:         #f58c2f;   /* badge / ribbon */
    --cs-orange-dark:    #e67e22;   /* badge hover */
    --cs-brown:          #bd8e60;   /* tertiary */

    /* ---------- Neutrals ---------- */
    --cs-text:           #575757;   /* body text */
    --cs-text-light:     #aeb1b2;
    --cs-border:         #b5b5b5;
    --cs-border-light:   #c4c4c4;
    --cs-divider:        #d9d9d9;
    --cs-bg:             #f5f5f5;
    --cs-white:          #ffffff;
    --cs-black:          #000000;

    /* ---------- Gradients ---------- */
    --cs-gradient-brand: linear-gradient(135deg, var(--cs-green) 0%, var(--cs-teal) 50%, var(--cs-blue) 100%);
    --cs-gradient-hero:  linear-gradient(180deg, rgba(89,205,194,0.0) 0%, rgba(89,205,194,0.15) 100%);

    /* ---------- Typography ---------- */
    --cs-font-primary:   'Fredoka', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cs-font-icon:      'Font Awesome 6 Pro', 'Font Awesome 5 Pro', 'Font Awesome 5 Free', sans-serif;

    --cs-fw-normal:      400;
    --cs-fw-medium:      500;
    --cs-fw-semibold:    600;
    --cs-fw-bold:        700;

    /* Type scale (px values from Figma) */
    --cs-fs-10:          10px;
    --cs-fs-12:          12px;   /* small label */
    --cs-fs-14:          14px;   /* secondary text */
    --cs-fs-16:          16px;   /* base body */
    --cs-fs-18:          18px;   /* large body */
    --cs-fs-20:          20px;   /* H6 / strong */
    --cs-fs-22:          22px;   /* H5 */
    --cs-fs-24:          24px;   /* H4 */
    --cs-fs-34:          34px;   /* section heading */
    --cs-fs-50:          50px;   /* hero headline */

    /* Line heights */
    --cs-lh-tight:       1.1;
    --cs-lh-snug:        1.3;
    --cs-lh-normal:      1.5;

    /* ---------- Spacing ---------- */
    --cs-sp-1:           4px;
    --cs-sp-2:           8px;
    --cs-sp-3:           12px;
    --cs-sp-4:           16px;
    --cs-sp-5:           20px;
    --cs-sp-6:           24px;
    --cs-sp-8:           32px;
    --cs-sp-10:          40px;
    --cs-sp-12:          48px;
    --cs-sp-16:          64px;
    --cs-sp-20:          80px;
    --cs-sp-24:          96px;

    /* ---------- Radius ---------- */
    --cs-radius-sm:      4px;
    --cs-radius:         8px;     /* default cards/buttons */
    --cs-radius-lg:      12px;
    --cs-radius-xl:      20px;
    --cs-radius-pill:    9999px;

    /* ---------- Shadow ---------- */
    --cs-shadow-sm:      0 1px 2px rgba(11, 64, 84, 0.06);
    --cs-shadow:         0 4px 12px rgba(11, 64, 84, 0.08);
    --cs-shadow-lg:      0 12px 32px rgba(11, 64, 84, 0.12);

    /* ---------- Layout ---------- */
    --cs-container:      1440px;
    --cs-container-px:   24px;
    --cs-header-h:       129px;   /* main nav incl. top promo bar */
    --cs-header-promo-h: 39px;

    /* ---------- Botble/Farmart overrides ---------- */
    --bb-primary:        var(--cs-blue);
    --bb-primary-rgb:    0, 123, 169;
    --bb-secondary:      var(--cs-teal);
    --bb-success:        var(--cs-green);
}

/* ============================================================
   Web-font load — Fredoka via Google Fonts
   ============================================================ */

/* ============================================================
   Global base overrides
   ============================================================ */
body,
.theme-farmart,
.bb-layout,
input, button, select, textarea {
    font-family: var(--cs-font-primary);
    color: var(--cs-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--cs-font-primary);
    font-weight: var(--cs-fw-semibold);
    color: var(--cs-navy);
    line-height: var(--cs-lh-snug);
}

a {
    color: var(--cs-blue);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover {
    color: var(--cs-teal);
    text-decoration: none;
}

/* ---------- Bootstrap primary recolor ---------- */
.btn-primary,
.bg-primary,
.text-primary {
    --bs-primary: var(--cs-blue);
    --bs-primary-rgb: 0, 123, 169;
}
.btn-primary {
    background-color: var(--cs-blue);
    border-color: var(--cs-blue);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #006491;
    border-color: #006491;
}
.btn-success {
    background-color: var(--cs-green);
    border-color: var(--cs-green);
}

/* ---------- Brand utility classes ---------- */
.cs-bg-navy        { background-color: var(--cs-navy); color: var(--cs-white); }
.cs-bg-blue        { background-color: var(--cs-blue); color: var(--cs-white); }
.cs-bg-green       { background-color: var(--cs-green); color: var(--cs-navy); }
.cs-bg-teal        { background-color: var(--cs-teal); color: var(--cs-white); }
.cs-bg-gradient    { background: var(--cs-gradient-brand); color: var(--cs-white); }

.cs-text-navy      { color: var(--cs-navy); }
.cs-text-blue      { color: var(--cs-blue); }
.cs-text-teal      { color: var(--cs-teal); }
.cs-text-green     { color: var(--cs-green); }

.cs-radius         { border-radius: var(--cs-radius); }
.cs-radius-lg      { border-radius: var(--cs-radius-lg); }
.cs-radius-pill    { border-radius: var(--cs-radius-pill); }

.cs-shadow         { box-shadow: var(--cs-shadow); }
.cs-shadow-lg      { box-shadow: var(--cs-shadow-lg); }

.cs-container      { width: 100%; max-width: var(--cs-container); margin-inline: auto; padding-inline: var(--cs-container-px); box-sizing: border-box; }


/* ============================================================
   Force Fredoka globally with high specificity
   ============================================================ */
html,
html body,
html body * {
    font-family: 'Fredoka', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
html body i,
html body i.fa, html body i.fas, html body i.far, html body i.fab,
html body .svg-icon, html body svg, html body code, html body pre, html body kbd, html body tt,
html body .fa, html body [class^='icon-'], html body [class*=' icon-'],
html body [class^='fa-'], html body [class*=' fa-'] {
    font-family: inherit !important;
}
html body i.fas, html body i.far, html body i.fab, html body i.fa,
html body [class^='fa-'], html body [class*=' fa-'] {
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 5 Pro', 'Font Awesome 5 Free', sans-serif !important;
}

/* Linearicons (bottom mobile bar + theme icons) — keep its own font, NOT inherit(Fredoka) */
html body i[class^='icon-'], html body i[class*=' icon-'],
html body [class^='icon-'], html body [class*=' icon-'] {
    font-family: 'Linearicons' !important;
}