/* ==========================================================================
   LEGENDARY STAKES — tokens.css
   WordPress redesign · legendarystakes.com
   Target: The7 child theme (dt-the7-child) + Elementor, Classic Editor

   INSTALL
     1. Upload to  /wp-content/themes/dt-the7-child/css/tokens.css
     2. Enqueue in the child theme's functions.php AFTER the parent and
        Elementor styles so the cascade lands on top:

          add_action( 'wp_enqueue_scripts', function () {
            wp_enqueue_style(
              'ls-tokens',
              get_stylesheet_directory_uri() . '/css/tokens.css',
              array( 'dt-main', 'elementor-frontend' ),
              '1.0.0'
            );
          }, 100 );

     3. Also enqueue it inside the Elementor editor so the canvas matches:

          add_action( 'elementor/editor/after_enqueue_styles', function () {
            wp_enqueue_style( 'ls-tokens',
              get_stylesheet_directory_uri() . '/css/tokens.css', array(), '1.0.0' );
          } );

   NOTES FOR THIS BUILD
     · Elementor's Global Colors / Global Fonts panel does NOT accept var().
       Enter the raw hex values from the "ELEMENTOR GLOBALS" block below into
       the panel. Section 8 then re-binds Elementor's generated
       --e-global-* variables to these tokens, so if a global is ever edited
       in the panel the token file still wins on the front end.
     · Fonts are NOT loaded here (per spec). Load Cormorant Garamond,
       Libre Franklin and Saira Condensed via The7 / Elementor Custom Fonts
       or a local @font-face file. These tokens only name the families.
     · The7 → Theme Options → Advanced → "Elementor typography" must be
       DISABLED, or The7 injects its own font rules at a higher specificity
       and section 9 below will be partially overridden.

   Source of truth: Legendary Stakes Design System v2.1 (brand layer).
   Do not hardcode gold anywhere in the site — always use these tokens.
   ========================================================================== */


/* ==========================================================================
   1 · PRIMITIVES — color
   ========================================================================== */
