/* Import Google Fonts with display=swap */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=DM+Mono:wght@300;400;500&display=swap');


@font-face {
  font-family: 'Bricap';
  src: url('../fonts/Kregan-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

:root {
  /* ============================================
     COLOR SYSTEM
     ============================================ */

  /* Primary Colors */
  --color-brick: #da7756;          /* Color principal — ladrillo */
  --color-concrete: #5b5b5b;       /* Color secundario — concreto */
  --color-cement: #e8f0e9;         /* Color acento — verde cemento muy suave */

  /* Surface Colors */
  --color-bg: #f5f2ef;             /* Fondo cálido, casi hueso */
  --color-surface: #ffffff;

  /* Text Colors */
  --color-text-primary: #1a1a18;   /* Negro cálido, no frío */
  --color-text-secondary: #5b5b5b; /* Mismo que concreto */
  --color-text-muted: #9a9690;

  /* Interactive States */
  --color-brick-hover: #e88a6d;    /* Brick más claro para hover */
  --color-brick-light: #f0a58a;    /* Brick suave para acentos */

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

  /* Font Families */
  --font-display: 'Instrument Serif', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* Font Sizes - Fluid Typography usando clamp() */
  --text-xs: clamp(0.7rem, 1vw, 0.75rem);
  --text-sm: clamp(0.8rem, 1.2vw, 0.875rem);
  --text-base: clamp(0.9rem, 1.5vw, 1rem);
  --text-lg: clamp(1rem, 2vw, 1.125rem);
  --text-xl: clamp(1.1rem, 2.5vw, 1.25rem);
  --text-hero: clamp(1.8rem, 5vw, 4.5rem);

  /* ============================================
     SPACING SYSTEM
     ============================================ */

  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-24: 6rem;     /* 96px */

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

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 9999px;

  /* ============================================
     TRANSITIONS & ANIMATIONS
     ============================================ */

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Easing curves */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);

  /* ============================================
     SHADOWS (subtle, para futuros usos)
     ============================================ */

  --shadow-sm: 0 1px 2px 0 rgba(26, 26, 24, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(26, 26, 24, 0.08);
  --shadow-lg: 0 10px 15px -3px rgba(26, 26, 24, 0.1);
}

/* ============================================
   BASE TYPOGRAPHY STYLES
   ============================================ */

body {
  font-family: 'var(--font-body)';
  font-size: var(--text-base);
  color: var(--color-text-primary);
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bricap', sans-serif;
  font-weight: 400;
}