/*
Theme Name: ServiHispano
Theme URI: https://servihispano.com
Author: ServiHispano
Author URI: https://servihispano.com
Description: Tema nativo de alto rendimiento para el directorio de servicios del hogar en español en EE.UU. ServiHispano. Basado en arquitectura limpia, carga instantánea y optimización SEO / Core Web Vitals.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: servi-hispano
*/

/* Reset & Base Variables */
:root {
  --color-primary: #002045;
  --color-primary-container: #1a365d;
  --color-on-primary: #ffffff;
  --color-secondary: #875200;
  --color-secondary-container: #ffb55c;
  --color-on-secondary: #ffffff;
  --color-secondary-fixed: #ffddba;
  --color-background: #f9f9ff;
  --color-surface: #f9f9ff;
  --color-surface-container: #e7eeff;
  --color-surface-container-low: #f0f3ff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-high: #dee8ff;
  --color-surface-variant: #d8e3fa;
  --color-on-surface: #111c2c;
  --color-on-surface-variant: #43474e;
  --color-outline: #74777f;
  --color-outline-variant: #c4c6cf;
  --color-error: #ba1a1a;
  
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --container-max: 1280px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  --shadow-sm: 0px 2px 6px rgba(26, 54, 93, 0.04);
  --shadow-md: 0px 4px 16px rgba(26, 54, 93, 0.08);
  --shadow-lg: 0px 8px 28px rgba(26, 54, 93, 0.12);
  --shadow-card: 0px 4px 12px rgba(26, 54, 93, 0.05);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-base);
  background-color: var(--color-background);
  color: var(--color-on-surface);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined[data-weight="fill"],
.material-symbols-outlined.fill-1 {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}