/**
 * Theme Name:        Basis
 * Theme URI:         https://basis.themeasy.co
 * Author:            Themeasy
 * Author URI:        https://themeasy.co
 * Description:       A fintech WordPress theme for treasury, settlement and payments platforms — pure white canvas, #0A2540 navy ink, and exactly one hue: indigo #4F46E5 carries every pre-title, figure, chart bar and primary CTA and appears nowhere else. Cards are containers rather than widgets: one locked frame of 1px hairline at radius 12, filled porcelain on the white bands and white on the porcelain ones, so a rate sheet, a counter bento and the contact form all wear it. Inter is the only family in the theme, running from the 60px hero down to the 11px uppercase label — the figures earn their weight from size and hue, not from a second typeface. 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:       basis
 * Domain Path:       /languages
 * Tags:              fintech, treasury, payments, saas, minimalist, 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: #0A2540;
  --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: #EEF2FF;
  --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: #4F46E5;
}

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

:root {
  --tms-body-color: #0A2540;
  --tms-heading-color: #0A2540;
  --tms-muted-color: #677889;
  --tms-link-color: #4F46E5;
}

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

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

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

:root {
  --tms-black-color: #0A2540;
  --tms-white-color: #FFFFFF;
}

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

:root {
  --tms-border-color: #EEF2FF;
  --tms-border-strong-color: #C7D2FE;
}

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

:root {
  --tms-button-bg-color: #4F46E5;
  --tms-button-text-color: #FFFFFF;
}

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

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

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

:root .tms-dark-mode {

  /* Text Colors */
  --tms-body-color: rgba(255, 255, 255, 0.78);
  --tms-heading-color: #FFFFFF;
  --tms-muted-color: rgba(255, 255, 255, 0.55);
  --tms-link-color: #C7D2FE;

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

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

  /* Button Colors */
  --tms-button-bg-color: #4F46E5;
  --tms-button-text-color: #FFFFFF;

  /* 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.75rem;
  --tms-radius-md: 1.125rem;
  --tms-radius-lg: 1.5rem;
  --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;
  }
}