/* tokens.css
   Design tokens (Construye.es)
   - Mobile-first
   - Usa variables semánticas (no hardcodear colores en components)
*/

:root {
  /* -------------------------------------------------------------- */
  /* Color scheme                                                    */
  /* -------------------------------------------------------------- */
  color-scheme: light;

  /* Core semantic colors */
  --bg: #f6f7fb;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;

  --primary: #2563eb;
  --primary-2: #7c3aed;

  --danger: #dc2626;
  --success: #16a34a;
  --warning: #f59e0b;

  --border: rgba(15, 23, 42, 0.12);

  /* Extra helpful tokens (optional but handy) */
  --overlay: rgba(15, 23, 42, 0.55);
  --focus: rgba(37, 99, 235, 0.45);

  /* -------------------------------------------------------------- */
  /* Typography                                                      */
  /* -------------------------------------------------------------- */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Scale (mobile-first) */
  --fs-1: 12px;  /* micro labels (avoid as base) */
  --fs-2: 14px;  /* secondary text */
  --fs-3: 16px;  /* base */
  --fs-4: 18px;  /* lead */
  --fs-5: 22px;  /* section titles */
  --fs-6: 28px;  /* page titles */

  /* Line heights */
  --lh-1: 1.15;
  --lh-2: 1.35;
  --lh-3: 1.55;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* -------------------------------------------------------------- */
  /* Spacing (4px base)                                              */
  /* -------------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;

  /* -------------------------------------------------------------- */
  /* Radius                                                          */
  /* -------------------------------------------------------------- */
  --r-1: 10px;
  --r-2: 14px;
  --r-3: 18px;
  --r-4: 24px;

  /* -------------------------------------------------------------- */
  /* Shadows                                                         */
  /* -------------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 8px 20px rgba(15, 23, 42, 0.10);
  --shadow-3: 0 18px 50px rgba(15, 23, 42, 0.18);

  /* -------------------------------------------------------------- */
  /* Layout                                                          */
  /* -------------------------------------------------------------- */
  --container: 1120px;
  --max-card: 760px;

  /* Touch targets */
  --tap: 44px;

  /* -------------------------------------------------------------- */
  /* Borders / strokes                                               */
  /* -------------------------------------------------------------- */
  --border-w: 1px;

  /* -------------------------------------------------------------- */
  /* Motion                                                          */
  /* -------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;

  /* -------------------------------------------------------------- */
  /* Z-index scale (optional)                                        */
  /* -------------------------------------------------------------- */
  --z-header: 50;
  --z-nav: 60;
  --z-modal: 80;
  --z-toast: 90;
}

/* -------------------------------------------------------------- */
/* Responsive token overrides (breakpoints mínimos)               */
/* -------------------------------------------------------------- */

/* 481–768 */
@media (min-width: 481px) {
  :root {
    --fs-5: 24px;
    --fs-6: 32px;

    --s-7: 36px;
    --s-8: 48px;
  }
}

/* 769–1024 */
@media (min-width: 769px) {
  :root {
    --fs-4: 19px;
    --fs-5: 26px;
    --fs-6: 34px;

    --container: 1200px;
  }
}

/* 1025+ */
@media (min-width: 1025px) {
  :root {
    --fs-4: 20px;
    --fs-5: 28px;
    --fs-6: 36px;

    --container: 1240px;
  }
}
:root {
  --surface-2: rgba(255,255,255,0.70);
  --border-2: rgba(15, 23, 42, 0.10);
}