:root {
  /* Legendary Gold — anchored to the mark */
  --ls-gold:              #C9A02C;   /* base gold, borders, rules            */
  --ls-gold-bright:       #E3BC27;   /* gold on dark, gradient top stop      */
  --ls-gold-deep:         #A8801C;   /* gold as TEXT on light surfaces       */
  --ls-gold-ink:          #6E520F;   /* text on gold tints                   */
  --ls-gold-tint:         rgba(201, 160, 44, .14);
  --ls-gold-line:         rgba(201, 160, 44, .40);
  --ls-gold-fill:         linear-gradient(180deg, #E3BC27, #C9A02C);

  /* Warm deep neutrals — "ink" */
  --ls-ink-950:           #14110C;
  --ls-ink-900:           #1B1710;
  --ls-ink-850:           #221E15;
  --ls-ink-800:           #2B2517;
  --ls-ink-700:           #3B3324;
  --ls-ink-600:           #4E4534;

  /* Mid neutrals — "stone" */
  --ls-stone-500:         #6A6253;
  --ls-stone-400:         #8B8374;
  --ls-stone-300:         #B4AC9C;
  --ls-stone-200:         #D3CCBD;

  /* Light neutrals — "bone / paper" */
  --ls-bone-100:          #ECE5D5;
  --ls-bone-50:           #F4EFE3;
  --ls-paper:             #FBF8F0;
  --ls-white:             #FFFFFF;

  /* Rare deep accent — saddle leather. Under 5% of any screen. */
  --ls-leather:           #5E2C1E;

  /* Semantic status — warm-harmonised.
     "Warn" is the gold family itself: pending is a brand moment, not an alarm. */
  --ls-ok:                #2F6B3C;
  --ls-ok-bg:             #E6EFE0;
  --ls-ok-line:           #BFD5B2;
  --ls-warn:              #6E520F;
  --ls-warn-bg:           #FAF0D2;
  --ls-warn-line:         #E2CC8B;
  --ls-danger:            #8C2F23;
  --ls-danger-bg:         #F6E7E1;
  --ls-danger-line:       #DFB3A6;
  --ls-info:              #2C5578;
  --ls-info-bg:           #E5EDF3;
  --ls-info-line:         #B3C8D9;
}


/* ==========================================================================
   2 · SEMANTIC ALIASES
   Build pages against THESE, not the primitives. They re-point per
   temperature scope in section 6, so a component works on bone or on ink
   with no per-widget colour edits.
   ========================================================================== */
:root {
  --ls-surface:           var(--ls-bone-50);    /* page background           */
  --ls-surface-raised:    var(--ls-white);      /* cards, panels             */
  --ls-surface-sunken:    var(--ls-paper);      /* card feet, table headers  */
  --ls-surface-inverse:   var(--ls-ink-950);    /* Arena bands               */

  --ls-text:              var(--ls-ink-900);
  --ls-text-heading:      var(--ls-ink-900);
  --ls-text-muted:        var(--ls-stone-500);
  --ls-text-faint:        var(--ls-stone-400);
  --ls-text-inverse:      var(--ls-bone-50);
  --ls-text-accent:       var(--ls-gold-deep);  /* gold as text on light     */
  --ls-text-money:        var(--ls-gold-deep);

  --ls-line:              var(--ls-bone-100);   /* hairline dividers         */
  --ls-line-strong:       var(--ls-stone-200);  /* input borders             */
  --ls-line-accent:       var(--ls-gold-line);

  --ls-link:              var(--ls-gold-deep);
  --ls-link-hover:        var(--ls-gold);

  --ls-focus-ring:        0 0 0 3px var(--ls-gold-tint);
  --ls-row-alt:           var(--ls-bone-50);    /* zebra — Event Log only    */
  --ls-row-hover:         var(--ls-gold-tint);
}


/* ==========================================================================
   3 · TYPE
   Three families. Display = statements. Sans = body/forms.
   Condensed = stats, money, eyebrows, buttons, labels (always uppercase).
   ========================================================================== */
:root {
  --ls-font-display:      'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --ls-font-sans:         'Libre Franklin', system-ui, -apple-system, sans-serif;
  --ls-font-cond:         'Saira Condensed', 'Libre Franklin', sans-serif;

  /* Size ramp — fluid where it matters, fixed where it must not move */
  --ls-text-3xs:          11px;   /* table column heads, scoreboard labels   */
  --ls-text-2xs:          12px;   /* chips, field labels                     */
  --ls-text-xs:           13px;   /* eyebrows, backlinks, meta               */
  --ls-text-sm:           15px;   /* secondary body, table cells             */
  --ls-text-base:         17px;   /* body                                    */
  --ls-text-lg:           19px;
  --ls-text-input:        16px;   /* FIXED — anything smaller zooms on iOS   */

  --ls-display-sm:        clamp(22px, 2.2vw, 26px);
  --ls-display-md:        clamp(28px, 3.2vw, 38px);
  --ls-display-lg:        clamp(34px, 4.4vw, 52px);
  --ls-display-xl:        clamp(40px, 5.4vw, 68px);   /* identity name       */
  --ls-display-2xl:       clamp(48px, 7vw, 92px);     /* hero                */

  --ls-weight-regular:    400;
  --ls-weight-medium:     500;
  --ls-weight-semibold:   600;
  --ls-weight-bold:       700;

  --ls-leading-display:   .96;
  --ls-leading-tight:     1.2;
  --ls-leading-body:      1.55;

  --ls-tracking-display:  -.01em;
  --ls-tracking-label:    .14em;   /* buttons, nav, field labels             */
  --ls-tracking-eyebrow:  .28em;   /* eyebrows only                          */
  --ls-tracking-chip:     .10em;
}


/* ==========================================================================
   4 · SPACE · RADIUS · SHADOW · MOTION · LAYOUT
   ========================================================================== */
:root {
  --ls-s1: 4px;  --ls-s2: 8px;   --ls-s3: 12px; --ls-s4: 16px;  --ls-s5: 24px;
  --ls-s6: 32px; --ls-s7: 48px;  --ls-s8: 64px; --ls-s9: 96px;  --ls-s10: 128px;

  --ls-radius:            3px;    /* buttons, inputs, chips                  */
  --ls-radius-lg:         6px;    /* cards, sheets                           */
  --ls-radius-pill:       999px;  /* status/count badges ONLY                */

  --ls-shadow-1:          0 1px 2px rgba(20, 17, 12, .06);
  --ls-shadow-2:          0 18px 40px -22px rgba(20, 17, 12, .5);
  --ls-shadow-3:          0 24px 60px -20px rgba(20, 17, 12, .65);
  --ls-shadow-gold:       0 1px 0 rgba(255, 255, 255, .35) inset,
                          0 6px 16px -8px rgba(201, 160, 44, .8);
  --ls-shadow-gold-hover: 0 1px 0 rgba(255, 255, 255, .45) inset,
                          0 10px 22px -8px rgba(201, 160, 44, .9);

  --ls-ease:              cubic-bezier(.2, .7, .2, 1);
  --ls-dur-press:         120ms;
  --ls-dur-hover:         200ms;
  --ls-dur-sheet:         320ms;

  --ls-content-max:       1180px;  /* Elementor container: Boxed, 1180px     */
  --ls-gutter:            32px;
  --ls-gutter-mobile:     20px;
  --ls-tap-min:           44px;    /* never smaller, any platform            */
}

@media (max-width: 980px) {
  :root { --ls-gutter: var(--ls-gutter-mobile); }
}


/* ==========================================================================
   5 · ELEMENTOR GLOBALS — values to type into the panel
   Site Settings → Global Colors / Global Fonts. Hex only, no var().
   Keep the NAMES exactly as written so section 8's bridge stays readable.

     GLOBAL COLORS
       Primary ......... Gold             #C9A02C
       Secondary ....... Ink 950          #14110C
       Text ............ Ink 900          #1B1710
       Accent .......... Gold Deep        #A8801C
       + Custom  Gold Bright              #E3BC27
       + Custom  Gold Ink                 #6E520F
       + Custom  Ink 800                  #2B2517
       + Custom  Ink 700                  #3B3324
       + Custom  Stone 500                #6A6253
       + Custom  Stone 400                #8B8374
       + Custom  Stone 300                #B4AC9C
       + Custom  Stone 200                #D3CCBD
       + Custom  Bone 100                 #ECE5D5
       + Custom  Bone 50                  #F4EFE3
       + Custom  Paper                    #FBF8F0
       + Custom  Leather                  #5E2C1E
       + Custom  Status OK                #2F6B3C
       + Custom  Status Danger            #8C2F23
       + Custom  Status Info              #2C5578

     GLOBAL FONTS
       Primary   — Cormorant Garamond 600 · line-height .96 · tracking -.01em
                   (display headlines, horse/rider names)
       Secondary — Saira Condensed 600 · UPPERCASE · tracking .14em
                   (eyebrows, buttons, labels, stats, money)
       Text      — Libre Franklin 400 · 17px · line-height 1.55
       Accent    — Saira Condensed 700 · tabular numerals
                   (money, scoreboard figures)

     ELEMENTOR SITE SETTINGS → LAYOUT
       Content width 1180 · Widgets space 24 · Breakpoints 980 / 560
   ========================================================================== */


/* ==========================================================================
   6 · TEMPERATURE SCOPES
   Two surfaces, one system. Put .ls-arena or .ls-registry on the Elementor
   SECTION/CONTAINER (Advanced → CSS Classes) and everything inside re-points.
   ========================================================================== */
.ls-registry,
.ls-arena {
  background: var(--ls-surface);
  color: var(--ls-text);
}

.ls-registry {
  --ls-surface:         var(--ls-bone-50);
  --ls-surface-raised:  var(--ls-white);
  --ls-surface-sunken:  var(--ls-paper);
  --ls-text:            var(--ls-ink-900);
  --ls-text-heading:    var(--ls-ink-900);
  --ls-text-muted:      var(--ls-stone-500);
  --ls-text-faint:      var(--ls-stone-400);
  --ls-text-accent:     var(--ls-gold-deep);
  --ls-text-money:      var(--ls-gold-deep);
  --ls-line:            var(--ls-bone-100);
  --ls-line-strong:     var(--ls-stone-200);
  --ls-line-accent:     var(--ls-gold-line);
  --ls-link:            var(--ls-gold-deep);
  --ls-link-hover:      var(--ls-gold);
  --ls-row-alt:         var(--ls-bone-50);
  --ls-input-bg:        var(--ls-white);
  --ls-input-line:      var(--ls-stone-200);
}

.ls-arena {
  --ls-surface:         var(--ls-ink-950);
  --ls-surface-raised:  var(--ls-ink-900);
  --ls-surface-sunken:  var(--ls-ink-850);
  --ls-text:            var(--ls-bone-50);
  --ls-text-heading:    var(--ls-bone-50);
  --ls-text-muted:      var(--ls-stone-300);
  --ls-text-faint:      var(--ls-stone-400);
  --ls-text-accent:     var(--ls-gold-bright);
  --ls-text-money:      var(--ls-gold-bright);
  --ls-line:            var(--ls-ink-800);
  --ls-line-strong:     rgba(201, 160, 44, .28);
  --ls-line-accent:     rgba(201, 160, 44, .28);
  --ls-link:            var(--ls-gold-bright);
  --ls-link-hover:      var(--ls-gold);
  --ls-row-alt:         rgba(255, 255, 255, .025);
  --ls-input-bg:        rgba(255, 255, 255, .05);
  --ls-input-line:      rgba(201, 160, 44, .30);
}

/* Elementor writes its own background/colour onto the container wrapper.
   These win over widget-level inherits without needing !important on every
   widget, because the scope class sits on the section. */
.ls-arena .elementor-heading-title,
.ls-arena h1, .ls-arena h2, .ls-arena h3,
.ls-arena h4, .ls-arena h5, .ls-arena h6 { color: var(--ls-text-heading); }
.ls-arena p, .ls-arena li, .ls-arena td   { color: var(--ls-text); }
/* :not(.ls-btn) — a gold CTA is a button, not a link. Elementor's Button
   widget emits an <a>, so without this exclusion the arena link colour would
   win on source order and put gold text on a gold fill. */
.ls-arena a:not(.ls-btn):not(.elementor-button) { color: var(--ls-link); }
.ls-arena .ls-btn-gold,
.ls-arena .ls-btn-gold:hover,
.ls-arena .ls-btn-gold:focus { color: var(--ls-ink-950); }
.ls-arena .ls-btn-ink,
.ls-arena .ls-btn-ink:hover  { color: var(--ls-bone-50); }


/* ==========================================================================
   7 · COMPONENT UTILITIES
   Drop the class into any Elementor widget's Advanced → CSS Classes, or use
   inside an HTML widget. Named ls-* so nothing collides with The7 or
   Elementor internals.
   ========================================================================== */

/* --- Eyebrow / kicker ------------------------------------------------- */
.ls-eyebrow {
  font-family: var(--ls-font-cond);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracking-eyebrow);
  font-weight: var(--ls-weight-semibold);
  font-size: var(--ls-text-xs);
  color: var(--ls-text-accent);
  display: inline-flex;
  align-items: center;
  gap: .7em;
}
.ls-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--ls-gold);
  display: inline-block;
  flex: none;
}
.ls-eyebrow.ls-no-rule::before { display: none; }

