/* ============================================================
   Synergy Dynamics Balance — Design System
   Tokens · Reset · Base
   Hugo E. Vargas · synergydynamicsbalance.com
   ============================================================ */

:root {
  /* ──── COLORES PRIMARIOS ──── */
  --color-primary:         #1D9E75;   /* teal — sanación, confianza */
  --color-primary-dark:    #0F6E56;   /* hover, bordes */
  --color-primary-darker:  #085041;   /* texto sobre fondos claros */
  --color-primary-light:   #E1F5EE;   /* fondos suaves */
  --color-primary-xlight:  #F2FBF7;   /* fondos muy suaves */

  /* ──── COLORES SECUNDARIOS ──── */
  --color-secondary:       #BA7517;   /* amber — sabiduría, iluminación */
  --color-secondary-dark:  #854F0B;
  --color-secondary-light: #FAEEDA;
  --color-secondary-xlight:#FEF9EF;

  /* ──── ACENTO ESPIRITUAL ──── */
  --color-accent:          #534AB7;   /* purple — espiritualidad */
  --color-accent-dark:     #3C3489;
  --color-accent-light:    #EEEDFE;

  /* ──── NEUTROS ──── */
  --color-bg:              #FAFAF8;   /* fondo principal — off-white cálido */
  --color-bg-alt:          #F1EFE8;   /* secciones alternas */
  --color-bg-dark:         #2C2C2A;   /* footer, secciones oscuras */
  --color-text:            #1E1E1C;   /* texto principal */
  --color-text-muted:      #5F5E5A;   /* texto secundario */
  --color-text-subtle:     #888780;   /* captions, meta */
  --color-text-inverse:    #FAFAF8;   /* texto sobre fondos oscuros */
  --color-border:          rgba(44,44,42,0.10);
  --color-border-strong:   rgba(44,44,42,0.20);

  /* ──── SEMÁNTICOS ──── */
  --color-success:         #1D9E75;
  --color-warning:         #BA7517;
  --color-error:           #D85A30;
  --color-info:            #185FA5;

  /* ──── TIPOGRAFÍA ──── */
  --font-serif:   'Playfair Display', 'Georgia', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ──── ESCALA TIPOGRÁFICA ──── */
  --text-xs:     0.75rem;    /* 12px */
  --text-sm:     0.875rem;   /* 14px */
  --text-base:   1.0625rem;  /* 17px — body legible */
  --text-md:     1.25rem;    /* 20px */
  --text-lg:     1.5rem;     /* 24px */
  --text-xl:     2rem;       /* 32px */
  --text-2xl:    2.5rem;     /* 40px */
  --text-3xl:    3rem;       /* 48px */
  --text-4xl:    3.5rem;     /* 56px — H1 hero */
  --text-5xl:    4.5rem;     /* 72px — display hero */

  /* ──── ESPACIADO (escala 4px) ──── */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ──── LAYOUT ──── */
  --max-width:       1200px;
  --max-width-text:  720px;    /* columna de texto */
  --max-width-wide:  1440px;
  --section-py:      var(--space-24);
  --section-px:      var(--space-6);

  /* ──── BORDES ──── */
  --radius-sm:    6px;
  --radius:       12px;
  --radius-lg:    20px;
  --radius-xl:    32px;
  --radius-pill:  999px;

  /* ──── SOMBRAS ──── */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:       0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:    0 12px 32px rgba(0,0,0,0.10);
  --shadow-focus: 0 0 0 3px rgba(29,158,117,0.25);

  /* ──── TRANSICIONES ──── */
  --transition-fast:   150ms ease;
  --transition:        250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ──── Z-INDEX ──── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-overlay:  20;
  --z-modal:    30;
  --z-nav:      40;
  --z-toast:    50;
}

/* ============================================================
   RESET Y BASE
   ============================================================ */

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-serif); font-weight: 700; line-height: 1.2; }
h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; line-height: 1.3; }

h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl)); }
h2 { font-size: clamp(var(--text-xl), 3.5vw, var(--text-3xl)); }
h3 { font-size: clamp(var(--text-lg), 2.5vw, var(--text-xl)); }
h4 { font-size: var(--text-md); }

p { font-size: var(--text-base); }
p + p { margin-top: var(--space-4); }

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

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-dark); }

ul, ol { list-style: none; }

button { font-family: inherit; cursor: pointer; }

::selection { background: var(--color-primary-light); color: var(--color-primary-darker); }

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Accesibilidad — saltar al contenido */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: var(--z-toast);
  background: var(--color-primary);
  color: white;
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: white; }

/* Texto solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}