/**
 * Theme Name:        Ledger
 * Theme URI:         https://ledger.themeasy.co
 * Author:            Themeasy
 * Author URI:        https://themeasy.co
 * Description:       A fintech WordPress theme for payments, settlement and treasury products — a bone-white canvas alternating with near-black ink panels, and emerald (#10B981) landing in exactly four places: counted figures, primary CTAs, code-route labels and check marks. Cards are containers rather than widgets: a 1px hairline at radius 16 over frosted glass on ink and stone on canvas, so counters, rate sheets and even the contact form wear the same chrome. Inter runs from the 56px display down to the 12px uppercase label while JetBrains Mono carries every number, eyebrow and route. 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:       ledger
 * Domain Path:       /languages
 * Tags:              fintech, payments, treasury, saas, business, 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: #10B981;
  --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: #10B981;
  --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: #10B981;
}

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

:root {
  --tms-body-color: #111111;
  --tms-heading-color: #111111;
  --tms-muted-color: #6E6E6E;
  --tms-link-color: var(--tms-primary-color);
}

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

:root {
  --tms-bg-color: #FAFAFA;
  --tms-surface-color: #F5F5F4;
}

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

:root {
  --tms-black-color: #111111;
  --tms-white-color: #FAFAFA;
}

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

:root {
  --tms-border-color: #E7E5E4;
  --tms-border-strong-color: #111111;
}

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

:root {
  --tms-button-bg-color: #10B981;
  --tms-button-text-color: #111111;
}

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

:root {
  --tms-info-color: #0284C7;
  --tms-success-color: #10B981;
  --tms-warning-color: #D97706;
  --tms-danger-color: #DC2626;
}

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

:root .tms-dark-mode {

  /* Text Colors */
  --tms-body-color: rgba(250, 250, 250, 0.62);
  --tms-heading-color: #FAFAFA;
  --tms-muted-color: rgba(250, 250, 250, 0.45);
  --tms-link-color: #10B981;

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

  /* Border Colors */
  --tms-border-color: rgba(250, 250, 250, 0.14);
  --tms-border-strong-color: #FAFAFA;

  /* Button Colors */
  --tms-button-bg-color: #10B981;
  --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: 1rem;
  --tms-radius-md: 1.5rem;
  --tms-radius-lg: 2rem;
  --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;
  }
}