/**
 * Theme Name:        Ironpace
 * Theme URI:         https://ironpace.themeasy.co
 * Author:            Themeasy
 * Author URI:        https://themeasy.co
 * Description:       A charged, aurora-dark WordPress theme for run clubs, training studios and coached fitness communities — a near-black #0A0A14 ground with #17162B panels, and two saturated colours that never swap roles: lime #A3E635 is the action colour on every CTA, kicker, list mark and open state, violet #8B5CF6 the structure colour on every frame, glow and gradient origin. The aurora is treated as a material rather than a filter — the ground breathes between ink and deep indigo #1B1038 behind the hero and the join bands, and the second line of every display headline runs violet to lime. Kanit 700 sets condensed caps from the 64px hero and the 46px band title down to the 13px bracketed kicker, over Inter, at radius 8. Built for Elementor with seamless Themeasy and WooCommerce support.
 * Requires at least: 6.8
 * Tested up to:      7.0
 * Requires PHP:      7.4
 * Version:           1.0.0
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       ironpace
 * Domain Path:       /languages
 * Tags:              fitness, gym, sports, club, blog, custom-logo, custom-menu, editor-style, featured-images, full-width-template, one-column, right-sidebar, threaded-comments, translation-ready, wide-blocks
 */

/* ------------------------------------------------------------------------
 *
 * [Content Index]
 *
 * Sections 1-8 are theme-specific (colors, incl. Dark Mode); sections 9-14
 * are the shared token system, identical across every Themeasy theme except
 * two per-theme knobs: the radius scale (11) and the shadows (12).
 *
 * 1. Brand Colors
 * 2. Text Colors
 * 3. Background Colors
 * 4. Neutral Colors
 * 5. Border Colors
 * 6. Button Colors
 * 7. Feedback & States
 * 8. Dark Mode
 * 9. Typography
 * 10. Spacing
 * 11. Border Radius
 * 12. Shadow
 * 13. Transition
 * 14. Responsive Tokens
 *
 * ------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------
 * 1. Brand Colors
 * ------------------------------------------------------------------------ */

:root {

  /* Primary */
  --tms-primary-color: #8B5CF6;
  --tms-primary-color-10: color-mix(in srgb, var(--tms-primary-color) 10%, transparent);
  --tms-primary-color-15: color-mix(in srgb, var(--tms-primary-color) 15%, transparent);
  --tms-primary-color-25: color-mix(in srgb, var(--tms-primary-color) 25%, transparent);
  --tms-primary-color-50: color-mix(in srgb, var(--tms-primary-color) 50%, transparent);
  --tms-primary-color-75: color-mix(in srgb, var(--tms-primary-color) 75%, transparent);

  /* Secondary */
  --tms-secondary-color: #8FD321;
  --tms-secondary-color-10: color-mix(in srgb, var(--tms-secondary-color) 10%, transparent);
  --tms-secondary-color-15: color-mix(in srgb, var(--tms-secondary-color) 15%, transparent);
  --tms-secondary-color-25: color-mix(in srgb, var(--tms-secondary-color) 25%, transparent);
  --tms-secondary-color-50: color-mix(in srgb, var(--tms-secondary-color) 50%, transparent);
  --tms-secondary-color-75: color-mix(in srgb, var(--tms-secondary-color) 75%, transparent);

  /* Accent */
  --tms-accent-color: #A3E635;
}

/* ------------------------------------------------------------------------
 * 2. Text Colors
 * ------------------------------------------------------------------------ */

:root {
  --tms-body-color: #4C4B56;
  --tms-heading-color: #0A0A14;
  --tms-muted-color: #666670;
  --tms-link-color: #4E6E19;
}

/* ------------------------------------------------------------------------
 * 3. Background Colors
 * ------------------------------------------------------------------------ */

:root {
  --tms-bg-color: #F5F3FF;
  --tms-surface-color: #E7E5F1;
}

/* ------------------------------------------------------------------------
 * 4. Neutral Colors
 * ------------------------------------------------------------------------ */

:root {
  --tms-black-color: #0A0A14;
  --tms-white-color: #F5F3FF;
}

