/*
Theme Name:   LS Fabrication
Theme URI:    https://lsfab.com
Description:  Divi child theme for LS Fabrication. Replaces the Divi Ecommerce child theme with a tokenized design system: one source of truth for color, type, spacing, buttons and form fields across the entire site.
Author:       LS Fabrication
Author URI:   https://lsfab.com
Template:     Divi
Version:      1.0.0
Text Domain:  lsfab
*/

/* ============================================================================
   1. DESIGN TOKENS
   Every value used anywhere in this theme is declared here and nowhere else.
   Change a brand color in one place and it propagates site-wide.
   ========================================================================= */

:root {
    /* --- Brand ------------------------------------------------------------ */
    --ls-purple:            #7C00FF;
    --ls-purple-hover:      #6400CC;
    --ls-cyan:              #00DEEF;
    --ls-red:               #FF0044;
    --ls-red-hover:         #D9003A;

    /* Button fill. White text on #FF0044 measures 3.94:1, under the 4.5:1
       WCAG AA minimum for normal text, and every primary button on the site
       is white Barlow 700 at 14-16px, which does not qualify as large text.
       #E00038 measures 4.97:1 with white and is visually near-identical.
       #FF0044 is kept for red TEXT, borders and rules on dark grounds, where
       it measures 5.33:1 on black and darkening it would make it worse.
       Rule of thumb: solid red FILL uses --ls-red-btn, red INK uses --ls-red. */
    --ls-red-btn:           #E00038;
    --ls-red-btn-hover:     #B8002E;
    --ls-coral:             #FF7A5C;

    /* Status. Green marks a community/low-risk commit (write a review, load
       more) so it never reads as the same weight as a red checkout action.
       Amber is rating chrome only. Both were hard-coded hexes in site.css. */
    --ls-green:             #059D58;
    --ls-green-hover:       #048148;

    /* Button fill, same rule as the red above. White on #059D58 measures
       3.52:1, well under the 4.5:1 AA minimum, and it carries the vehicle
       finder submit, the Dealer Application button and the cart drawer
       checkout. #05824A measures 4.88:1 with white. #059D58 stays for green
       INK and rules on dark grounds, where it measures 5.97:1 on black. */
    --ls-green-btn:         #05824A;
    --ls-green-btn-hover:   #03683C;
    --ls-amber:             #FBBC06;

    /* Gradients. Purple->cyan is the brand mark; red->coral marks UI chrome
       so the two never compete for attention in the same view. Steel is the
       neutral edge, for chrome that should read as structure and not as an
       accent -- product cards above all, where red already carries the CTA. */
    --ls-gradient-brand:    linear-gradient(90deg, var(--ls-purple) 0%, var(--ls-cyan) 100%);
    --ls-gradient-ui:       linear-gradient(90deg, var(--ls-red) 0%, var(--ls-coral) 100%);
    --ls-gradient-steel:    linear-gradient(90deg, #8A8F94 0%, #2B2E31 100%);

    /* --- Surfaces --------------------------------------------------------- */
    --ls-bg:                #000000;   /* page ground */
    --ls-surface-1:         #111111;   /* cards, panels */
    --ls-surface-2:         #1a1a1a;   /* inputs, insets */
    --ls-surface-3:         #161616;   /* notices, secondary panels */
    --ls-surface-raised:    #1f1f1f;   /* hover state on a surface */

    /* --- Lines ------------------------------------------------------------ */
    --ls-hairline:          rgba(255, 255, 255, 0.15);
    --ls-hairline-strong:   rgba(255, 255, 255, 0.30);
    --ls-hairline-input:    rgba(255, 255, 255, 0.18);
    --ls-hairline-faint:    rgba(255, 255, 255, 0.08);

    /* --- Text ------------------------------------------------------------- */
    --ls-text:              #ffffff;
    --ls-text-muted:        rgba(255, 255, 255, 0.70);
    --ls-text-soft:         rgba(255, 255, 255, 0.55);
    --ls-text-faint:        rgba(255, 255, 255, 0.40);
    --ls-text-ghost:        rgba(255, 255, 255, 0.30);
    --ls-text-on-light:     #161616;

    /* --- Type ------------------------------------------------------------- */
    --ls-font-display:      "Barlow Condensed", "Barlow Condensed Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ls-font-body:         Inter, "Inter Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --ls-display:           clamp(2.375rem, 1.5rem + 3.5vw, 3.75rem);  /* 38 -> 60, home hero only */
    --ls-h1:                clamp(2.125rem, 1.6rem + 1.9vw, 3rem);      /* 34 -> 48 */
    --ls-h2:                clamp(1.75rem, 1.35rem + 1.4vw, 2.25rem);  /* 28 -> 36 */
    --ls-h3:                clamp(1.375rem, 1.2rem + 0.55vw, 1.625rem); /* 22 -> 26 */
    --ls-h4:                clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);  /* 18 -> 20, card titles */
    --ls-h5:                1rem;       /* 16 - caps label (uppercase Barlow only) */
    --ls-nav:               1.125rem;   /* 18 - primary nav / drawer links */
    --ls-h6:                0.9375rem;  /* 15 - caps label, mobile */
    --ls-lede:              clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);  /* 17 -> 18 */
    --ls-body:              1rem;       /* 16 */
    --ls-small:             0.875rem;   /* 14 */
    --ls-caption:           0.75rem;    /* 12 - badges, counts, flags; the floor */
    --ls-micro:             0.75rem;    /* 12 - eyebrow / field labels (was 11) */
    --ls-price-card:        1rem;       /* 16 - every product card */
    --ls-price-product:     clamp(2.125rem, 1.9rem + 0.75vw, 2.5rem);  /* 34 -> 40 */
    --ls-price-total:       clamp(1.375rem, 1.2rem + 0.4vw, 1.5rem);   /* 22 -> 24 */
    --ls-measure:           70ch;       /* prose line length */
    --ls-container:         1200px;
    --ls-prose:             760px;

    --ls-leading-display:   1.05;
    --ls-leading-h1:        1.1;
    --ls-leading-tight:     1.15;   /* h2 */
    --ls-leading-h3:        1.2;
    --ls-leading-h4:        1.25;
    --ls-leading-snug:      1.3;    /* captions */
    --ls-leading-small:     1.5;
    --ls-leading-body:      1.6;

    --ls-tracking-caps:     0.06em;  /* uppercase Barlow under 18px */
    --ls-tracking-eyebrow:  0.12em;  /* eyebrows and field labels (was 1.5px) */
    --ls-tracking-button:   0.12em;

    /* --- Space ------------------------------------------------------------ */
    --ls-space-1:           4px;
    --ls-space-2:           8px;
    --ls-space-3:           12px;
    --ls-space-4:           16px;
    --ls-space-5:           24px;
    --ls-space-6:           32px;
    --ls-space-7:           48px;
    --ls-space-8:           64px;
    --ls-space-9:           96px;

    /* Section padding: three sizes for the whole site. Phone values are
       redefined in the media block at the end of :root. */
    --ls-section-sm:        var(--ls-space-7);   /* 48 -> 32 */
    --ls-section-md:        var(--ls-space-8);   /* 64 -> 48 */
    --ls-section-lg:        var(--ls-space-9);   /* 96 -> 64 */

    /* --- Radii ------------------------------------------------------------ */
    --ls-radius-sm:         4px;
    --ls-radius-md:         6px;
    --ls-radius-lg:         8px;
    --ls-radius-xl:         12px;
    --ls-radius-pill:       100px;

    /* --- Controls --------------------------------------------------------- */
    --ls-control-h:         48px;
    --ls-control-h-sm:      40px;
    --ls-control-pad-x:     14px;

    /* --- Buttons ---------------------------------------------------------
       One shape for every button on the site. Only colour varies. Height is
       set by min-height + centred flex rather than vertical padding, so a
       button is the same height whatever its font metrics or label length —
       that is what stops the cart's "Apply coupon" (72px), "Update cart"
       (43px) and the vehicle finder's "Find My Parts" (53px) from each
       landing on a different height. */
    --ls-btn-h:             48px;
    --ls-btn-h-lg:          56px;
    --ls-btn-h-sm:          40px;
    --ls-btn-font:          1rem;       /* 16 */
    --ls-btn-font-lg:       1.125rem;   /* 18 */
    --ls-btn-font-sm:       0.875rem;   /* 14 */
    --ls-btn-pad-x:         26px;
    --ls-btn-pad-x-lg:      34px;
    --ls-btn-pad-x-sm:      18px;
    --ls-btn-radius:        var(--ls-radius-md);   /* 6px */

    /* --- Effects ---------------------------------------------------------- */
    --ls-focus-ring:        0 0 0 3px rgba(255, 0, 68, 0.25);
    --ls-shadow-drop:       0 18px 40px rgba(0, 0, 0, 0.65);
    --ls-transition:        160ms ease;

    /* --- Layout ----------------------------------------------------------- */
    --ls-card-line-h:       3px;   /* the gradient rule across the top of a card */
}

