/**
 * Theme Name:        Voidrail
 * Theme URI:         https://voidrail.themeasy.co
 * Author:            Themeasy
 * Author URI:        https://themeasy.co
 * Description:       A dark, monospace WordPress theme for the independent software engineer — GitHub graphite #0D1117 end to end, JetBrains Mono on every heading, figure and label, and a single signal green #3FB950 allowed on exactly four things: bracketed kickers, progress arcs and rails, primary CTAs and the availability line. One tile does the rest — a #161B22 fill inside a 1px #21262D hairline at radius 6 with 32px of padding — reused for a counter, a service card, a contact form and the footer status strip, the way a code host repeats one unit down a page. JetBrains Mono 700 runs the display from the 140px error code and the 64px hero down to the 13px label, with Inter reading the copy at 17px. 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:       voidrail
 * Domain Path:       /languages
 * Tags:              developer, portfolio, freelancer, engineer, dark, blog, custom-colors, 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: #238636;
  --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: #30363D;
  --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: #3FB950;
}

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

:root {
  --tms-body-color: #424A53;
  --tms-heading-color: #1F2328;
  --tms-muted-color: #59636E;
  --tms-link-color: #1A7F37;
}

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

:root {
  --tms-bg-color: #FFFFFF;
  --tms-surface-color: #F6F8FA;
}

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

:root {
  --tms-black-color: #010409;
  --tms-white-color: #E6EDF3;
}

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

:root {
  --tms-border-color: #D1D9E0;
  --tms-border-strong-color: #9198A1;
}

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

:root {
  --tms-button-bg-color: #1A7F37;
  --tms-button-text-color: #FFFFFF;
}

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

:root {
  --tms-info-color: #58A6FF;
  --tms-success-color: #3FB950;
  --tms-warning-color: #D29922;
  --tms-danger-color: #F85149;
}

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

:root .tms-dark-mode {

  /* Text Colors */
  --tms-body-color: #8B949E;
  --tms-heading-color: #E6EDF3;
  --tms-muted-color: #6E7681;
  --tms-link-color: #3FB950;

  /* Background Colors */
  --tms-bg-color: #0D1117;
  --tms-surface-color: #161B22;

  /* Border Colors */
  --tms-border-color: #21262D;
  --tms-border-strong-color: #30363D;

  /* Button Colors */
  --tms-button-bg-color: #3FB950;
  --tms-button-text-color: #0D1117;

  /* 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.375rem;
  --tms-radius-md: 0.5625rem;
  --tms-radius-lg: 0.75rem;
  --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;
  }
}