/* ------------------------------------------------------------------------
 * 5. Border Colors
 * ------------------------------------------------------------------------ */

:root {
  --tms-border-color: #D4D2DE;
  --tms-border-strong-color: #0A0A14;
}

/* ------------------------------------------------------------------------
 * 6. Button Colors
 * ------------------------------------------------------------------------ */

:root {
  --tms-button-bg-color: #A3E635;
  --tms-button-text-color: #0A0A14;
}

/* ------------------------------------------------------------------------
 * 7. Feedback & States
 * ------------------------------------------------------------------------ */

:root {
  --tms-info-color: #60A5FA;
  --tms-success-color: #A3E635;
  --tms-warning-color: #FBBF24;
  --tms-danger-color: #F87171;
}

/* ------------------------------------------------------------------------
 * 8. Dark Mode
 * ------------------------------------------------------------------------ */

:root .tms-dark-mode {

  /* Text Colors */
  --tms-body-color: #B3B2BD;
  --tms-heading-color: #F5F3FF;
  --tms-muted-color: #807F8C;
  --tms-link-color: #A3E635;

  /* Background Colors */
  --tms-bg-color: var(--tms-black-color);
  --tms-surface-color: #17162B;

  /* Border Colors */
  --tms-border-color: #2A2843;
  --tms-border-strong-color: #3E3D48;

  /* Button Colors */
  --tms-button-bg-color: #A3E635;
  --tms-button-text-color: var(--tms-black-color);

  /* Shadow */
  --tms-shadow-sm: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
  --tms-shadow-md: rgba(149, 157, 165, 0.1) 0px 8px 24px;
  --tms-shadow-lg: rgba(17, 12, 46, 0.1) 0px 48px 100px 0px;
}

.tms-dark-mode {
  background-color: var(--tms-bg-color);
  color: var(--tms-body-color);
}

/* ------------------------------------------------------------------------
 * 9. Typography
 *
 * All sizes sit on the 1/8 rem grid (whole 2px increments at a 16px root).
 * Body scale: single bump at the desktop breakpoint (see Responsive Tokens).
 * Heading scale: one ladder (1 / 1.125 / 1.25 / 1.5 / 1.75 / 2 / 2.5 / 3),
 * each breakpoint slides the h1-h6 window one step up.
 * ------------------------------------------------------------------------ */

:root {

  /* Font Families */
  --tms-body-font: system-ui, -apple-system, sans-serif;
  --tms-heading-font: system-ui, -apple-system, sans-serif;
  --tms-accent-font: system-ui, -apple-system, sans-serif;

  /* Body */
  --tms-font-size-xs:  0.75rem;
  --tms-font-size-sm:  0.875rem;
  --tms-font-size-md:  1rem;
  --tms-font-size-lg:  1.125rem;
  --tms-font-size-xl:  1.25rem;
  --tms-body-font-weight: 400;
  --tms-body-line-height: 1.5;
  --tms-body-letter-spacing: 0;

  /* Headings */
  --tms-h1-font-size: 2rem;
  --tms-h2-font-size: 1.75rem;
  --tms-h3-font-size: 1.5rem;
  --tms-h4-font-size: 1.25rem;
  --tms-h5-font-size: 1.125rem;
  --tms-h6-font-size: 1rem;
  --tms-heading-font-weight: 600;
  --tms-heading-line-height: 1.3;
  --tms-heading-letter-spacing: 0;

  /* Accent */
  --tms-accent-font-weight: 600;
  --tms-accent-line-height: 1.3;
  --tms-accent-letter-spacing: 0;

  /* Font Weights */
  --tms-semibold-font-weight: 600;
  --tms-bold-font-weight: 700;

  /* Button */
  --tms-button-font-weight: var(--tms-semibold-font-weight);
}

body {
  font-family: var(--tms-body-font);
  font-weight: var(--tms-body-font-weight);
  line-height: var(--tms-body-line-height);
  letter-spacing: var(--tms-body-letter-spacing);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tms-heading-font);
  font-weight: var(--tms-heading-font-weight);
  line-height: var(--tms-heading-line-height);
  letter-spacing: var(--tms-heading-letter-spacing);
}

