/* ============================================================
   RFT Storefront — DESIGN SYSTEM BASE
   Single source of design tokens. Every other rfs-*.css consumes
   these CSS custom properties so colors/type/spacing stay in sync.

   Typography:
     - Barlow            (400-900)  UI, body, buttons, labels
     - Barlow Condensed  (600-900)  All headings, prices, section titles
     - Libre Franklin    (400-600)  Long-form descriptions, paragraphs

   All headings UPPERCASE per the mockup design system.
   ============================================================ */

:root {
    /* --- Brand colors (real values from Elementor active kit) --- */
    --rfs-orange:        #E4621B;
    --rfs-orange-hover:  #C54C10;
    --rfs-orange-soft:   rgba(228, 98, 27, .08);
    --rfs-orange-tint:   #fff7f0;

    /* --- Status colors --- */
    --rfs-green:         #1c9c4a;
    --rfs-green-soft:    #f0fdf4;

    /* --- Dark surfaces --- (Navy is the brand dark — per the Elementor
        active kit primary color. Charcoal is a secondary darker surface
        used for cards on navy backgrounds. Pure black is reserved for
        very rare emphasis only.) */
    --rfs-dark:          #1E2C3A;   /* Navy — primary dark surface */
    --rfs-charcoal:      #14202C;   /* Deeper navy for cards-on-dark */
    --rfs-navy:          #1E2C3A;   /* Alias for clarity */
    --rfs-black:         #0F141A;   /* Reserved — very rare deep accent */

    /* --- Light surfaces --- */
    --rfs-white:         #ffffff;
    --rfs-bg:            #f6f5f2;
    --rfs-bg-alt:        #edecea;
    --rfs-page:          #fafafa;

    /* --- Text --- */
    --rfs-ink:           #0e0e0e;
    --rfs-ink-2:         #4a4a4a;
    --rfs-ink-3:         #7a7a7a;

    /* --- Lines --- */
    --rfs-rule:          #ddd9d3;
    --rfs-rule-soft:     #efece8;

    /* --- Type families --- */
    --rfs-font-ui:       'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --rfs-font-display:  'Barlow Condensed', 'Barlow', sans-serif;
    --rfs-font-body:     'Libre Franklin', 'Barlow', sans-serif;

    /* --- Type scale (display headings — uppercase Barlow Condensed) --- */
    --rfs-h1:            clamp(36px, 5vw, 56px);
    --rfs-h2:            clamp(28px, 3.4vw, 40px);
    --rfs-h3:            22px;

    /* --- Section label (the tiny orange uppercase eyebrow text) --- */
    --rfs-label-fs:      11px;
    --rfs-label-lsp:     3.5px;
    --rfs-label-weight:  700;

    /* --- Radii --- */
    --rfs-r-btn:         8px;
    --rfs-r-card:        12px;
    --rfs-r-pill:        100px;

    /* --- Container --- */
    --rfs-container:     1220px;

    /* --- Easing --- */
    --rfs-ease:          cubic-bezier(.2, .8, .2, 1);
}

/* ============================================================
   BASE — only applied to elements inside our templates so we
   don't accidentally restyle the rest of the site.
   ============================================================ */

.rfs-page,
.rfs-page * {
    box-sizing: border-box;
}

.rfs-page {
    background: var(--rfs-bg);
    color: var(--rfs-ink);
    font-family: var(--rfs-font-ui);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

.rfs-wrap {
    max-width: var(--rfs-container);
    margin: 0 auto;
    padding: 0 28px;
}

/* ============================================================
   HEADINGS — Barlow Condensed, uppercase, tight leading
   ============================================================ */
.rfs-page h1,
.rfs-page h2,
.rfs-page h3,
.rfs-page h4 {
    font-family: var(--rfs-font-display);
    text-transform: uppercase;
    line-height: 1.05;
    margin: 0;
    color: var(--rfs-ink);
    font-weight: 800;
}

.rfs-page p {
    font-family: var(--rfs-font-body);
    margin: 0;
}

/* The tiny orange uppercase label */
.rfs-label {
    display: inline-block;
    font-family: var(--rfs-font-ui);
    font-size: var(--rfs-label-fs);
    font-weight: var(--rfs-label-weight);
    letter-spacing: var(--rfs-label-lsp);
    text-transform: uppercase;
    color: var(--rfs-orange);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.rfs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 15px 30px;
    border: 2px solid transparent;
    border-radius: var(--rfs-r-btn);
    font-family: var(--rfs-font-ui);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .12s var(--rfs-ease);
    line-height: 1;
}
.rfs-btn:hover { transform: translateY(-1px); }

.rfs-btn--orange   { background: var(--rfs-orange);    color: #fff;            border-color: var(--rfs-orange); }
.rfs-btn--orange:hover { background: var(--rfs-orange-hover); border-color: var(--rfs-orange-hover); color: #fff; }

.rfs-btn--outline  { background: transparent;          color: var(--rfs-ink);  border-color: var(--rfs-rule); }
.rfs-btn--outline:hover { border-color: var(--rfs-ink); color: var(--rfs-ink); }

.rfs-btn--dark     { background: var(--rfs-dark);      color: #fff;            border-color: var(--rfs-dark); }
.rfs-btn--dark:hover { background: var(--rfs-ink); color: #fff; }

.rfs-btn--ghost    { background: transparent;          color: #fff;            border-color: rgba(255,255,255,.4); }
.rfs-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); color: #fff; }

.rfs-btn--white    { background: #fff;                 color: var(--rfs-ink);  border-color: #fff; }
.rfs-btn--white:hover { background: var(--rfs-bg-alt); }

.rfs-btn--lg       { padding: 18px 36px; font-size: 14px; }

/* ============================================================
   CARDS
   ============================================================ */
.rfs-card {
    background: #fff;
    border: 1px solid var(--rfs-rule);
    border-radius: var(--rfs-r-card);
    overflow: hidden;
    transition: box-shadow .2s, transform .15s var(--rfs-ease);
}
.rfs-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, .06);
    transform: translateY(-2px);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.rfs-sec        { padding: 56px 0; }
.rfs-sec--sm    { padding: 36px 0; }
.rfs-sec--lg    { padding: 80px 0; }

.rfs-sec--dark      { background: var(--rfs-dark);     color: #fff; }
.rfs-sec--charcoal  { background: var(--rfs-charcoal); color: #fff; }
.rfs-sec--bg        { background: var(--rfs-bg); }
.rfs-sec--bgalt     { background: var(--rfs-bg-alt); }
.rfs-sec--orange    { background: var(--rfs-orange);   color: #fff; }
.rfs-sec--white     { background: #fff; }

.rfs-sec--dark h1,
.rfs-sec--dark h2,
.rfs-sec--dark h3,
.rfs-sec--charcoal h1,
.rfs-sec--charcoal h2,
.rfs-sec--charcoal h3,
.rfs-sec--orange h1,
.rfs-sec--orange h2,
.rfs-sec--orange h3 { color: #fff; }

/* ============================================================
   GLOBAL TWEAKS — ensure third-party CSS doesn't bleed into cards
   ============================================================ */
.rfs-page a { color: inherit; }
.rfs-page button { font-family: inherit; }

@media (max-width: 720px) {
    .rfs-wrap { padding: 0 18px; }
    .rfs-sec, .rfs-sec--lg { padding: 40px 0; }
}