/* --- Display type ------------------------------------------------------ */
.ls-display {
  font-family: var(--ls-font-display);
  font-weight: var(--ls-weight-semibold);
  line-height: var(--ls-leading-display);
  letter-spacing: var(--ls-tracking-display);
  color: var(--ls-text-heading);
  margin: 0;
  text-wrap: pretty;
}
.ls-display em { color: var(--ls-gold); font-style: italic; }
.ls-serif { font-family: var(--ls-font-display); }
.ls-cond  { font-family: var(--ls-font-cond); }
.ls-tnum  { font-variant-numeric: tabular-nums; }

/* --- Gold rule (signature motif) --------------------------------------- */
.ls-gold-rule {
  height: 2px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--ls-gold) 12%,
              var(--ls-gold-bright) 50%, var(--ls-gold) 88%, transparent);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.ls-gold-rule.ls-flat { background: var(--ls-gold); box-shadow: none; }

/* --- Buttons ----------------------------------------------------------- */
.ls-btn {
  font-family: var(--ls-font-cond);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracking-label);
  font-weight: var(--ls-weight-semibold);
  font-size: 15px;
  line-height: 1;
  padding: 14px 30px;
  min-height: var(--ls-tap-min);
  border-radius: var(--ls-radius);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  text-decoration: none;
  transition: transform var(--ls-dur-press) var(--ls-ease),
              background var(--ls-dur-hover),
              box-shadow var(--ls-dur-hover),
              color var(--ls-dur-hover);
}
.ls-btn:active { transform: translateY(1px); }
.ls-btn:focus-visible { outline: none; box-shadow: var(--ls-focus-ring); }