h1 { font-size: var(--tms-h1-font-size); }
h2 { font-size: var(--tms-h2-font-size); }
h3 { font-size: var(--tms-h3-font-size); }
h4 { font-size: var(--tms-h4-font-size); }
h5 { font-size: var(--tms-h5-font-size); }
h6 { font-size: var(--tms-h6-font-size); }

/* ------------------------------------------------------------------------
 * 10. Spacing
 *
 * One ladder (0.5 / 1 / 1.5 / 2 / 2.5 / 3 / 4 / 6): xs-md are static
 * component spacings; lg-xxl are layout spacings that climb the ladder
 * per breakpoint (see Responsive Tokens).
 * ------------------------------------------------------------------------ */

:root {
  --tms-spacing-xs: 0.5rem;
  --tms-spacing-sm: 1rem;
  --tms-spacing-md: 1.5rem;
  --tms-spacing-lg: 2rem;
  --tms-spacing-xl: 2.5rem;
  --tms-spacing-xxl: 3rem;

  /*
   * Layout container: exact content width + edge gutter (consumed by
   * .tbase-container). Width mirrors the Elementor Site Settings value at
   * runtime (theme inline style) and the Themeasy Settings override
   * (plugin settings.css); the gutter only kicks in when the viewport
   * touches the content.
   */
  --tms-container-width: 1240px;
  --tms-container-gutter: 1rem;
}

/* ------------------------------------------------------------------------
 * 11. Border Radius
 *
 * Per-theme knob: sm/md/lg set the theme's corner style (0 = square) and
 * may differ between themes; the pill radius is shared.
 * ------------------------------------------------------------------------ */

:root {
  --tms-radius-sm: 0.5rem;
  --tms-radius-md: 0.75rem;
  --tms-radius-lg: 1rem;
  --tms-radius-pill: 999px;
}

/* ------------------------------------------------------------------------
 * 12. Shadow
 *
 * Per-theme knob: sm/md/lg may differ between themes (a flat theme sets
 * them to transparent). Dark Mode sets its own in section 8.
 * ------------------------------------------------------------------------ */

:root {
  --tms-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --tms-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --tms-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ------------------------------------------------------------------------
 * 13. Transition
 * ------------------------------------------------------------------------ */

:root {
  --tms-transition-fast: 200ms ease;
  --tms-transition-base: 300ms ease;
  --tms-transition-medium: 400ms ease;
  --tms-transition-slow: 600ms ease;
}

/* ------------------------------------------------------------------------
 * 14. Responsive Tokens
 * ------------------------------------------------------------------------ */

@media (min-width: 768px) {
  :root {

    /* Typography — Headings */
    --tms-h1-font-size: 2.5rem;
    --tms-h2-font-size: 2rem;
    --tms-h3-font-size: 1.75rem;
    --tms-h4-font-size: 1.5rem;
    --tms-h5-font-size: 1.25rem;
    --tms-h6-font-size: 1.125rem;

    /* Spacing */
    --tms-spacing-lg:  2.5rem;
    --tms-spacing-xl:  3rem;
    --tms-spacing-xxl: 4rem;
  }
}

@media (min-width: 1024px) {
  :root {

    /* Typography — Body */
    --tms-font-size-xs:  0.875rem;
    --tms-font-size-sm:  1rem;
    --tms-font-size-md:  1.125rem;
    --tms-font-size-lg:  1.25rem;
    --tms-font-size-xl:  1.375rem;

    /* Typography — Headings */
    --tms-h1-font-size: 3rem;
    --tms-h2-font-size: 2.5rem;
    --tms-h3-font-size: 2rem;
    --tms-h4-font-size: 1.75rem;
    --tms-h5-font-size: 1.5rem;
    --tms-h6-font-size: 1.25rem;

    /* Spacing */
    --tms-spacing-lg:  3rem;
    --tms-spacing-xl:  4rem;
    --tms-spacing-xxl: 6rem;
  }
}