@media (max-width: 767px) {
    :root {
        --ls-section-sm:    var(--ls-space-6);   /* 32 */
        --ls-section-md:    var(--ls-space-7);   /* 48 */
        --ls-section-lg:    var(--ls-space-8);   /* 64 */
    }
}

/* ============================================================================
   2. BASE
   ========================================================================= */

body {
    background-color: var(--ls-bg);
    font-family: var(--ls-font-body);
    font-size: var(--ls-body);
    line-height: var(--ls-leading-body);
    color: var(--ls-text-muted);
    -webkit-font-smoothing: antialiased;
}

/* ============================================================================
   3. TYPOGRAPHY
   Barlow Condensed carries every heading and button; Inter carries everything
   a person actually reads. Divi sets per-module type in the builder, so these
   are the fallback for anything not explicitly styled there.
   ========================================================================= */

/* Heading levels, text roles, eyebrows, prices and form type live in
   css/type.css (enqueued right after this sheet). Only the paragraph and link
   defaults stay here. */

p { margin-bottom: var(--ls-space-4); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--ls-red);
    text-decoration: none;
    transition: color var(--ls-transition);
}
a:hover { color: var(--ls-coral); }

strong, b { color: var(--ls-text); font-weight: 600; }

/* Divi's global `ul { list-style: none }` was a blunt fix for menus that also
   stripped bullets from prose. Scope it: menus lose bullets, content keeps
   them. */
.et_pb_text ul,
.woocommerce-MyAccount-content ul,
.entry-content ul {
    list-style: disc outside;
    margin-left: 1.25em;
}
.et_pb_text ol,
.woocommerce-MyAccount-content ol,
.entry-content ol {
    list-style: decimal outside;
    margin-left: 1.25em;
}