.ls-btn-gold {
  background: var(--ls-gold-fill);
  color: var(--ls-ink-950);          /* text on gold is ALWAYS ink */
  box-shadow: var(--ls-shadow-gold);
}
.ls-btn-gold:hover,
.ls-btn-gold:focus { color: var(--ls-ink-950); box-shadow: var(--ls-shadow-gold-hover); }

.ls-btn-ink { background: var(--ls-ink-900); color: var(--ls-bone-50); }
.ls-btn-ink:hover { background: var(--ls-ink-800); color: var(--ls-bone-50); }

.ls-btn-ghost { background: transparent; border-color: var(--ls-gold-line); color: inherit; }
.ls-btn-ghost:hover { border-color: var(--ls-gold); background: var(--ls-gold-tint); }

.ls-btn-sm { padding: 9px 18px; font-size: 13px; min-height: 38px; }
.ls-btn-block { width: 100%; }

/* --- Chips ------------------------------------------------------------- */
.ls-chip {
  font-family: var(--ls-font-cond);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracking-chip);
  font-weight: var(--ls-weight-medium);
  font-size: var(--ls-text-2xs);
  padding: 5px 11px;
  border-radius: 2px;
  border: 1px solid var(--ls-gold-line);
  color: var(--ls-text-accent);
  background: var(--ls-gold-tint);
  display: inline-flex;
  align-items: center;
  gap: .4em;
}
.ls-chip-solid { background: var(--ls-ink-900); color: var(--ls-bone-50); border-color: var(--ls-ink-900); }
.ls-chip-muted { background: transparent; color: var(--ls-text-muted); border-color: var(--ls-stone-200); }

