/* Reformix — Design Tokens
 * Generado a partir de design-system.md + design-tokens.json
 * Stack: Tailwind + shadcn/ui (compatibilidad con CSS custom properties)
 * Versión: 1.0 (2026-05-24)
 */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============================================
   * COLOR — Brand (Architectural Warmth)
   * ============================================ */

  /* Primary — Verde oliva */
  --color-primary-50:  #F4F8F5;
  --color-primary-100: #E8F0EB;
  --color-primary-300: #A8C8B5;
  --color-primary-500: #4D8A6D;
  --color-primary-700: #2F5C46;
  --color-primary-900: #1F3A2E;

  /* Accent — Terracota */
  --color-accent-100: #FAEAE0;
  --color-accent-400: #E08A5F;
  --color-accent-600: #C25E33;
  --color-accent-900: #7A3517;

  /* ============================================
   * COLOR — Neutral (Stone — warm grays con tinte oliva)
   * ============================================ */

  --color-white:       #FFFFFF;
  --color-neutral-50:  #F7F8F7;
  --color-neutral-100: #EDEFED;
  --color-neutral-200: #DDE0DD;
  --color-neutral-300: #C4C9C4;
  --color-neutral-400: #9DA29D;
  --color-neutral-500: #7A807A;
  --color-neutral-700: #4A4E4A;
  --color-neutral-900: #262826;
  --color-neutral-950: #161816;

  /* ============================================
   * COLOR — Semantic
   * ============================================ */

  --color-success-100: #E0F0E6;
  --color-success-500: #4DAA73;
  --color-success-700: #2D7A4F;

  --color-warning-100: #FAEFD3;
  --color-warning-500: #DA9A2C;
  --color-warning-700: #9A6B0E;

  --color-danger-100: #FAE0DA;
  --color-danger-500: #D85940;
  --color-danger-700: #A8331F;

  --color-info-100: #DDEDF5;
  --color-info-500: #3D8AAA;
  --color-info-700: #1F5C7A;

  /* ============================================
   * COLOR — Surface aliases (uso semántico en componentes)
   * ============================================ */

  --surface-background:       var(--color-white);
  --surface-background-muted: var(--color-neutral-50);
  --surface-background-emphasis: var(--color-primary-50);
  --surface-foreground:       var(--color-neutral-950);
  --surface-foreground-muted: var(--color-neutral-500);
  --surface-border:           var(--color-neutral-200);
  --surface-border-strong:    var(--color-neutral-300);

  /* ============================================
   * TYPOGRAPHY
   * ============================================ */

  --font-display: 'Instrument Serif', Georgia, serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --leading-tight:    1.1;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.6;

  /* ============================================
   * SPACING (base 4px, coherente con Tailwind)
   * ============================================ */

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ============================================
   * CONTAINER WIDTHS
   * ============================================ */

  --container-narrow:  720px;
  --container-default: 1200px;
  --container-wide:    1440px;

  --gutter-mobile:  24px;
  --gutter-desktop: 48px;

  /* ============================================
   * BORDER RADIUS
   * ============================================ */

  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ============================================
   * SHADOWS (warm, base neutral-950 — no negro puro)
   * ============================================ */

  --shadow-xs:   0 1px 2px rgba(22, 24, 22, 0.05);
  --shadow-sm:   0 1px 3px rgba(22, 24, 22, 0.08), 0 1px 2px rgba(22, 24, 22, 0.04);
  --shadow-md:   0 4px 6px rgba(22, 24, 22, 0.07), 0 2px 4px rgba(22, 24, 22, 0.04);
  --shadow-lg:   0 10px 15px rgba(22, 24, 22, 0.08), 0 4px 6px rgba(22, 24, 22, 0.05);
  --shadow-xl:   0 20px 25px rgba(22, 24, 22, 0.1),  0 10px 10px rgba(22, 24, 22, 0.04);
  --shadow-glow: 0 0 0 4px rgba(47, 92, 70, 0.15);

  /* ============================================
   * MOTION
   * ============================================ */

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  --easing-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --easing-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ============================================
   * Z-INDEX scale (orden visual)
   * ============================================ */

  --z-dropdown: 50;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-popover:  400;
  --z-toast:    500;
}

/* ============================================
 * Base styles
 * ============================================ */

html {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--surface-foreground);
  background: var(--surface-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  line-height: var(--leading-relaxed);
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-tight);
  color: var(--color-neutral-950);
}

h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-neutral-900);
}

/* ============================================
 * Reduced motion
 * ============================================ */

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