/**
 * Theme Name:        Prio
 * Theme URI:         https://prio.themeasy.co
 * Author:            Themeasy
 * Author URI:        https://themeasy.co
 * Description:       Prio is a modern WordPress theme crafted for SaaS platforms, software companies, and tech startups. Featuring a dark indigo visual style, full Elementor compatibility, and enhanced design flexibility through Themeasy, it provides a polished foundation for building elegant, high-converting websites.
 * Requires at least: 5.8
 * Tested up to:      6.8
 * 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:       prio
 * Domain Path:       /languages
 * Tags:              blog, custom-logo, custom-menu, editor-style, featured-images, full-width-template, one-column, right-sidebar, threaded-comments, translation-ready, wide-blocks
 */

/* ------------------------------------------------------------------------
 *
 * [Content Index]
 *
 * 1. Brand Colors
 * 2. Text Colors
 * 3. Background Colors
 * 4. Neutral Colors
 * 5. Border Colors
 * 6. Button Colors
 * 7. Feedback & States
 * 8. Typography
 * 9. Spacing
 * 10. Border Radius
 * 11. Shadow
 * 12. Transition
 * 13. Dark Mode
 * 14. Responsive Tokens
 *
 * ------------------------------------------------------------------------ */

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

:root {

  /* Primary */
  --tms-primary-color: #6366F1;
  --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: #A5B4FC;
  --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: #A7F3D0;
}

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

:root {
  --tms-body-color: #3B4550;
  --tms-heading-color: #1D2023;
  --tms-muted-color: #6C757D;
  --tms-link-color: var(--tms-primary-color);
}

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

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

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

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

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

:root {
  --tms-border-color: var(--tms-primary-color-25);
  --tms-border-strong-color: #1E1B4B;
}

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

:root {
  --tms-button-bg-color: var(--tms-primary-color);
  --tms-button-text-color: #FFFFFF;
}

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

:root {
  --tms-info-color: #0077B6;
  --tms-success-color: #38A3A5;
  --tms-warning-color: #FCA311;
  --tms-danger-color: #E63946;
}

/* ------------------------------------------------------------------------
 * 8. Typography
 * ------------------------------------------------------------------------ */

: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.8rem;
  --tms-h3-font-size: 1.6rem;
  --tms-h4-font-size: 1.4rem;
  --tms-h5-font-size: 1.2rem;
  --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-button-font-weight: 600;
  --tms-bold-font-weight: 700;
}

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); }

/* ------------------------------------------------------------------------
 * 9. Spacing
 * ------------------------------------------------------------------------ */

: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;
}

/* ------------------------------------------------------------------------
 * 10. Border Radius
 * ------------------------------------------------------------------------ */

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

/* ------------------------------------------------------------------------
 * 11. Shadow
 * ------------------------------------------------------------------------ */

: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);
}

/* ------------------------------------------------------------------------
 * 12. Transition
 * ------------------------------------------------------------------------ */

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

/* ------------------------------------------------------------------------
 * 13. Dark Mode
 * ------------------------------------------------------------------------ */

:root .tms-dark-mode {

  /* Text Colors */
  --tms-body-color: #94A3B8;
  --tms-heading-color: #FFFFFF;
  --tms-muted-color: #6B7280;
  --tms-link-color: var(--tms-secondary-color);

  /* Background Colors */
  --tms-bg-color: #0A0A14;
  --tms-surface-color: #0F172A;

  /* Border Colors */
  --tms-border-color: #1E1B4B;
  --tms-border-strong-color: #FFFFFF;

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

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

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

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

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

    /* Typography — Body */
    --tms-font-size-xs:  0.8125rem;
    --tms-font-size-sm:  0.9375rem;
    --tms-font-size-md:  1.0625rem;
    --tms-font-size-lg:  1.1875rem;
    --tms-font-size-xl:  1.3125rem;

    /* Typography — Headings */
    --tms-h1-font-size: 2.5rem;
    --tms-h2-font-size: 2.25rem;
    --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:  2.25rem;
    --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.75rem;
    --tms-h3-font-size: 2.5rem;
    --tms-h4-font-size: 2.25rem;
    --tms-h5-font-size: 2rem;
    --tms-h6-font-size: 1.75rem;

    /* Spacing */
    --tms-spacing-lg:  2.5rem;
    --tms-spacing-xl:  3.5rem;
    --tms-spacing-xxl: 6rem;
  }
}