/* Status badge — the one place pill radius is allowed */
.ls-badge {
  font-family: var(--ls-font-cond);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracking-chip);
  font-weight: var(--ls-weight-bold);
  font-size: var(--ls-text-3xs);
  padding: 3px 10px;
  border-radius: var(--ls-radius-pill);
  display: inline-flex;
  align-items: center;
  gap: .4em;
}
.ls-badge-ok     { color: var(--ls-ok);     background: var(--ls-ok-bg);     border: 1px solid var(--ls-ok-line); }
.ls-badge-warn   { color: var(--ls-warn);   background: var(--ls-warn-bg);   border: 1px solid var(--ls-warn-line); }
.ls-badge-danger { color: var(--ls-danger); background: var(--ls-danger-bg); border: 1px solid var(--ls-danger-line); }
.ls-badge-info   { color: var(--ls-info);   background: var(--ls-info-bg);   border: 1px solid var(--ls-info-line); }

/* --- Inputs ------------------------------------------------------------ */
.ls-label {
  display: block;
  font-family: var(--ls-font-cond);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracking-label);
  font-size: var(--ls-text-2xs);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-text-muted);
  margin-bottom: 8px;
}
.ls-input {
  width: 100%;
  font-family: var(--ls-font-sans);
  font-size: var(--ls-text-input);
  padding: 14px 16px;
  min-height: var(--ls-tap-min);
  border-radius: var(--ls-radius);
  border: 1px solid var(--ls-input-line, var(--ls-line-strong));
  background: var(--ls-input-bg, var(--ls-white));
  color: var(--ls-text);
  transition: border-color var(--ls-dur-hover), box-shadow var(--ls-dur-hover);
}
.ls-input:focus { outline: none; border-color: var(--ls-gold); box-shadow: var(--ls-focus-ring); }

