/* ==========================================================================
   Food4Fitness Design Tokens
   Main file that imports all design token definitions
   ========================================================================== */

/* The @import chain that used to live here is gone: the design tokens are
   enqueued as separate stylesheets now (f4f_enqueue_design_tokens in
   includes/helpers/script-helpers.php) so the browser fetches them together
   instead of discovering them one after another. */

/* Global Reset and Base Styles */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-primary);
  color: var(--color-text-primary);
  background-color: var(--color-background);
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

/* Food4Fitness Plugin Scope */no 
.food4fitness-plugin {
  font-family: var(--font-family-primary);
  color: var(--color-text-primary);
}

.food4fitness-plugin * {
  box-sizing: border-box;
}

/* Common Element Overrides within Plugin */
/*
 * COMMENTED OUT: Global typography selectors that interfere with component-specific designs
 *
 * Reason: The Figma design system guide doesn't reflect actual component implementations.
 * Each component has unique typography specifications (different font-sizes, line-heights, etc.)
 * that don't follow the design tokens. To achieve pixel-perfect Figma compliance,
 * components must define their own typography without global overrides.
 *
 * Components should use utility classes (.f4f-h1, .f4f-h2, etc.) or their own
 * BEM-based typography definitions instead of relying on element selectors.
 */

/*
.food4fitness-plugin h1 {
  font-size: var(--font-h1-size);
  font-weight: var(--font-h1-weight);
  line-height: var(--font-h1-line-height);
  letter-spacing: var(--font-h1-letter-spacing);
  color: var(--color-text-primary);
  margin: 0;
}

.food4fitness-plugin h2 {
  font-size: var(--font-h2-size);
  font-weight: var(--font-h2-weight);
  line-height: var(--font-h2-line-height);
  letter-spacing: var(--font-h2-letter-spacing);
  color: var(--color-text-primary);
  margin: 0;
}

.food4fitness-plugin h3 {
  font-size: var(--font-h3-size);
  font-weight: var(--font-h3-weight);
  line-height: var(--font-h3-line-height);
  letter-spacing: var(--font-h3-letter-spacing);
  color: var(--color-text-primary);
  margin: 0;
}

.food4fitness-plugin h4 {
  font-size: var(--font-h4-size);
  font-weight: var(--font-h4-weight);
  line-height: var(--font-h4-line-height);
  letter-spacing: var(--font-h4-letter-spacing);
  color: var(--color-text-primary);
  margin: 0;
}

.food4fitness-plugin p {
  font-size: var(--font-body-16-regular-size);
  font-weight: var(--font-body-16-regular-weight);
  line-height: var(--font-body-16-regular-line-height);
  letter-spacing: var(--font-body-16-regular-letter-spacing);
  margin: 0;
}
*/

.food4fitness-plugin a {
  color: var(--color-link);
  text-decoration: none;
}

.food4fitness-plugin a:hover {
  text-decoration: underline;
}