/**
 * Theme Name:        Achroma
 * Theme URI:         https://achroma.themeasy.co
 * Author:            Themeasy
 * Author URI:        https://themeasy.co
 * Description:       A hueless WordPress theme for brand and digital studios — one grotesk from a 200px wordmark down to the 13px kicker, five achromatic steps from ink to silver, and 1px hairlines instead of boxes at radius 0. 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:       achroma
 * Domain Path:       /languages
 * Tags:              agency, portfolio, creative, studio, 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: #0D0D0D;
  --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: #8F8F8F;
  --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: #0D0D0D;
}

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

:root {
  --tms-body-color: #5C5C5C;
  --tms-heading-color: #0D0D0D;
  --tms-muted-color: #8F8F8F;
  --tms-link-color: var(--tms-primary-color);
}

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

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

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

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

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

:root {
  --tms-border-color: #C9C9C9;
  --tms-border-strong-color: #0D0D0D;
}

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

:root {
  --tms-button-bg-color: #0D0D0D;
  --tms-button-text-color: #E5E5E5;
}

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

:root {
  --tms-info-color: #5C5C5C;
  --tms-success-color: #262626;
  --tms-warning-color: #8F8F8F;
  --tms-danger-color: #0D0D0D;
}

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

:root .tms-dark-mode {

  /* Text Colors */
  --tms-body-color: #E5E5E5;
  --tms-heading-color: #FFFFFF;
  --tms-muted-color: #9A9A9A;
  --tms-link-color: #FFFFFF;

  /* Background Colors */
  --tms-bg-color: #0D0D0D;
  --tms-surface-color: #161616;

  /* Border Colors */
  --tms-border-color: #262626;
  --tms-border-strong-color: #5C5C5C;

  /* Button Colors */
  --tms-button-bg-color: #E5E5E5;
  --tms-button-text-color: #0D0D0D;

  /* 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;
  --tms-radius-md: 0;
  --tms-radius-lg: 0;
  --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;
  }
}