/* --- Stat readout ------------------------------------------------------ */
.ls-stat { font-family: var(--ls-font-cond); font-variant-numeric: tabular-nums; }
.ls-stat-num {
  font-weight: var(--ls-weight-bold);
  letter-spacing: .01em;
  line-height: 1;
  color: var(--ls-text-heading);
  display: block;
}
.ls-stat-num.ls-gold { color: var(--ls-text-money); }
.ls-stat-lab {
  font-size: var(--ls-text-2xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ls-text-muted);
  font-weight: var(--ls-weight-semibold);
  display: block;
  margin-top: 8px;
}
.ls-money {
  font-family: var(--ls-font-cond);
  font-weight: var(--ls-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--ls-text-money);
}
.ls-money.ls-zero { color: var(--ls-text-faint); }

/* --- Stamp / avatar ring ----------------------------------------------- */
.ls-stamp {
  width: 46px;
  height: 46px;
  border: 2px solid var(--ls-gold);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ls-font-display);
  font-weight: var(--ls-weight-bold);
  color: var(--ls-text-accent);
  position: relative;
  flex: none;
}
.ls-stamp::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--ls-gold-line);
  border-radius: 50%;
}

/* --- Corner brackets --------------------------------------------------- */
.ls-bracket { position: relative; }
.ls-bracket::before,
.ls-bracket::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ls-gold);
}
.ls-bracket::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.ls-bracket::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* --- Cards ------------------------------------------------------------- */
.ls-card {
  background: var(--ls-surface-raised);
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius-lg);
  overflow: hidden;
}
.ls-card-hover {
  transition: transform var(--ls-dur-hover) var(--ls-ease),
              box-shadow var(--ls-dur-hover);
}
.ls-card-hover:hover { transform: translateY(-3px); box-shadow: var(--ls-shadow-2); }

/* --- Data table -------------------------------------------------------- */
.ls-table { width: 100%; border-collapse: collapse; }
.ls-table th {
  font-family: var(--ls-font-cond);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: var(--ls-text-3xs);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-text-faint);
  text-align: left;
  padding: 12px 26px;
  border-bottom: 2px solid var(--ls-gold-line);
}
.ls-table td {
  padding: 15px 26px;
  border-bottom: 1px solid var(--ls-line);
  font-size: var(--ls-text-sm);
  color: var(--ls-text);
  vertical-align: middle;
}
.ls-table tbody tr:last-child td { border-bottom: 0; }
.ls-table th.ls-num,
.ls-table td.ls-num { text-align: right; font-variant-numeric: tabular-nums; }
.ls-table td.ls-money { text-align: right; font-size: 16.5px; }
/* Zebra is reserved for the long Event Log table only. */
.ls-table.ls-zebra tbody tr:nth-child(even) td { background: var(--ls-row-alt); }

/* --- Layout helper ----------------------------------------------------- */
.ls-wrap {
  max-width: var(--ls-content-max);
  margin: 0 auto;
  padding-inline: var(--ls-gutter);
}


/* ==========================================================================
   8 · ELEMENTOR BRIDGE
   Re-binds Elementor's generated globals to the tokens. Enter the hex in the
   panel (section 5) AND keep this block — the panel drives the editor UI,
   this guarantees the front end even if a global is renamed or re-saved.
   If you add custom globals, Elementor names them --e-global-color-<slug>;
   read the slug from the kit CSS and add a line here.
   ========================================================================== */
:root {
  --e-global-color-primary:   #C9A02C;   /* Gold      */
  --e-global-color-secondary: #14110C;   /* Ink 950   */
  --e-global-color-text:      #1B1710;   /* Ink 900   */
  --e-global-color-accent:    #A8801C;   /* Gold Deep */

  --e-global-typography-primary-font-family:   'Cormorant Garamond';
  --e-global-typography-secondary-font-family: 'Saira Condensed';
  --e-global-typography-text-font-family:      'Libre Franklin';
  --e-global-typography-accent-font-family:    'Saira Condensed';
}

