/*
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;
    --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;
    --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. */
    --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%);

    /* --- 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", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ls-font-body:         Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;

    --ls-h1:                clamp(2.25rem, 1.30rem + 3.6vw, 3.75rem);  /* 36 -> 60 */
    --ls-h2:                clamp(1.75rem, 1.20rem + 2.1vw, 2.50rem);  /* 28 -> 40 */
    --ls-h3:                clamp(1.375rem, 1.05rem + 1.2vw, 1.75rem); /* 22 -> 28 */
    --ls-h4:                1.375rem;   /* 22 */
    --ls-h5:                1.125rem;   /* 18 */
    --ls-h6:                1rem;       /* 16 */
    --ls-body:              1rem;       /* 16 */
    --ls-small:             0.875rem;   /* 14 */
    --ls-micro:             0.6875rem;  /* 11 - eyebrow / field labels */

    --ls-leading-tight:     1.15;
    --ls-leading-snug:      1.3;
    --ls-leading-body:      1.6;

    --ls-tracking-eyebrow:  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:           22px;
    --ls-space-6:           30px;
    --ls-space-7:           44px;
    --ls-space-8:           64px;

    /* --- 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 */
}

/* ============================================================================
   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.
   ========================================================================= */

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module h4, .et_pb_module h5, .et_pb_module h6 {
    font-family: var(--ls-font-display);
    font-weight: 700;
    color: var(--ls-text);
    letter-spacing: normal;
    text-transform: none;
}

h1 { font-size: var(--ls-h1); line-height: var(--ls-leading-tight); }
h2 { font-size: var(--ls-h2); line-height: var(--ls-leading-tight); }
h3 { font-size: var(--ls-h3); line-height: var(--ls-leading-snug); }
h4 { font-size: var(--ls-h4); line-height: var(--ls-leading-snug); font-weight: 600; }
h5 { font-size: var(--ls-h5); line-height: var(--ls-leading-snug); font-weight: 600; }
h6 { font-size: var(--ls-h6); line-height: var(--ls-leading-snug); font-weight: 600; }

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; }

/* An eyebrow: the small uppercase label above a field or beside a total. */
.ls-eyebrow {
    display: block;
    font-family: var(--ls-font-body);
    font-size: var(--ls-micro);
    font-weight: 400;
    letter-spacing: var(--ls-tracking-eyebrow);
    text-transform: uppercase;
    line-height: 1;
    color: var(--ls-text-faint);
}

/* 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;
}