/* Elementor container defaults for this build */
.e-con, .elementor-section-boxed > .elementor-container { --container-max-width: 1180px; }

/* Elementor Button widget → brand button. Add CSS class "ls-btn-gold" or
   "ls-btn-ghost" on the widget; this maps Elementor's inner element. */
.elementor-widget-button.ls-btn-gold .elementor-button,
.elementor-widget-button.ls-btn-ink  .elementor-button,
.elementor-widget-button.ls-btn-ghost .elementor-button {
  font-family: var(--ls-font-cond);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracking-label);
  font-weight: var(--ls-weight-semibold);
  font-size: 15px;
  padding: 14px 30px;
  min-height: var(--ls-tap-min);
  border-radius: var(--ls-radius);
  border: 1px solid transparent;
  transition: transform var(--ls-dur-press) var(--ls-ease), box-shadow var(--ls-dur-hover);
}
.elementor-widget-button.ls-btn-gold .elementor-button {
  background: var(--ls-gold-fill);
  color: var(--ls-ink-950);
  box-shadow: var(--ls-shadow-gold);
}
.elementor-widget-button.ls-btn-gold .elementor-button:hover { box-shadow: var(--ls-shadow-gold-hover); }
.ls-arena .elementor-widget-button.ls-btn-gold .elementor-button,
.ls-arena .elementor-widget-button.ls-btn-gold .elementor-button:hover {
  color: var(--ls-ink-950);   /* text on gold is ALWAYS ink, both temperatures */
}
.elementor-widget-button.ls-btn-ink .elementor-button {
  background: var(--ls-ink-900);
  color: var(--ls-bone-50);
}
.elementor-widget-button.ls-btn-ghost .elementor-button {
  background: transparent;
  border-color: var(--ls-gold-line);
  color: currentColor;
}
.elementor-widget-button.ls-btn-ghost .elementor-button:hover {
  border-color: var(--ls-gold);
  background: var(--ls-gold-tint);
}

/* Elementor Divider widget → gold rule. Class "ls-gold-rule" on the widget. */
.elementor-widget-divider.ls-gold-rule .elementor-divider-separator {
  border: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ls-gold) 12%,
              var(--ls-gold-bright) 50%, var(--ls-gold) 88%, transparent);
}


/* ==========================================================================
   9 · THE7 / GLOBAL BASE
   The7 sets its own body type and heading colours. These re-assert the brand
   at a specificity that clears the parent theme without !important.
   REQUIRED: The7 → Theme Options → Advanced → disable "Elementor typography",
   otherwise The7 injects font rules on .elementor-widget-heading and wins.
   ========================================================================== */
body,
body.the7-core,
.elementor-widget-text-editor {
  font-family: var(--ls-font-sans);
  font-size: var(--ls-text-base);
  line-height: var(--ls-leading-body);
  color: var(--ls-text);
  background: var(--ls-surface);
}

h1, h2, h3, h4,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title {
  font-family: var(--ls-font-display);
  font-weight: var(--ls-weight-semibold);
  line-height: var(--ls-leading-display);
  letter-spacing: var(--ls-tracking-display);
  color: var(--ls-text-heading);
  text-wrap: pretty;
}

h1 { font-size: var(--ls-display-xl); }
h2 { font-size: var(--ls-display-lg); }
h3 { font-size: var(--ls-display-md); }
h4 { font-size: var(--ls-display-sm); }

/* h5/h6 are label-class, not display-class */
h5, h6 {
  font-family: var(--ls-font-cond);
  text-transform: uppercase;
  letter-spacing: var(--ls-tracking-label);
  font-weight: var(--ls-weight-semibold);
  color: var(--ls-text-muted);
}
h5 { font-size: var(--ls-text-sm); }
h6 { font-size: var(--ls-text-2xs); }

a { color: var(--ls-link); text-decoration: none; transition: color var(--ls-dur-hover); }
a:hover, a:focus { color: var(--ls-link-hover); }

::selection { background: var(--ls-gold-tint); color: var(--ls-ink-950); }

:focus-visible { outline: 2px solid var(--ls-gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}